PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ

21 August 2010 By


ดูเหมือน CKEditor กำลังเป็นที่สนใจ และได้รับความนิยม สำหรับใครที่ต้องการใช้งาน คุณสมบัติที่ว่าดี ของ CKEditor มาใช้งาน ลองนำรูปแบบการใช้งาน ที่จะได้แนะนำต่อไป ไปใช้งาน อาจช่วยให้การใช้งาน CKEditor เป็นไปอย่างสะดวก

ดาวโหลด เวอร์ชันล่าสุดได้ที่ http://ckeditor.com/download แตกไฟล์ แล้ว ก็อบปี้โฟลเดอร์ ckeditor ไว้ใช้งาน
ตัวอย่าง

 


   

สร้างไฟล์ cke_config.js สำหรับไว้กำหนดคุณสมบัติของ CKEditor  (รูปแบบ Toolbar คลิก) แทรกโค้ดามด้านล่าง

 

// JavaScript Document
var cke_config={
	skin:'kama', // kama | office2003 | v2
	language:'th', // th / en and more.....
	extraPlugins :'uicolor',// เรียกใช้ plugin ให้สามารถแสดง UIColor Toolbar ได้
	uiColor :'#9C3', // กำหนดสีของ ckeditor
	extraPlugins : 'autogrow', // เรียกใช้ plugin ให้สามารถขยายขนาดความสูงตามเนื้อหาข้อมูล
	autoGrow_maxHeight : 400,	 // กำหนดความสูงตามเนื้อหาสูงสุด ถ้าเนื้อหาสูงกว่า จะแสดง scrollbar
	enterMode: 2,// กดปุ่ม Enter -- 1=แทรกแท็ก <p> 2=แทรก <br> 3=แทรก <div>
	shiftEnterMode	:1,// กดปุ่ม Shift กับ Enter พร้อมกัน 1=แทรกแท็ก <p> 2=แทรก <br> 3=แทรก <div>
	height :200, // กำหนดความสูง
	width :800, // กำหนดความกว้าง * การกำหนดความกว้างต้องให้เหมาะสมกับจำนวนของ Toolbar
/*		fullPage : true, // กำหนดให้สามารถแก้ไขแบบเโค้ดเต็ม คือมีแท็กตั้งแต่ <html> ถึง </html>*/
	toolbar : [
					['Source','-','Templates'],
					['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
					['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
					['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
					['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','UIColor']
				]
}

function InsertHTML(htmlValue,editorObj){// ฟังก์ขันสำหรับไว้แทรก HTML Code
	if(editorObj.mode=='wysiwyg'){
		editorObj.insertHtml(htmlValue);
	}else{
		alert( 'You must be on WYSIWYG mode!');
	}	
}
function SetContents(htmlValue,editorObj){ // ฟังก์ชันสำหรับแทนที่ข้อความทั้งหมด
	editorObj.setData(htmlValue);
}
function GetContents(editorObj){// ฟังก์ชันสำหรับดึงค่ามาใช้งาน
	return editorObj.getData();
}
function ExecuteCommand(commandName,editorObj){// ฟังก์ชันสำหรับเรียกใช้ คำสั่งใน CKEditor
	if(editorObj.mode=='wysiwyg'){
		editorObj.execCommand(commandName);
	}else{
		alert( 'You must be on WYSIWYG mode!');
	}
}

ฟังก์ฃัน InsertHTML สามารถประยุกต์ใช้งานกรณีใช้กับเว็บบอร์ด และมีการอ้างอิง ความคิดเห็น
ฟังก์ชัน SetContents สามารถประยุกต์ใช้ Reset ค่าใน CKEditor ให้ว่างหรือล้างค่าได้
ฟังก์ชัน GetContents สามารถประยุกต์ไว้สำหรับเช็คว่า CKEditor มีค่าว่าหรือไม่ก่อน Submit
ฟังก์ชัน ExecuteCommand สามารถไว้ใช้งานเพิ่มเรียกใช้คำสั่ง ของ CKEditor จากภายนอก เช่น
ExecuteCommand('link',editorObj) เป็นต้น

ตัวอย่าง การเรียกใช้งาน
 

<!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>

<p>
<textarea id="editor1" name="editor1">
&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. 
You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
</textarea>
</p>
 
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="cke_config.js"></script>		
<script type="text/javascript">
var editorObj=CKEDITOR.replace( 'editor1',cke_config); 
// editor1 ชื่อ id ของ textarea ที่ต้องการใช้งาน ckeditor
// var editorObj=CKEDITOR.replace( 'editor1',cke_config,dataValue);  // กรณีดึงข้อมูลมาแก้ไข
</script>			
<br />



<button onclick="InsertHTML('<p>แทรก  HTML</p>',editorObj);">แทรก  HTML</button>
&nbsp;
<button onclick="SetContents('<p>แทนที่ข้อความทั้งหมด</p>',editorObj);">แทนที่ข้อความทั้งหมด</button>
&nbsp;
<button onclick="alert(GetContents(editorObj));">แสดงข้อมูลใน CKEditor</button>

</body>
</html>

ส่วนการใช้งานกรณี ร่วมกับ การอัพโหลดไฟล์ ,  jQuery และ Ajax จะนำเสนอในโอกาสต่อไป
* การอัพโหลดโดยใฃ้ CKfinder ดูจะใช้ได้ดี แต่ยังอยากใช้กับ filemanager ของ FCKeditor อยู่ รอก่อนว่า จะมีใครพัฒนาให้ filemanager ใช้งานกับ CKEditor


Tags:: ckeditor





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