เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ
21 August 2010ดูเหมือน 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
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2379 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4186 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3994 08 Oct 08 javascript อย่างง่าย กับการสร้างปุ่มจากรูปภาพ อ่าน 2844 08 Oct 10 การอัพเดท สถานะบน facebook อัตโนมัติ แบบ graph api ด้วย php sdk อ่าน 3534 11 Aug 10 ปรับแต่ง facebook comments ด้วย css กำหนด style ให้เข้ากับเว็บ อ่าน 17763 24 Mar 10 เริ่มต้น รู้จัก ก่อนการใช้งาน google map api อ่าน 5374 09 Jul 10 เพิ่มความเร็ว ให้กับการ cache ด้วย jquery ajax และ php cache class อ่าน 2299 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 5973 15 Sep 10 สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ อ่าน 3726 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17299 15 Nov 09 สร้างลิ้งค์เมนู 2 ภาษา กรณี ไทย อังกฤษ ด้วย php อย่างง่าย อ่าน 1864 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7878 31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 4366 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5416 09 May 10 ดึงค่า ข้อมูล จาก xml ไฟล์ มากำหนดเป็นตัวแปร array ด้วย php อ่าน 2151 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 2932 13 May 09 แก้ไขการตัดข้อความด้วย substrใน php แล้วมีรูปสี่เหลี่ยม อ่าน 2734 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 4805 12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 2559