Mercurial Hosting > sceditor
view 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 |
line wrap: on
line source
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>SCEditor Demo</title> <link rel="stylesheet" href="/themes/default.css" id="theme-style" /> <script src="/sceditor.js"></script> <script src="/icons/monocons.js"></script> <script src="/formats/bbcode.js"></script> <style> html { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } form div { padding: .5em; } code:before { position: absolute; content: 'Code:'; top: -1.35em; left: 0; } code { margin-top: 1.5em; position: relative; background: #eee; border: 1px solid #aaa; white-space: pre; padding: .25em; min-height: 1.25em; } code:before, code { display: block; text-align: left; } </style> </head> <body> <form action="" method="post"> <div> <textarea id="example" style="height:300px;width:600px;">[center][size=3][b]BBCode SCEditor[/b][/size][/center] Give it a try! :) [color=#ff00]Red text! [/color][color=#3399ff]Blue?[/color] [ul][li]A simple list[/li][li]list item 2[/li][/ul] Just type [b]:[/b]) and it should be converted into :) as you type.</textarea> </div> <div> <label for="theme">Theme:</label> <select id="theme"> <option value="default">Default</option> <option value="defaultdark">Default dark</option> <option value="modern">Modern</option> <option value="office-toolbar">Office Toolbar</option> <option value="office">Office</option> <option value="square">Square</option> </select> </div> </form> <script> var textarea = document.getElementById('example'); sceditor.create(textarea, { format: 'bbcode', icons: 'monocons', style: '/themes/content/default.css' }); var themeInput = document.getElementById('theme'); themeInput.onchange = function() { var theme = '/themes/' + themeInput.value + '.css'; document.getElementById('theme-style').href = theme; }; </script> <p>SCEditor is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a></p> </body> </html>