ckeditor by jQuery (JS)

ใน
เพิ่มการปรับแต่ง ckeditor เวอร์ชั่น 4.4.1 ด้วย jQuery
ในส่วนนี้จะแนะนำเพิ่มเติม กับการปรับแต่ง ckeditor
โดยเราจะมีการใช้ไฟล์ javascript เพิ่มเข้ามา




cke_config.js
แสดงปกติพิมพ์โค้ดนี้?
  1. // JavaScript Document  
  2. var toolbar_full=[  
  3.         { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },  
  4.         { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },  
  5.         { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },  
  6.         { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },  
  7.         '/',  
  8.         { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },  
  9.         { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },  
  10.         { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },  
  11.         { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },  
  12.         '/',  
  13.         { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },  
  14.         { name: 'colors', items: [ 'TextColor', 'BGColor' ] },  
  15.         { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },  
  16.         { name: 'others', items: [ '-' ] },  
  17.         { name: 'about', items: [ 'About' ] }         
  18. ];  
  19. var toolbar_basic=[  
  20.         [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],  
  21.         [ 'FontSize', 'TextColor', 'BGColor' ]  
  22.     ]  
  23.   
  24. var toolbar_set=[  
  25.         { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.  
  26.         [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],  // Defines toolbar group without name.  
  27.         '/',        // Line break - next group will be placed in new line.  
  28.         { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }  
  29. ];  
  30. var my_toolbar_group = [  
  31.     { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },  
  32.     { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },  
  33.     { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },  
  34.     { name: 'forms' },  
  35.     '/',  
  36.     { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },  
  37.     { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },  
  38.     { name: 'links' },  
  39.     { name: 'insert' },  
  40.     '/',  
  41.     { name: 'styles' },  
  42.     { name: 'colors' },  
  43.     { name: 'tools' },  
  44.     { name: 'others' },  
  45.     { name: 'about' }  
  46. ];  
  47. var cke_config={  
  48.     language: 'th', //กำหนดภาษา เช่น th en us de  
  49.     uiColor: '#A1CFF3',  
  50.     toolbar:toolbar_basic  
  51. //  toolbarGroups:my_toolbar_group  
  52. }  

เมื่อมีการใช้งาน เราจะเรียกใช้ไฟล์นี้ด้วย 
แสดงปกติพิมพ์โค้ดนี้?
  1. <script src="cke_config.js"></script>  
จากนั้นในส่วนของ การใช้งาน ckeditor จะใช้ค่าตัวแปร จากไฟล์ xxx
มากำหนด รูปแบบของ ckeditor อีกที
จะได้เป็น
แสดงปกติพิมพ์โค้ดนี้?
  1. <script type="text/javascript">  
  2. $(function(){  
  3.     $("#message").ckeditor(cke_config);  
  4. });  
  5. </script>  

preview



all code
แสดงปกติพิมพ์โค้ดนี้?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title> </title>  
  7. </head>  
  8.   
  9. <body>  
  10.   
  11. <div style="margin:auto;width:75%;">  
  12.   
  13.   <form id="form5" name="form5" method="post" action="">  
  14.     <textarea name="message" id="message" cols="45" rows="5"></textarea>  
  15.   </form>  
  16.   <br />  
  17. </div>  
  18.   
  19.   
  20. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
  21. <script src="ckeditor/ckeditor.js"></script>  
  22. <script src="ckeditor/adapters/jquery.js"></script>  
  23. <script src="cke_config.js"></script>  
  24. <script type="text/javascript">  
  25. $(function(){  
  26.     $("#message").ckeditor(cke_config);  
  27. //  บรรทัดล่างที่ comment ไว้ลบออกได้  
  28. //  var editor = $("#message").ckeditor().editor;     
  29. //  $(".emoticon").click(function(){  
  30. //      var imgIns=$(this).attr("src");  
  31. //      var imgHTML="<img src="+imgIns+" />";  
  32. //      editor.insertHtml(imgHTML);  
  33. //  });  
  34. });  
  35. </script>  
  36. </body>  
  37. </html>