Mercurial Hosting > sceditor
annotate src/examples/modified.html @ 19:13df5ac9b34b
more OO
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Mon, 08 Aug 2022 16:50:22 -0600 |
parents | 0cb206904499 |
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> |
7
df1e18048d97
add examples/min.html and better defaults
Franklin Schmidt <fschmidt@gmail.com>
parents:
6
diff
changeset
|
4 <meta name="viewport" content="width=device-width, initial-scale=1"> |
0
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
5 <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
|
6 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
7 <title>SCEditor Demo</title> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
8 |
4
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
9 <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
|
10 |
4
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
11 <script src="/sceditor.js"></script> |
10 | 12 <script src="/icons/monocons.js"></script> |
4
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
13 <script src="/formats/bbcode.js"></script> |
0
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
14 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
15 <style> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
16 html { |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
17 font-family: Arial, Helvetica, sans-serif; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
18 font-size: 13px; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
19 } |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
20 form div { |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
21 padding: .5em; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
22 } |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
23 code:before { |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
24 position: absolute; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
25 content: 'Code:'; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
26 top: -1.35em; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
27 left: 0; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
28 } |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
29 code { |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
30 margin-top: 1.5em; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
31 position: relative; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
32 background: #eee; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
33 border: 1px solid #aaa; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
34 white-space: pre; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
35 padding: .25em; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
36 min-height: 1.25em; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
37 } |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
38 code:before, code { |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
39 display: block; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
40 text-align: left; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
41 } |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
42 </style> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
43 </head> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
44 <body> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
45 <form action="" method="post"> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
46 <div> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
47 <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
|
48 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
49 Give it a try! :) |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
50 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
51 [color=#ff00]Red text! [/color][color=#3399ff]Blue?[/color] |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
52 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
53 [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
|
54 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
55 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
|
56 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
57 </div> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
58 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
59 <div> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
60 <label for="theme">Theme:</label> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
61 <select id="theme"> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
62 <option value="default">Default</option> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
63 <option value="defaultdark">Default dark</option> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
64 <option value="modern">Modern</option> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
65 <option value="office-toolbar">Office Toolbar</option> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
66 <option value="office">Office</option> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
67 <option value="square">Square</option> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
68 </select> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
69 </div> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
70 </form> |
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 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
73 <script> |
12
933a459aa182
allow selector for textarea
Franklin Schmidt <fschmidt@gmail.com>
parents:
10
diff
changeset
|
74 sceditor.create('#example', { |
0
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
75 }); |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
76 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
77 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
78 var themeInput = document.getElementById('theme'); |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
79 themeInput.onchange = function() { |
4
b7725dab7482
move /development/* to /
Franklin Schmidt <fschmidt@gmail.com>
parents:
2
diff
changeset
|
80 var theme = '/themes/' + themeInput.value + '.css'; |
0
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
81 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
82 document.getElementById('theme-style').href = theme; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
83 }; |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
84 </script> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
85 |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
86 <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
|
87 </body> |
4c4fc447baea
start with sceditor-3.1.1
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff
changeset
|
88 </html> |