blob: c6dcca5fe591412361660ead085e11f63c13bbd4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<!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>
|
