Add sceditor WYSIWIG post editor support

2017-09-03 23:15:56 +09:00 · 2017-09-03 23:15:56 +09:00 · 02266e082e
commit 02266e082e
parent 0b3872dc93
112 changed files with 36025 additions and 0 deletions
--- a/js/sceditor/example.html
+++ b/js/sceditor/example.html
@ -0,0 +1,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>