เพิ่ม Youtube Plugin ให้กับ ckeditor เวอร์ชั่น 4.4.1

09 June 2014 เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee

ckeditor

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ckeditor

เนื้อหาการเพิ่ม Youtube Plugin จะศึกษาต่อจากบทความก่อนหน้า คือ

เพิ่มการปรับแต่ง ckeditor เวอร์ชั่น 4.4.1 ด้วย jQuery

http://www.ninenik.com/content.php?arti_id=502 via @ninenik

ดังนั้น เราจะมีไฟล์ cke_config.js ด้วย

เริ่มต้น ดาวน์โหลดไฟล์ Youtube Plugin ได้ที่

http://ckeditor.com/addon/youtube

ตัวที่ดาวน์โหลด คือ 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>

DEMO 1

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

อ่านต่อที่บทความ

10 Jun
2014

เพิ่ม office2013 skin ให้กับ ckeditor เวอร์ชั่น 4.4.1 อ่าน 5,709
เป็นเนื้อหาต่อเนื่องจาก บทความ เพิ่ม Youtube Plugin ให้กับ ckeditor เวอร์

เนื้อหาที่เกี่ยวข้อง

06 Jun
2014

แนะนำ ckeditor เวอร์ชั่น 4.4.1 อ่าน 5,369
ดูการเปลี่ยนแปลง ของ ckeditor ในแต่ละเวอร์ชั่น http://ckeditor.com/whatsn
07 Jun
2014

เพิ่มการปรับแต่ง ckeditor เวอร์ชั่น 4.4.1 ด้วย jQuery อ่าน 6,117
จากหัวข้อก่อนหน้า แนะนำการใช้งาน ckeditor เวอร์ชั่น 4.4.1 แนะน
กำลังอ่านเนื้อหานี้อยู่

09 Jun
2014

เพิ่ม Youtube Plugin ให้กับ ckeditor เวอร์ชั่น 4.4.1 อ่าน 6,359
เนื้อหาการเพิ่ม Youtube Plugin จะศึกษาต่อจากบทความก่อนหน้า คือ เพิ่มการปร
10 Jun
2014

เพิ่ม office2013 skin ให้กับ ckeditor เวอร์ชั่น 4.4.1 อ่าน 5,709
เป็นเนื้อหาต่อเนื่องจาก บทความ เพิ่ม Youtube Plugin ให้กับ ckeditor เวอร์

Tags:: ckeditor

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน