ดูเหมือน 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">
<p>This is some <strong>sample text</strong>.
You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</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>
<button onclick="SetContents('<p>แทนที่ข้อความทั้งหมด</p>',editorObj);">แทนที่ข้อความทั้งหมด</button>
<button onclick="alert(GetContents(editorObj));">แสดงข้อมูลใน CKEditor</button>
</body>
</html>
ส่วนการใช้งานกรณี ร่วมกับ การอัพโหลดไฟล์ , jQuery และ Ajax จะนำเสนอในโอกาสต่อไป
* การอัพโหลดโดยใฃ้ CKfinder ดูจะใช้ได้ดี แต่ยังอยากใช้กับ filemanager ของ FCKeditor อยู่ รอก่อนว่า จะมีใครพัฒนาให้ filemanager ใช้งานกับ CKEditor
