Mercurial Hosting > sceditor

annotate src/example.html @ 0:4c4fc447baea

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