การใช้งาน CKEditor (Text Editor WYSIWYG) และการตั้งค่าแบบง่ายๆ

CKEditor คือ เครื่องมือ(Tool) ที่ช่วยให้ผู้ใช้งานสามารถเขียนข้อความลงบนเว็บไซต์ได้อย่างสะดวกสบายโดยที่ผู้ใช้ไม่จำเป็นต้องเขียนแท๊ก code ภาษา HTML ใดๆเลย ยกตัวอย่างเช่น กล่อง Comment หรือกล่องเขียนบทความ บนเว็บ ถ้าเราไม่ใช้ CKEditor จะได้ กล่องเป็น Text Area พิมพ์ข้อความลงไปไม่สามารถใส่สี ขนาดตัวอักษร ใดๆได้(ยกเว้นมีความรู้เกี่ยวกับภาษา HTML) ดังนั้น CKEditor จะช่วยเหลือในการที่เราสามารถ ใส่สี ใส่ขนาดตัวอักษร ใส่ลิงค์ ตัวหน้า ตัวเอียงได้โดย เหมือนกับใช้ Microsoft Word เลยทีเดียว

วิธีการติดตั้ง

ดาวน์โหลด Source code CKEditor ได้ที่เว็บไซต์ http://ckeditor.com/download โดยให้เราเลือกแบบ Full Package (ความแตกต่างของการดาวน์โหลดคือจะมีส่วนเสริมมาเยอะกว่า)
แตกไฟล์และ นำ Source code ที่ได้ไปวางไว้ในโปรเจคของเรา
เรียกไฟล์ javascript ของ ckeditor ตัวอย่างบทความของผมจะเป็นแบบนี้ครับ <script type=”text/javascript” src=”ckeditor/ckeditor.js”></script>
การเรียกใช้งาน สามารถทำได้โดย กำหนด id ของ textarea เป็นชื่ออะไรก็ได้ ตัวอย่างบทความ ชื่อ id คือ detail แล้วนำโค๊ดนี้ไปวางไว้ด้านล่าง textarea ตามตัวอย่างโค๊ดนี้ครับ

<textarea name="detail" id="detail"></textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace('detail');
function CKupdate() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
}
</script>

// Replace the <textarea id="editor1"> with a CKEditor

// instance, using default configuration.

CKEDITOR.replace('detail');

function CKupdate() {

for (instance in CKEDITOR.instances)

CKEDITOR.instances[instance].updateElement();

}

</script>

แล้วลองดูตัวอย่าง กันครับ จะได้ผลลัพธ์ออกมาเป็นแบบนี้

แต่ยังไม่จบนะครับ เพราะเรายังจะต้องตั้งค่าต่างๆ เช่นเราไม่ต้องการให้ผู้ใช้ ใส่ตัวอักษรหนา หรือ ไม่ต้องการให้ผู้ใช้ ใส่รูปภาพ ตรงนี้ก็สามารถทำได้เช่นกัน วิธีการตั้งค่าสำหรับบทความนี้จะสอนในส่วนที่จำเป็นต้องใช้ ให้เราสามารถนำไปประยุกต์ใช้กันครับ

เข้าไปที่ โฟล์เดอร์ ckeditor แล้ว หาคำว่า “config.js” ให้เปิดไฟล์นี้มาครับ
ไฟล์นี้จะเป็นไฟล์ที่กำหนดค่าแล้วจะเป็นทุกๆ การใช้งาน ckeditor นะครับ

ต้องการกำหนดให้เวลา กด enter ให้เคาะบรรทัดใหม่ไม่ใช้ขึ้นบรรทัดใหม่ โดยความแตกต่างจะอยู่ที่ระยะห่างระหว่างบรรทัดครับ ลองดูตัวอย่าง code

config.enterMode = CKEDITOR.ENTER_DIV;

1	config.enterMode = CKEDITOR.ENTER_DIV;

ต้องการแสดงเครื่องมือบางอย่าง ลองดู code ครับ

config.toolbarGroups = [
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{name: 'links'},
{name: 'insert'},
{name: 'forms'},
{name: 'tools'},
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'others'},
'/',
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{name: 'styles'},
{name: 'colors'},
{name: 'about'}
];

config.toolbarGroups = [

{name: 'clipboard', groups: ['clipboard', 'undo']},

{name: 'editing', groups: ['find', 'selection', 'spellchecker']},

{name: 'links'},

{name: 'insert'},

{name: 'forms'},

{name: 'tools'},

{name: 'document', groups: ['mode', 'document', 'doctools']},

{name: 'others'},

'/',

{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},

{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},

{name: 'styles'},

{name: 'colors'},

{name: 'about'}

];

ดูผลลัพธ์ที่ได้นะครับ

บทความนี้เป็นตัวอย่างคร่าวๆ ที่เสนอการติดตั้งและการตั้งค่า ให้เป็นแนวทางไปประยุกต์ใช้งานต่อ หากต้องการศึกษาและกำหนดรายละเอียดที่ลึกซึ่งขึ้นสามารถเข้าไปดูได้ที่เว็บหลักของ Ckeditor ได้ที่ คลิกเพื่อไป doc ckeditor

ดาวน์โหลด Source code ตัวอย่างที่ผมทำประกอบบทความ ได้ที่ คลิกที่นี้เพื่อดาวน์โหลด

สำหรับบทความนี้ มีเพียงเท่านี้ หากมีข้อสงสัย comment ไว้ด้านล่างครับ…

This site uses Akismet to reduce spam. Learn how your comment data is processed.

10 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

hana

5 years ago

สวัสดีค่ะ
รบกวนถาม ว่า การใช้งานckeditor จำเป็นต้องมีแบบ ที่มีลิขสิทธิ์มั้ยคะ
ถ้าใช้ในเชิงธุรกิจ ขอบคุณค่ะ

Onmobile

Author

Reply to hana

สามารถใช้งานได้ครับ

yothsathon

4 years ago

ขอสอบถามหน่อยครับต้องเพิ่มโค้ดอะไรตรงไหน เพื่อให้เวลาเรากรอกข้อความลงไปแล้วกดenter ข้อความจะมี ….. บันทึกลงฐานข้อมูลด้วยครับ
แบบตัวนี้นะครับ
ที่อยากได้คือแบบนี้ครับ
จุดประสงค์

1.เพื่อให้เด็กเข้าใจเนื้อหาและเรื่องราวแผนการจัดประสบการณ์

2.ส่งเสริมการใช้ภาษาในการฟัง พูด และการถ่ายทอดเรื่องราว

3.ฝึกความมีระเบียบวินัย มารยาทในการฟัง พูด และลักษณะนิสัยที่ดี

4.กล้าแสดงความคิดเห็นและรับฟังความคิดเห็น

แต่บันทึกลงฐานข้อมูลแล้วเรียกข้อความมาโชว์ได้แบบนี้ครับ
จุดประสงค์ 1.เพื่อให้เด็กเข้าใจเนื้อหาและเรื่องราวแผนการจัดประสบการณ์ 2.ส่งเสริมการใช้ภาษาในการฟัง พูด และการถ่ายทอดเรื่องราว 3.ฝึกความมีระเบียบวินัย มารยาทในการฟัง พูด และลักษณะนิสัยที่ดี 4.กล้าแสดงความคิดเห็นและรับฟังความคิดเห็น

Reply to yothsathon

ตอนดึงออกมาให้คุมด้วยฟังก์ชั่น nl2br() เช่น nl2br($data);

Yothsathan Lueanang

Reply to Onmobile

ใส่ลงในหน้าฟอร์มที่ใช้ textareaหรือหน้าcontrollerครับ

Reply to Yothsathan Lueanang

ใส่ใน html tag ครับ เช่น ก็เปลี่ยนเป็น

Pakorn

ถ้าเกิดว่าอยากให้กดแก้ไข แล้วดึงข้อมูล(แบบข้อความ)จากดาต้าเบสมาใส่ใน Editor คล้ายกับเว็บบล็อก ต้องทำยังไงครับ

Reply to Pakorn

ใส่ดาต้า ระหว่าง tag textarea ครับ

tom

3 years ago

textarea required ทำยังไงครับ

พิมพ์รัชต์ ตันตระกูล

กำหนด margin และขึ้นหน้าใหม่ต้องทำอย่างไรคะ

itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี

ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์

About the Author: Onmobile

You May Also Like

PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี!

PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี!

About the Author: Onmobile