ปรับแต่งค่า CKEditor jQuery Adapter

เมื่อ : 29-Jan-12 15:20 อ่าน : 114 ครั้ง
Tag : javascript tool jquery

บทความที่ผ่านมา ผมได้แนะนำวิธีการติดตั้ง CKEditor ผ่าน jQuery Adapter ไปแล้ว ดังนั้น วันนี้ผมจะขอแนะนำการปรับแต่งค่าของ CKEditor บ้าง

เราทราบแล้วว่า ckeditor() เป็นเมธอดหลักในการสร้าง CKEditor บนหน้าเว็บ โดยที่จริง ckeditor เมธอดมี optional parameter สองตัวคือ

callback function ที่จะถูกเรียกใช้หลังจากที่ CKEditor ถูกสร้างพร้อมใช้งานแล้ว
configuration options สำหรับปรับแต่ง CKEditor

ต่อไปเราจะมาเขียนคำสั่งในการปรับแต่งค่าของ CKEditor เพื่อให้มีความสูง 300 px และมี skin หน้าตาเป็นแบบ office 2003 สร้างไฟล์ใหม่ชื่อ config.html โดยนำคำสั่งจาก setup.html มาปรับแต่ง

   <script type="text/javascript">

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

            //replace textarea with CKEditor
            $('#details').ckeditor(
                function () { },//callback function
                {
                    skin: 'office2003',
                    height: 300

                }//configuration options as JSON
                );

        }); //end jQuery document ready
        
</script>

คำอธิบาย ส่งค่า { skin: 'office2003', height: 300 } เป็นอาร์กิวเมนต์ตัวที่สองให้กับ ckeditor เมธอด เพื่อกำหนดให้ CKEditor ที่จะสร้างขึ้นมา มี skin เป็น Office 2003 และ มีความสูง 300 px
สามารถอ่าน configuration options ที่ CKEditor มีให้ได้จาก http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

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

<!DOCTYPE html >
<html>
<head>
    <title>Config 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(
                function () { },//callback function
                {
                    skin: 'office2003',
                    height: 300

                }//configuration options as JSON
                );

        }); //end jQuery document ready
        
    </script>
</head>
<body>
    <textarea id="details"></textarea>
</body>
</html>

เปิด config.html ด้วย browser เพื่อดูผลลัพธ์การทำงาน

รูป CKEditor ในแบบ Office 2003 skin บนหน้าเว็บ

download source code ตัวอย่าง

LearnC KEdtior.zip

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

ปรับแต่งค่า CKEditor jQuery Adapter

ความเห็น

Friends