PageRenderTime 34ms CodeModel.GetById 10ms app.highlight 18ms RepoModel.GetById 2ms app.codeStats 0ms

/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
  1<!doctype html>
  2<html>
  3	<head>
  4		<meta charset="utf-8" />
  5		<title>KindEditor Examples</title>
  6		<style>
  7			.ke-tabs-example li {
  8				padding: 0 5px;
  9			}
 10			.ke-icon-example1 {
 11				background-image: url(../skins/default/default.gif);
 12				background-position: 0px -672px;
 13				width: 16px;
 14				height: 16px;
 15			}
 16			.ke-icon-example2 {
 17				background-image: url(../skins/default/default.gif);
 18				background-position: 0px -672px;
 19				width: 16px;
 20				height: 16px;
 21			}
 22		</style>
 23		<link rel="stylesheet" href="../themes/default/default.css" />
 24		<link rel="stylesheet" href="../themes/simple/simple.css" />
 25		<script charset="utf-8" src="../kindeditor-min.js"></script>
 26		<script charset="utf-8" src="../lang/zh_CN.js"></script>
 27		<script>
 28			// ????? #1
 29			KindEditor.lang({
 30				example1 : '??HTML'
 31			});
 32			KindEditor.plugin('example1', function(K) {
 33				var self = this, name = 'example1';
 34				self.clickToolbar(name, function() {
 35					self.insertHtml('<strong>????</strong>');
 36				});
 37			});
 38			// ????? #2
 39			KindEditor.lang({
 40				example2 : 'CLASS??'
 41			});
 42			KindEditor.plugin('example2', function(K) {
 43				var self = this, name = 'example2';
 44				function click(value) {
 45					var cmd = self.cmd;
 46					if (value === 'adv_strikethrough') {
 47						cmd.wrap('<span style="background-color:#e53333;text-decoration:line-through;"></span>');
 48					} else {
 49						cmd.wrap('<span class="' + value + '"></span>');
 50					}
 51					cmd.select();
 52					self.hideMenu();
 53				}
 54				self.clickToolbar(name, function() {
 55					var menu = self.createMenu({
 56						name : name,
 57						width : 150
 58					});
 59					menu.addItem({
 60						title : '????',
 61						click : function() {
 62							click('red');
 63						}
 64					});
 65					menu.addItem({
 66						title : '????',
 67						click : function() {
 68							click('green');
 69						}
 70					});
 71					menu.addItem({
 72						title : '????',
 73						click : function() {
 74							click('yellow');
 75						}
 76					});
 77					menu.addItem({
 78						title : '??????',
 79						click : function() {
 80							click('adv_strikethrough');
 81						}
 82					});
 83				});
 84			});
 85			function getParam(url, name) {
 86				return url.match(new RegExp('[?&]' + name + '=([^?&]+)', 'i')) ? unescape(RegExp.$1) : '';
 87			}
 88			KindEditor.ready(function(K) {
 89				var tabTitleList = ['????', '????', '????', '???', '????', '??????', '????', 'HTML??', 'URL??', '?????', '?????'];
 90				var optionMap = {
 91					'content0' : {
 92						cssPath : '../plugins/code/prettify.css',
 93						allowFileManager : true
 94					},
 95					'content1' : {
 96						cssPath : '../plugins/code/prettify.css',
 97						resizeType : 1,
 98						allowPreviewEmoticons : false,
 99						allowImageUpload : false,
100						items : [
101							'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
102							'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
103							'insertunorderedlist', '|', 'emoticons', 'image', 'link']
104					},
105					'content2' : {
106						cssPath : '../plugins/code/prettify.css',
107						basePath : '../'
108					},
109					'content3' : {
110						cssPath : '../plugins/code/prettify.css',
111						langType : 'en'
112					},
113					'content4' : {
114						cssPath : '../plugins/code/prettify.css',
115						readonlyMode : true
116					},
117					'content5' : {
118						cssPath : '../plugins/code/prettify.css',
119						newlineTag : 'br'
120					},
121					'content6' : {
122						cssPath : '../plugins/code/prettify.css',
123						afterChange : function() {
124							K('#tab6 .word_count1').html(this.count());
125							K('#tab6 .word_count2').html(this.count('text'));
126						}
127					},
128					'content7' : {
129						cssPath : '../plugins/code/prettify.css',
130						filterMode : true
131					},
132					'content8' : {
133						cssPath : '../plugins/code/prettify.css',
134						urlType : ''
135					},
136					'content9' : {
137						cssPath : '../plugins/code/prettify.css',
138						themeType : 'simple'
139					},
140					'content10' : {
141						cssPath : ['../plugins/code/prettify.css', 'index.css'],
142						items : ['source', 'removeformat', 'example1', 'example2']
143					}
144				};
145				var editor = null;
146				var tabs = K.tabs({
147					src : K('#tabs'),
148					cls : 'ke-tabs-example',
149					afterSelect : function(i) {
150						if (editor) {
151							editor.remove();
152							editor = null;
153						}
154						if (i == 2) {
155							return;
156						}
157						editor = K.create('#tab' + i + ' textarea[name=content]', optionMap['content' + i]);
158					}
159				});
160				K.each(tabTitleList, function(i, title) {
161					tabs.add({
162						title : title,
163						panel : K('#tab' + i)
164					});
165				})
166				var index = parseInt(getParam(location.href, 'tab') || 0, 10);
167				tabs.select(index);
168				K('#tab' + index).show();
169				
170				K('#tab0 input[name=getHtml]').click(function(e) {
171					alert(editor.html());
172				});
173				K('#tab0 input[name=isEmpty]').click(function(e) {
174					alert(editor.isEmpty());
175				});
176				K('#tab0 input[name=getText]').click(function(e) {
177					alert(editor.text());
178				});
179				K('#tab0 input[name=selectedHtml]').click(function(e) {
180					alert(editor.selectedHtml());
181				});
182				K('#tab0 input[name=setHtml]').click(function(e) {
183					editor.html('<h3>Hello KindEditor</h3>');
184				});
185				K('#tab0 input[name=setText]').click(function(e) {
186					editor.text('<h3>Hello KindEditor</h3>');
187				});
188				K('#tab0 input[name=insertHtml]').click(function(e) {
189					editor.insertHtml('<strong>??HTML</strong>');
190				});
191				K('#tab0 input[name=appendHtml]').click(function(e) {
192					editor.appendHtml('<strong>??HTML</strong>');
193				});
194				K('#tab0 input[name=clear]').click(function(e) {
195					editor.html('');
196				});
197
198				K('#tab2 input[name=load]').click(function() {
199					K.loadScript('../kindeditor.js', function() {
200						editor = K.create('#tab2 textarea', optionMap.content2);
201					});
202				});
203				K('#tab2 input[name=remove]').click(function() {
204					if (editor) {
205						editor.remove();
206						editor = null;
207					}
208				});
209
210				K('#tab3 select[name=lang]').change(function() {
211					if (editor) {
212						editor.remove();
213						editor = null;
214					}
215					optionMap.content3.langType = this.value;
216					editor = K.create('#tab3 textarea', optionMap.content3);
217				});
218
219				K('#tab4 input[name=readonly]').click(function() {
220					editor.readonly();
221				});
222				K('#tab4 input[name=cancel]').click(function() {
223					editor.readonly(false);
224				});
225				
226				K('#tab5 select[name=newlineTag]').change(function() {
227					if (editor) {
228						editor.remove();
229						editor = null;
230					}
231					optionMap.content5.newlineTag = this.value;
232					editor = K.create('#tab5 textarea', optionMap.content5);
233				});
234
235				K('#tab8 select[name=urlType]').change(function() {
236					if (editor) {
237						editor.remove();
238						editor = null;
239					}
240					optionMap.content8.urlType = this.value;
241					editor = K.create('#tab8 textarea', optionMap.content8);
242				});
243
244				K('#tab9 select[name=themeType]').change(function() {
245					if (editor) {
246						editor.remove();
247						editor = null;
248					}
249					optionMap.content9.themeType = this.value;
250					editor = K.create('#tab9 textarea', optionMap.content9);
251				});
252			});
253		</script>
254	</head>
255	<body>
256		<div id="tabs"></div>
257
258		<!-- ???? -->
259		<div id="tab0" style="display:none;">
260			<form>
261			<textarea name="content" style="width:800px;height:400px;visibility:hidden;">
262<p>
263	????:
264</p>
265<pre class="prettyprint">
266&amp;lt;link rel="stylesheet" href="../themes/default/default.css" /&amp;gt;
267&amp;lt;script charset="utf-8" src="../kindeditor.js"&amp;gt;&amp;lt;/script&amp;gt;
268&amp;lt;script charset="utf-8" src="../lang/zh_CN.js"&amp;gt;&amp;lt;/script&amp;gt;
269</pre>
270<p>
271	JavaScript??:
272</p>
273<pre class="prettyprint">
274KindEditor.ready(function(K) {
275	K.create('textarea[name="content"]', {
276		allowFileManager : true
277	});
278});
279</pre>
280<p>
281	&nbsp;
282</p>
283			</textarea>
284			<p>
285				<input type="button" name="getHtml" value="??HTML" />
286				<input type="button" name="isEmpty" value="??????" />
287				<input type="button" name="getText" value="????(??img,embed)" />
288				<input type="button" name="selectedHtml" value="????HTML" />
289				<br />
290				<br />
291				<input type="button" name="setHtml" value="??HTML" />
292				<input type="button" name="setText" value="????" />
293				<input type="button" name="insertHtml" value="??HTML" />
294				<input type="button" name="appendHtml" value="??HTML" />
295				<input type="button" name="clear" value="????" />
296				<input type="reset" name="reset" value="Reset" />
297			</p>
298			</form>
299		</div>
300
301		<!-- ???? -->
302		<div id="tab1" style="display:none;">
303			<textarea name="content" style="width:700px;height:300px;visibility:hidden;">
304<p>
305	????:
306</p>
307<pre class="prettyprint">
308&amp;lt;link rel="stylesheet" href="../themes/default/default.css" /&amp;gt;
309&amp;lt;script charset="utf-8" src="../kindeditor.js"&amp;gt;&amp;lt;/script&amp;gt;
310&amp;lt;script charset="utf-8" src="../lang/zh_CN.js"&amp;gt;&amp;lt;/script&amp;gt;
311</pre>
312<p>
313	JavaScript??:
314</p>
315<pre class="prettyprint">
316KindEditor.ready(function(K) {
317	K.create('textarea[name="content"]', {
318		resizeType : 1,
319		allowPreviewEmoticons : false,
320		allowImageUpload : false,
321		items : [
322			'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline',
323			'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
324			'insertunorderedlist', '|', 'emoticons', 'image', 'link']
325	});
326});
327</pre>
328<p>
329	&nbsp;
330</p>
331			</textarea>
332		</div>
333
334		<!-- ???? -->
335		<div id="tab2" style="display:none;">
336			<textarea name="content" style="width:800px;height:400px;">
337????:
338<pre class="prettyprint">
339&amp;lt;link rel="stylesheet" href="../themes/default/default.css" /&amp;gt;
340</pre>
341JavaScript??:
342<pre class="prettyprint">
343KindEditor.loadScript('../kindeditor.js', function() {
344	KindEditor.create('#tab2 textarea');
345});
346</pre>
347<p>
348	&nbsp;
349</p>
350			</textarea>
351			<p>
352				<input type="button" name="load" value="??JS??????" />
353				<input type="button" name="remove" value="?????" />
354			</p>
355		</div>
356
357		<!-- ??? -->
358		<div id="tab3" style="display:none;">
359			<p>
360			<select name="lang">
361				<option value="en">English</option>
362				<option value="zh_CN">????</option>
363				<option value="zh_TW">????</option>
364			</select>
365			</p>
366			<textarea name="content" style="width:800px;height:400px;">
367JavaScript??:
368<pre class="prettyprint">
369KindEditor.ready(function(K) {
370	// English: langType : 'en'
371	// ????: langType : 'zh_CN'
372	// ????: langType : 'zh_TW'
373	K.create('textarea[name="content"]', {
374		langType : 'en'
375	});
376});
377</pre>
378<p>
379	&nbsp;
380</p>
381			</textarea>
382		</div>
383
384		<!-- ???? -->
385		<div id="tab4" style="display:none;">
386			<textarea name="content" style="width:800px;height:400px;">
387JavaScript??:
388<pre class="prettyprint">
389KindEditor.ready(function(K) {
390	var editor = K.create('textarea[name="content"]', {
391		readonlyMode : true
392	});
393	// ???????
394	K('#tab4 input[name=readonly]').click(function() {
395		editor.readonly();
396	});
397	// ??????
398	K('#tab4 input[name=cancel]').click(function() {
399		editor.readonly(false);
400	});
401});
402</pre>
403<p>
404	&nbsp;
405</p>
406			</textarea>
407			<p>
408				<input type="button" name="readonly" value="???????" />
409				<input type="button" name="cancel" value="??????" />
410			</p>
411		</div>
412
413		<!-- ?????? -->
414		<div id="tab5" style="display:none;">
415			<p>
416			<select name="newlineTag">
417				<option value="br">BR??</option>
418				<option value="p">P??</option>
419			</select>
420			</p>
421			<textarea name="content" style="width:800px;height:400px;">
422JavaScript??:
423<pre class="prettyprint">
424KindEditor.ready(function(K) {
425	// P??: newlineTag : 'p'
426	// BR??: newlineTag : 'br'
427	K.create('textarea[name="content"]', {
428		newlineTag : 'br'
429	});
430});
431</pre>
432<p>
433	&nbsp;
434</p>
435			</textarea>
436		</div>
437		
438		<!-- ???? -->
439		<div id="tab6" style="display:none;">
440			<textarea name="content" style="width:800px;height:400px;">
441JavaScript??:
442<pre class="prettyprint">
443KindEditor.ready(function(K) {
444	K.create('textarea[name="content"]', {
445		afterChange : function() {
446			K('#tab6 .word_count1').html(this.count());
447			K('#tab6 .word_count2').html(this.count('text'));
448		}
449	});
450});
451</pre>
452<p>
453	&nbsp;
454</p>
455			</textarea>
456			<br />
457			?????? <span class="word_count1">0</span> ???????????HTML????<br />
458			?????? <span class="word_count2">0</span> ???????????????IMG?EMBED????????IMG?EMBED???????
459		</div>
460		
461		<!-- HTML?? -->
462		<div id="tab7" style="display:none;">
463			<textarea name="content" style="width:800px;height:400px;">
464JavaScript??:
465<pre class="prettyprint">
466KindEditor.ready(function(K) {
467	K.create('textarea[name="content"]', {
468		filterMode : true
469	});
470});
471</pre>
472<p>
473	&nbsp;
474</p>
475			</textarea>
476		</div>
477		
478		
479		<!-- URL?? -->
480		<div id="tab8" style="display:none;">
481			<p>
482			<select name="urlType">
483				<option value="">URL????</option>
484				<option value="relative">??URL</option>
485				<option value="absolute">???????URL</option>
486				<option value="domain">??????URL</option>
487			</select>
488			</p>
489			<textarea name="content" style="width:800px;height:400px;">
490<p>
491?????<img border="0" src="../plugins/emoticons/images/0.gif" /><br />
492?????<img border="0" alt="" src="http://img1.cache.netease.com/img09/logo/logo.gif" /><br />
493???????<a href="demo-19.html" target="_blank">????</a><br />
494???????<a href="http://www.163.com/" target="_blank">????</a><br />
495</p>
496JavaScript??:
497<pre class="prettyprint">
498KindEditor.ready(function(K) {
499	// URL????: urlType : ''
500	// ??URL: urlType : 'relative'
501	// ???????URL: urlType : 'absolute'
502	// ??????URL: urlType : 'domain'
503	K.create('textarea[name="content"]', {
504		urlType : ''
505	});
506});
507</pre>
508<p>
509	&nbsp;
510</p>
511			</textarea>
512		</div>
513		
514		<!-- ????? -->
515		<div id="tab9" style="display:none;">
516			<p>
517			<select name="themeType">
518				<option value="simple">????</option>
519				<option value="default">????</option>
520			</select>
521			</p>
522			<textarea name="content" style="width:800px;height:400px;">
523JavaScript??:
524<pre class="prettyprint">
525KindEditor.ready(function(K) {
526	// ????: themeType : 'simple'
527	// ????: themeType : 'default'
528	K.create('textarea[name="content"]', {
529		themeType : 'simple'
530	});
531});
532</pre>
533<p>
534	&nbsp;
535</p>
536			</textarea>
537		</div>
538		
539		<!-- ????? -->
540		<div id="tab10" style="display:none;">
541			<textarea name="content" style="width:800px;height:400px;"></textarea>
542		</div>
543
544	</body>
545</html>