Mercurial Hosting > sceditor

comparison src/examples/original.html @ 5:dd47b95c9ec7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add /examples/
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 04 Aug 2022 19:27:37 -0600
parents src/example.html@b7725dab7482
children eaecca025287
comparison
equal deleted inserted replaced
4:b7725dab7482 5:dd47b95c9ec7
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5
6 <title>SCEditor Demo</title>
7
8 <link rel="stylesheet" href="/themes/default.css" id="theme-style" />
9
10 <script src="/sceditor.js"></script>
11 <script src="/icons/monocons.js"></script>
12 <script src="/formats/bbcode.js"></script>
13
14 <style>
15 html {
16 font-family: Arial, Helvetica, sans-serif;
17 font-size: 13px;
18 }
19 form div {
20 padding: .5em;
21 }
22 code:before {
23 position: absolute;
24 content: 'Code:';
25 top: -1.35em;
26 left: 0;
27 }
28 code {
29 margin-top: 1.5em;
30 position: relative;
31 background: #eee;
32 border: 1px solid #aaa;
33 white-space: pre;
34 padding: .25em;
35 min-height: 1.25em;
36 }
37 code:before, code {
38 display: block;
39 text-align: left;
40 }
41 </style>
42 </head>
43 <body>
44 <form action="" method="post">
45 <div>
46 <textarea id="example" style="height:300px;width:600px;">[center][size=3][b]BBCode SCEditor[/b][/size][/center]
47
48 Give it a try! :)
49
50 [color=#ff00]Red text! [/color][color=#3399ff]Blue?[/color]
51
52 [ul][li]A simple list[/li][li]list item 2[/li][/ul]
53
54 Just type [b]:[/b]) and it should be converted into :) as you type.</textarea>
55
56 </div>
57
58 <div>
59 <label for="theme">Theme:</label>
60 <select id="theme">
61 <option value="default">Default</option>
62 <option value="defaultdark">Default dark</option>
63 <option value="modern">Modern</option>
64 <option value="office-toolbar">Office Toolbar</option>
65 <option value="office">Office</option>
66 <option value="square">Square</option>
67 </select>
68 </div>
69 </form>
70
71
72 <script>
73 var textarea = document.getElementById('example');
74 sceditor.create(textarea, {
75 format: 'bbcode',
76 icons: 'monocons',
77 style: '/themes/content/default.css'
78 });
79
80
81 var themeInput = document.getElementById('theme');
82 themeInput.onchange = function() {
83 var theme = '/themes/' + themeInput.value + '.css';
84
85 document.getElementById('theme-style').href = theme;
86 };
87 </script>
88
89 <p>SCEditor is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a></p>
90 </body>
91 </html>