Mercurial Hosting > sceditor
annotate src/examples/original.html @ 12:933a459aa182
allow selector for textarea
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Sun, 07 Aug 2022 13:58:27 -0600 |
parents | dd47b95c9ec7 |
children | eaecca025287 |
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 |
4
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
8 <link rel="stylesheet" href="/themes/default.css" id="theme-style" /> |
0
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
9 |
4
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
10 <script src="/sceditor.js"></script> |
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
11 <script src="/icons/monocons.js"></script> |
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
12 <script src="/formats/bbcode.js"></script> |
0
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', |
4
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
77 style: '/themes/content/default.css' |
0
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() { |
4
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
83 var theme = '/themes/' + themeInput.value + '.css'; |
0
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> |