|
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-
- <title>SCEditor Demo</title>
-
- <link rel="stylesheet" href="./minified/themes/default.min.css" type="text/css" />
-
- <script
- src="https://code.jquery.com/jquery-3.1.0.min.js"
- integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
- crossorigin="anonymous"></script>
-
- <script src="./minified/jquery.sceditor.bbcode.min.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>
-
- <script>
- // Source: http://www.backalleycoder.com/2011/03/20/link-tag-css-stylesheet-load-event/
- var loadCSS = function(url, callback){
- var link = document.createElement('link');
- link.type = 'text/css';
- link.rel = 'stylesheet';
- link.href = url;
- link.id = 'theme-style';
-
- document.getElementsByTagName('head')[0].appendChild(link);
-
- var img = document.createElement('img');
- img.onerror = function(){
- if(callback) callback(link);
- }
- img.src = url;
- }
-
- $(function() {
- var initEditor = function() {
- $('textarea').sceditor({
- plugins: 'bbcode',
- style: './minified/jquery.sceditor.default.min.css'
- });
- };
-
- $('#theme').change(function() {
- var theme = './minified/themes/' + $(this).val() + '.min.css';
-
- $('textarea').sceditor('instance').destroy();
- $('link:first').remove();
- $('#theme-style').remove();
-
- loadCSS(theme, initEditor);
- });
-
- initEditor();
- });
- </script>
- </head>
- <body>
- <form action="" method="post">
- <div>
- <textarea name="bbcode_field" 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]
-
- If you are using IE9+ or any non-IE browser just type [b]:[/b]) and it should be converted into :) as you type.</textarea>
-
- <p>If you are using IE9+ or any other browser then it should automatically replace
- :) and other emoticon codes with theit emoticon images.</p>
- </div>
-
- <div>
- <label for="theme">Theme:</label>
- <select id="theme">
- <option value="default">Default</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>
-
- <p>SCEditor is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a></p>
- </body>
- </html>
|