Mercurial Hosting > sceditor
comparison src/example.html @ 0:4c4fc447baea
start with sceditor-3.1.1
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Thu, 04 Aug 2022 15:21:29 -0600 |
| parents | |
| children | c7c738ddbbf8 |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:4c4fc447baea |
|---|---|
| 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="minified/themes/default.min.css" id="theme-style" /> | |
| 9 | |
| 10 <script src="minified/sceditor.min.js"></script> | |
| 11 <script src="minified/icons/monocons.js"></script> | |
| 12 <script src="minified/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: 'minified/themes/content/default.min.css' | |
| 78 }); | |
| 79 | |
| 80 | |
| 81 var themeInput = document.getElementById('theme'); | |
| 82 themeInput.onchange = function() { | |
| 83 var theme = 'minified/themes/' + themeInput.value + '.min.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> |