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

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

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

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

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

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

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'}
];

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

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

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

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

The post การใช้งาน CKEditor (Text Editor WYSIWYG) และการตั้งค่าแบบง่ายๆ first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.