เป็นเนื้อหาต่อเนื่องจาก บทความ
เพิ่ม Youtube Plugin ให้กับ ckeditor เวอร์ชั่น 4.4.1
https://www.ninenik.com/content.php?arti_id=503 via @ninenik
โดยจะมาประยุกต์เพิ่มเติม
โค้ดในไฟล์ cke_config.js ปรับแต่งแล้ว
// JavaScript Document
var 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 เพื่อขึ้นบรรทัดใหม่ โดยมีรูปแบบดังนี้
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 เพื่อขึ้นบรรทัดใหม่ โดยมีรูปแบบดังนี้
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
skin:'office2013',
โค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง