PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

10 June 2014 By


เป็นเนื้อหาต่อเนื่องจาก บทความ
เพิ่ม Youtube Plugin ให้กับ ckeditor เวอร์ชั่น 4.4.1  
http://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>

Tags:: ckeditor





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