เนื้อหาการเพิ่ม Youtube Plugin จะศึกษาต่อจากบทความก่อนหน้า คือ
เพิ่มการปรับแต่ง ckeditor เวอร์ชั่น 4.4.1 ด้วย jQuery
https://www.ninenik.com/content.php?arti_id=502 via @ninenik
ดังนั้น เราจะมีไฟล์ cke_config.js ด้วย
เริ่มต้น ดาวน์โหลดไฟล์ Youtube Plugin ได้ที่
ตัวที่ดาวน์โหลด คือ Version: 1.0.10
ดาวน์โหลด แล้วแตกไฟล์ zip จากนั้น copy โฟลเดอร์ youtube
ทั้งหมดไปไว้ใน โฟลเดอร์ ckeditor > plugins
แล้วมาปรับแต่งที่ไฟล์ cke_config.js เพื่อเปิดใช้งาน
โค้ด ไฟล์ 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',
uiColor: '#A1CFF3',
toolbar:toolbar_basic
// toolbarGroups:my_toolbar_group
}
จะมีอยู่สองส่วนคือ
เปิดใช้ plugin ตามบรรทัดที่ 49 จากโค้ด
extraPlugins:'youtube',
และส่วนที่สอง การแสดง icon ใน toolbar ตามบรรทัดที่ 21 จากโค้ด
[ 'FontSize', 'TextColor', 'BGColor', 'Youtube' ]
ตามตัวอย่างเราจะเพิ่ม ต่อท้ายของ icon กำหนดสีพื้นหลัง ดูตัวอย่างท้าบบทความด้านล่าง
โค้ดตัวอย่าง
<!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>
<div style="margin:auto;width:85%;">
<form id="form1" name="form1" method="post" action="">
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</form>
<br />
</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>
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง