เป็นเนื้อหาต่อเนื่องจาก บทความ
เพิ่ม Youtube Plugin ให้กับ ckeditor เวอร์ชั่น 4.4.1
https://www.ninenik.com/content.php?arti_id=503 via @ninenik
โดยจะมาประยุกต์เพิ่มเติม
โค้ดในไฟล์ cke_config.js ปรับแต่งแล้ว
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | // JavaScript Documentvar toolbar_full=[ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] }, { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }, { name: 'others', items: [ '-' ] }, { name: 'about', items: [ 'About' ] } ];var toolbar_basic=[ [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ], [ 'FontSize', 'TextColor', 'BGColor', 'Youtube' ] ]var toolbar_set=[ { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups. [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], // Defines toolbar group without name. '/', // Line break - next group will be placed in new line. { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }];var my_toolbar_group = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, { name: 'forms' }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, { name: 'links' }, { name: 'insert' }, '/', { name: 'styles' }, { name: 'colors' }, { name: 'tools' }, { name: 'others' }, { name: 'about' }];var cke_config={ language: 'th', //กำหนดภาษา เช่น th en us de extraPlugins:'youtube', enterMode:CKEDITOR.ENTER_BR, // ENTER_P - ENTER_BR - ENTER_DIV shiftEnterMode:CKEDITOR.ENTER_P, // // ENTER_P - ENTER_BR - ENTER_DIV skin:'office2013', uiColor: '#A1CFF3', toolbar:toolbar_basic// toolbarGroups:my_toolbar_group} |
ก่อนอื่น แนะนำการกำหนด การปรับแต่งใน ckeditor สองส่วนเพิ่มเติม คือ
1. การกำหนดการกดปุ่ม ENTER เพื่อขึ้นบรรทัดใหม่ โดยมีรูปแบบดังนี้
1 | enterMode:CKEDITOR.ENTER_BR, |
ตามโค้ดในไฟล์ cke_config.js บรรทัดที่ 50
ค่า ENTER_BR สามารถกำหนดได้ 3 ค่า หากไม่กำหนดจะเป็น ENTER_P
โดย
ENTER_P ขึ้นบรรทัดใหม่ ด้วยการกดปุ่ม ENTER ด้วยแท็ก p
ENTER_BR ขึ้นบรรทัดใหม่ ด้วยการกดปุ่ม ENTER ด้วยแท็ก br
ENTER_DIV ขึ้นบรรทัดใหม่ ด้วยการกดปุ่ม ENTER ด้วยแท็ก div
2. การกำหนดการกดปุ่ม shiftEnter เพื่อขึ้นบรรทัดใหม่ โดยมีรูปแบบดังนี้
1 | shiftEnterMode:CKEDITOR.ENTER_P, |
ตามโค้ดในไฟล์ cke_config.js บรรทัดที่ 51
ค่า ENTER_P สามารถกำหนดได้ 3 ค่า หากไม่กำหนดจะเป็น ENTER_BR
โดย
ENTER_P ขึ้นบรรทัดใหม่ ด้วยการกดปุ่ม shiftEnter ด้วยแท็ก p
ENTER_BR ขึ้นบรรทัดใหม่ ด้วยการกดปุ่ม shiftEnter ด้วยแท็ก br
ENTER_DIV ขึ้นบรรทัดใหม่ ด้วยการกดปุ่ม shiftEnter ด้วยแท็ก div
ต่อไปจะเป็นการเพิ่ม skin office2013 ให้กับ ckeditor
เริ่มเต้นให้ดาวน์โหลด skin ได้ที่
http://ckeditor.com/addon/office2013
เลือกดาวน์โหลด Version: 1.0
แตกไฟล์ zip แล้ว copy โฟลเดอร์ office2013 ทั้งหมด
ไปไว้ใน ckeditor > skin
จากนั้นปรับแต่งไฟล์ cke_config.js ตามโค้ดบรรทัดที่ 52
1 | skin:'office2013', |
โค้ดทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> </title></head><body><br /><br /><br /><div style="margin:auto;width:80%;"><div style="margin:auto;width:80%;"> <form id="form5" name="form5" method="post" action=""> <textarea name="message" id="message" cols="45" rows="5"></textarea> </form> <br /></div></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="ckeditor/ckeditor.js"></script><script src="ckeditor/adapters/jquery.js"></script><script src="cke_config.js"></script><script type="text/javascript">$(function(){ $("#message").ckeditor(cke_config);// บรรทัดล่างที่ comment ไว้ลบออกได้// var editor = $("#message").ckeditor().editor; // $(".emoticon").click(function(){// var imgIns=$(this).attr("src");// var imgHTML="<img src="+imgIns+" />";// editor.insertHtml(imgHTML);// });});</script></body></html> |
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง