ติดตั้ง CKEditor ผ่าน jQuery Adapter

เมื่อ : 28-Jan-12 23:03 อ่าน : 131 ครั้ง
Tag : javascript tool jquery

CKEditor มี jQuery Adapter ที่ทำให้เราสามารถติดตั้ง CKEditor เสมือนว่า CKEditor เป็น jQuery plugin ตัวหนึ่ง คำสั่งในการติดตั้งเป็นแบบ jQuery Selector สร้างความคุณเคยให้กับผู้ที่ใช้งาน jQuery อยู่แล้ว อีกทั้ง jQuery ยังเป็น JavaScript library ที่ได้รับความนิยมอย่างสูง

มาดูขั้นตอนเขียนติดตั้งกันเลยนะครับ

1. download CKEditor และ jQuery

2.สร้าง floder ตั้งเชื่อว่า SetupCKEditor เพื่อเก็บไฟล์ทั้งหมดในตัวอย่างนี้

3. แตก zip file ที่ download มาจากข้อ 1 เป็น folder ที่ชื่อว่า ckeitor แล้วนำไปวางใน SetupCKEditor folder

4. สร้าง setup.html เพื่อแสดง CKEditor

5. include JavaScript file เหล่านี้ ลงไปในส่วน head ของ setup.html ดังนี้

<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="ckeditor/adapters/jquery.js" type="text/javascript"></script>

6. เพิ่ม textarea element ที่มี id attribute เป็น details ในส่วน body ของ index.html ดังนี้

<textarea id="details"></textarea>

7.เขียนคำสั่ง JavaScript ต่อไปนี้แทนที่ textarea ด้วย CKEditor

 <script type="text/javascript">

        $(function() {
            
            //replace textarea with CKEditor
            $('#details').ckeditor();

        });
        
</script>

8. เปิด setup.html เพื่อดูผลลัพธ์

รูป CKEditor ที่แสดงบน browser

คำสั่งทั้งหมดใน setup.html

<!DOCTYPE html >
<html>
<head>
    <title>Setup CKEditor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="ckeditor/adapters/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">

        //short hand jQuery document ready
        $(function () {

            //replace textarea with CKEditor
            $('#details').ckeditor();

        });
        
    </script>
</head>
<body>
    <textarea id="details"></textarea>
</body>
</html>

ถึงขึ้นตอนนี้ถือได้ว่าเราได้ติดตั้ง CKEditor เรียบร้อยแล้ว

download source code ตัวอย่าง

Learn CKEdtior.zip

ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...

ติดตั้ง CKEditor ผ่าน jQuery Adapter

ความเห็น

Friends