/source/Plug-in/kind/examples/total.html
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&lt;link rel="stylesheet" href="../themes/default/default.css" /&gt; 267&lt;script charset="utf-8" src="../kindeditor.js"&gt;&lt;/script&gt; 268&lt;script charset="utf-8" src="../lang/zh_CN.js"&gt;&lt;/script&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 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&lt;link rel="stylesheet" href="../themes/default/default.css" /&gt; 309&lt;script charset="utf-8" src="../kindeditor.js"&gt;&lt;/script&gt; 310&lt;script charset="utf-8" src="../lang/zh_CN.js"&gt;&lt;/script&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 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&lt;link rel="stylesheet" href="../themes/default/default.css" /&gt; 340</pre> 341JavaScript??: 342<pre class="prettyprint"> 343KindEditor.loadScript('../kindeditor.js', function() { 344 KindEditor.create('#tab2 textarea'); 345}); 346</pre> 347<p> 348 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 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 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 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 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 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 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 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>