total.html | searchcode

/source/Plug-in/kind/examples/total.html

http://prosporous.googlecode.com/ · HTML · 545 lines · 514 code · 20 blank · 11 comment · 0 complexity · 537f5518a7a8375ff395f0931625442a MD5 · raw file

<!doctype html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>KindEditor Examples</title>

		<style>

			.ke-tabs-example li {

				padding: 0 5px;

			}

			.ke-icon-example1 {

				background-image: url(../skins/default/default.gif);

				background-position: 0px -672px;

				width: 16px;

				height: 16px;

			}

			.ke-icon-example2 {

				background-image: url(../skins/default/default.gif);

				background-position: 0px -672px;

				width: 16px;

				height: 16px;

			}

		</style>

		<link rel="stylesheet" href="../themes/default/default.css" />

		<link rel="stylesheet" href="../themes/simple/simple.css" />

		<script charset="utf-8" src="../kindeditor-min.js"></script>

		<script charset="utf-8" src="../lang/zh_CN.js"></script>

		<script>

			// ????? #1

			KindEditor.lang({

				example1 : '??HTML'

			});

			KindEditor.plugin('example1', function(K) {

				var self = this, name = 'example1';

				self.clickToolbar(name, function() {

					self.insertHtml('<strong>????</strong>');

				});

			});

			// ????? #2

			KindEditor.lang({

				example2 : 'CLASS??'

			});

			KindEditor.plugin('example2', function(K) {

				var self = this, name = 'example2';

				function click(value) {

					var cmd = self.cmd;

					if (value === 'adv_strikethrough') {

						cmd.wrap('<span style="background-color:#e53333;text-decoration:line-through;"></span>');

					} else {

						cmd.wrap('<span class="' + value + '"></span>');

					}

					cmd.select();

					self.hideMenu();

				}

				self.clickToolbar(name, function() {

					var menu = self.createMenu({

						name : name,

						width : 150

					});

					menu.addItem({

						title : '????',

						click : function() {

							click('red');

						}

					});

					menu.addItem({

						title : '????',

						click : function() {

							click('green');

						}

					});

					menu.addItem({

						title : '????',

						click : function() {

							click('yellow');

						}

					});

					menu.addItem({

						title : '??????',

						click : function() {

							click('adv_strikethrough');

						}

					});

				});

			});

			function getParam(url, name) {

				return url.match(new RegExp('[?&]' + name + '=([^?&]+)', 'i')) ? unescape(RegExp.$1) : '';

			}

			KindEditor.ready(function(K) {

				var tabTitleList = ['????', '????', '????', '???', '????', '??????', '????', 'HTML??', 'URL??', '?????', '?????'];

				var optionMap = {

					'content0' : {

						cssPath : '../plugins/code/prettify.css',

						allowFileManager : true

					},

					'content1' : {

						cssPath : '../plugins/code/prettify.css',

						resizeType : 1,

						allowPreviewEmoticons : false,

						allowImageUpload : false,

						items : [

							'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',

							'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',

							'insertunorderedlist', '|', 'emoticons', 'image', 'link']

					},

					'content2' : {

						cssPath : '../plugins/code/prettify.css',

						basePath : '../'

					},

					'content3' : {

						cssPath : '../plugins/code/prettify.css',

						langType : 'en'

					},

					'content4' : {

						cssPath : '../plugins/code/prettify.css',

						readonlyMode : true

					},

					'content5' : {

						cssPath : '../plugins/code/prettify.css',

						newlineTag : 'br'

					},

					'content6' : {

						cssPath : '../plugins/code/prettify.css',

						afterChange : function() {

							K('#tab6 .word_count1').html(this.count());

							K('#tab6 .word_count2').html(this.count('text'));

						}

					},

					'content7' : {

						cssPath : '../plugins/code/prettify.css',

						filterMode : true

					},

					'content8' : {

						cssPath : '../plugins/code/prettify.css',

						urlType : ''

					},

					'content9' : {

						cssPath : '../plugins/code/prettify.css',

						themeType : 'simple'

					},

					'content10' : {

						cssPath : ['../plugins/code/prettify.css', 'index.css'],

						items : ['source', 'removeformat', 'example1', 'example2']

					}

				};

				var editor = null;

				var tabs = K.tabs({

					src : K('#tabs'),

					cls : 'ke-tabs-example',

					afterSelect : function(i) {

						if (editor) {

							editor.remove();

							editor = null;

						}

						if (i == 2) {

							return;

						}

						editor = K.create('#tab' + i + ' textarea[name=content]', optionMap['content' + i]);

					}

				});

				K.each(tabTitleList, function(i, title) {

					tabs.add({

						title : title,

						panel : K('#tab' + i)

					});

				})

				var index = parseInt(getParam(location.href, 'tab') || 0, 10);

				tabs.select(index);

				K('#tab' + index).show();

				

				K('#tab0 input[name=getHtml]').click(function(e) {

					alert(editor.html());

				});

				K('#tab0 input[name=isEmpty]').click(function(e) {

					alert(editor.isEmpty());

				});

				K('#tab0 input[name=getText]').click(function(e) {

					alert(editor.text());

				});

				K('#tab0 input[name=selectedHtml]').click(function(e) {

					alert(editor.selectedHtml());

				});

				K('#tab0 input[name=setHtml]').click(function(e) {

					editor.html('<h3>Hello KindEditor</h3>');

				});

				K('#tab0 input[name=setText]').click(function(e) {

					editor.text('<h3>Hello KindEditor</h3>');

				});

				K('#tab0 input[name=insertHtml]').click(function(e) {

					editor.insertHtml('<strong>??HTML</strong>');

				});

				K('#tab0 input[name=appendHtml]').click(function(e) {

					editor.appendHtml('<strong>??HTML</strong>');

				});

				K('#tab0 input[name=clear]').click(function(e) {

					editor.html('');

				});



				K('#tab2 input[name=load]').click(function() {

					K.loadScript('../kindeditor.js', function() {

						editor = K.create('#tab2 textarea', optionMap.content2);

					});

				});

				K('#tab2 input[name=remove]').click(function() {

					if (editor) {

						editor.remove();

						editor = null;

					}

				});



				K('#tab3 select[name=lang]').change(function() {

					if (editor) {

						editor.remove();

						editor = null;

					}

					optionMap.content3.langType = this.value;

					editor = K.create('#tab3 textarea', optionMap.content3);

				});



				K('#tab4 input[name=readonly]').click(function() {

					editor.readonly();

				});

				K('#tab4 input[name=cancel]').click(function() {

					editor.readonly(false);

				});

				

				K('#tab5 select[name=newlineTag]').change(function() {

					if (editor) {

						editor.remove();

						editor = null;

					}

					optionMap.content5.newlineTag = this.value;

					editor = K.create('#tab5 textarea', optionMap.content5);

				});



				K('#tab8 select[name=urlType]').change(function() {

					if (editor) {

						editor.remove();

						editor = null;

					}

					optionMap.content8.urlType = this.value;

					editor = K.create('#tab8 textarea', optionMap.content8);

				});



				K('#tab9 select[name=themeType]').change(function() {

					if (editor) {

						editor.remove();

						editor = null;

					}

					optionMap.content9.themeType = this.value;

					editor = K.create('#tab9 textarea', optionMap.content9);

				});

			});

		</script>

	</head>

	<body>

		<div id="tabs"></div>



		<!-- ???? -->

		<div id="tab0" style="display:none;">

			<form>

			<textarea name="content" style="width:800px;height:400px;visibility:hidden;">

<p>

	????:

</p>

<pre class="prettyprint">

&amp;lt;link rel="stylesheet" href="../themes/default/default.css" /&amp;gt;

&amp;lt;script charset="utf-8" src="../kindeditor.js"&amp;gt;&amp;lt;/script&amp;gt;

&amp;lt;script charset="utf-8" src="../lang/zh_CN.js"&amp;gt;&amp;lt;/script&amp;gt;

</pre>

<p>

	JavaScript??:

</p>

<pre class="prettyprint">

KindEditor.ready(function(K) {

	K.create('textarea[name="content"]', {

		allowFileManager : true

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

			<p>

				<input type="button" name="getHtml" value="??HTML" />

				<input type="button" name="isEmpty" value="??????" />

				<input type="button" name="getText" value="????(??img,embed)" />

				<input type="button" name="selectedHtml" value="????HTML" />

				<br />

				<br />

				<input type="button" name="setHtml" value="??HTML" />

				<input type="button" name="setText" value="????" />

				<input type="button" name="insertHtml" value="??HTML" />

				<input type="button" name="appendHtml" value="??HTML" />

				<input type="button" name="clear" value="????" />

				<input type="reset" name="reset" value="Reset" />

			</p>

			</form>

		</div>



		<!-- ???? -->

		<div id="tab1" style="display:none;">

			<textarea name="content" style="width:700px;height:300px;visibility:hidden;">

<p>

	????:

</p>

<pre class="prettyprint">

&amp;lt;link rel="stylesheet" href="../themes/default/default.css" /&amp;gt;

&amp;lt;script charset="utf-8" src="../kindeditor.js"&amp;gt;&amp;lt;/script&amp;gt;

&amp;lt;script charset="utf-8" src="../lang/zh_CN.js"&amp;gt;&amp;lt;/script&amp;gt;

</pre>

<p>

	JavaScript??:

</p>

<pre class="prettyprint">

KindEditor.ready(function(K) {

	K.create('textarea[name="content"]', {

		resizeType : 1,

		allowPreviewEmoticons : false,

		allowImageUpload : false,

		items : [

			'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline',

			'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',

			'insertunorderedlist', '|', 'emoticons', 'image', 'link']

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

		</div>



		<!-- ???? -->

		<div id="tab2" style="display:none;">

			<textarea name="content" style="width:800px;height:400px;">

????:

<pre class="prettyprint">

&amp;lt;link rel="stylesheet" href="../themes/default/default.css" /&amp;gt;

</pre>

JavaScript??:

<pre class="prettyprint">

KindEditor.loadScript('../kindeditor.js', function() {

	KindEditor.create('#tab2 textarea');

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

			<p>

				<input type="button" name="load" value="??JS??????" />

				<input type="button" name="remove" value="?????" />

			</p>

		</div>



		<!-- ??? -->

		<div id="tab3" style="display:none;">

			<p>

			<select name="lang">

				<option value="en">English</option>

				<option value="zh_CN">????</option>

				<option value="zh_TW">????</option>

			</select>

			</p>

			<textarea name="content" style="width:800px;height:400px;">

JavaScript??:

<pre class="prettyprint">

KindEditor.ready(function(K) {

	// English: langType : 'en'

	// ????: langType : 'zh_CN'

	// ????: langType : 'zh_TW'

	K.create('textarea[name="content"]', {

		langType : 'en'

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

		</div>



		<!-- ???? -->

		<div id="tab4" style="display:none;">

			<textarea name="content" style="width:800px;height:400px;">

JavaScript??:

<pre class="prettyprint">

KindEditor.ready(function(K) {

	var editor = K.create('textarea[name="content"]', {

		readonlyMode : true

	});

	// ???????

	K('#tab4 input[name=readonly]').click(function() {

		editor.readonly();

	});

	// ??????

	K('#tab4 input[name=cancel]').click(function() {

		editor.readonly(false);

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

			<p>

				<input type="button" name="readonly" value="???????" />

				<input type="button" name="cancel" value="??????" />

			</p>

		</div>



		<!-- ?????? -->

		<div id="tab5" style="display:none;">

			<p>

			<select name="newlineTag">

				<option value="br">BR??</option>

				<option value="p">P??</option>

			</select>

			</p>

			<textarea name="content" style="width:800px;height:400px;">

JavaScript??:

<pre class="prettyprint">

KindEditor.ready(function(K) {

	// P??: newlineTag : 'p'

	// BR??: newlineTag : 'br'

	K.create('textarea[name="content"]', {

		newlineTag : 'br'

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

		</div>

		

		<!-- ???? -->

		<div id="tab6" style="display:none;">

			<textarea name="content" style="width:800px;height:400px;">

JavaScript??:

<pre class="prettyprint">

KindEditor.ready(function(K) {

	K.create('textarea[name="content"]', {

		afterChange : function() {

			K('#tab6 .word_count1').html(this.count());

			K('#tab6 .word_count2').html(this.count('text'));

		}

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

			<br />

			?????? <span class="word_count1">0</span> ???????????HTML????<br />

			?????? <span class="word_count2">0</span> ???????????????IMG?EMBED????????IMG?EMBED???????

		</div>

		

		<!-- HTML?? -->

		<div id="tab7" style="display:none;">

			<textarea name="content" style="width:800px;height:400px;">

JavaScript??:

<pre class="prettyprint">

KindEditor.ready(function(K) {

	K.create('textarea[name="content"]', {

		filterMode : true

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

		</div>

		

		

		<!-- URL?? -->

		<div id="tab8" style="display:none;">

			<p>

			<select name="urlType">

				<option value="">URL????</option>

				<option value="relative">??URL</option>

				<option value="absolute">???????URL</option>

				<option value="domain">??????URL</option>

			</select>

			</p>

			<textarea name="content" style="width:800px;height:400px;">

<p>

?????<img border="0" src="../plugins/emoticons/images/0.gif" /><br />

?????<img border="0" alt="" src="http://img1.cache.netease.com/img09/logo/logo.gif" /><br />

???????<a href="demo-19.html" target="_blank">????</a><br />

???????<a href="http://www.163.com/" target="_blank">????</a><br />

</p>

JavaScript??:

<pre class="prettyprint">

KindEditor.ready(function(K) {

	// URL????: urlType : ''

	// ??URL: urlType : 'relative'

	// ???????URL: urlType : 'absolute'

	// ??????URL: urlType : 'domain'

	K.create('textarea[name="content"]', {

		urlType : ''

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

		</div>

		

		<!-- ????? -->

		<div id="tab9" style="display:none;">

			<p>

			<select name="themeType">

				<option value="simple">????</option>

				<option value="default">????</option>

			</select>

			</p>

			<textarea name="content" style="width:800px;height:400px;">

JavaScript??:

<pre class="prettyprint">

KindEditor.ready(function(K) {

	// ????: themeType : 'simple'

	// ????: themeType : 'default'

	K.create('textarea[name="content"]', {

		themeType : 'simple'

	});

});

</pre>

<p>

	&nbsp;

</p>

			</textarea>

		</div>

		

		<!-- ????? -->

		<div id="tab10" style="display:none;">

			<textarea name="content" style="width:800px;height:400px;"></textarea>

		</div>



	</body>

</html>
Alerts (29)

'<style>' Inline CSS detected; use external stylesheets for maintainability and performance
6
'<script>' Inline JavaScript detected; move to external files with CSP for security and maintainability
27
'style=' Inline CSS detected; use external stylesheets for maintainability and performance
47 259 261 302 303 335 336 358 366 385 386 414 421 439 440 462 463 480 489 515 522 540 541
'<form' Form missing method attribute; specify method (e.g., POST, GET) for clarity
260
'<img' Image missing alt attribute; add alt text for accessibility
491
'http://' Insecure HTTP link detected; use HTTPS for encrypted connections
492 494