อ่านและกำหนดค่าข้อความใน CKEditor get and set CKEditor data

เมื่อ : 30-Jan-12 23:05 อ่าน : 136 ครั้ง
Tag : javascript tool jquery

นับเป็นบทความที่สามแล้วที่เกี่ยวกับ CKEditor บทความที่ผ่านมาเราสามารถปรับแต่ค่า CKEditor ได้แล้ว

มาวันนี้ ถ้าเราต้องการนำข้อความที่พิมพ์ใน CKEditor ออกไปใช้ต่อที่อื่น หรือว่าต้องการที่นำข้อความจากที่อื่นใส่เข้าไปใน CKEditor ผ่านทางคำสั่ง ไม่ใช่การพิมพ์ลงไปโดยตรง จะมีวิธีการทำอย่างไร วันนี้จะได้ทราบกันครับ

ก่อนอื่นต้องมารู้จักพระเอกในบทความนี้ก่อน คือ Class ที่เป็นเป็นตัวแทนของ CKEditor นั่นเอง มีชื่อว่า CKEDITOR.editor มีเมธอดที่สำคัญในการอ่านและกำหนดค่าข้อความใน editor คือ getData() และ setData() ตามลำดับ สามารถดูรายละเอียดพร็อพเพอร์ตี้และเมธอดของ CKEDITOR.editor ได้จาก http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html

เราสามารถใช้ เมธอด getEditor() ของ jQuery object ได้หลังจากที่ CKEditor พร้อมใช้งาน โดยเรียกใช้เมธอดนี้ภายใน callback function ซึ่งเป็นพารามิเตอร์ตัวแรกของ ckeditor() ที่ใช้สร้าง CKEditor บนหน้าเว็บ

มาดูคำสั่งกันเลยนะครับ

getsetdata.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 () {

            //variable for reference to CKEDITOR.editor object
            var edtor = null;
            //replace textarea with CKEditor
            $('#ckEditor').ckeditor(
                function () {
                    edtor = $('#ckEditor').ckeditorGet();
                }, //callback function get call after CKEditor ready to use
                {
                skin: 'office2003',
                height: 200

            }//configuration options as JSON
            ); //end  ckeditor method

            //bind click event to buttons


            $("#btnGetCKEditorData").click(function () {

                //get text in CKEditor and set to text area
                $("#htmlTextArea").val(edtor.getData());

            });

            $("#btnSetCKEditorData").click(function () {

                //get text in text area and set to CKEditor
                edtor.setData($("#htmlTextArea").val());
            });
        });         //end jQuery document ready
        
    </script>
</head>
<body>
    <textarea id="htmlTextArea" style="width: 100%"></textarea>
    <p style="text-align: center">
        
        <button id="btnGetCKEditorData">
            Get Data from CKEditor ^^^</button>
            <button id="btnSetCKEditorData">
            Set Data To CKEditor vvv</button>
    </p>
    <textarea id="ckEditor"></textarea>
</body>
</html>

คำอธิบาย

เราสร้าง textarea สองตัว ตัวแรกมี id เป็น htmlTextArea ไว้รับและส่งค่าไป CKEditor ตัวที่สองมี id เป็น ckEditor ไว้นำ CKEditor มาแทนที่

สร้าง edtor สำหรับอ้างอิงถึง CKEditor object ไว้ภายนอก ckeditor เมธอด เพื่อให้เราสามารถเรียกใข้ editor จากเมธอดอื่นได้

ใน callback function ของ ckeditor เมธอด เขียนคำสั่งในการรับ CKEditor แล้ว assign ให้กับตัวแปร editor

ต่อจากนั้นใช้คำสั่ง jQuery ผูกปุ่มในการรับค่าและส่งค่าไปยัง CKEditor แลกแปลี่ยนค่ากันระหว่าง HTML TextArea ธรรมดากับ CKEditor

อ่านค่าข้อความใน CKEditor โดยใช้ editor.getData() และเขียนข้อความลง CKEditor โดยใช้ editor.setData()
val เป็น jQuery เมธอดที่ใช้ในการอ่านและกำหนดค่า text area

ทดลองเปิด getsetdata.html ด้วย web browser

จะมีหน้าตาดังรูป

ทดลองกดปุ่ม Get Data from CKEditor และ Set data to CKEditor เพื่อดูผลลัพธ์การทำงาน

download source code ตัวอย่าง

LearnCKEditor.zip

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

อ่านและกำหนดค่าข้อความใน CKEditor get and set CKEditor data

ความเห็น

Friends