118 lines
2.9 KiB
HTML
118 lines
2.9 KiB
HTML
|
<!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>
|