CKEditor 4 CKEDITOR.dialog結構

Posted on Edited on In Views: Disqus:

 

其實這篇文章是圖解範例程式碼，只不過是解說CKEDITOR.dialog結構為主。

 

範例程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.ckeditor.com/4.6.2/full-all/ckeditor.js"></script>
</head>
<body>
    <textarea id="editorSpace">Hello CKeditor!!!</textarea>

    <script>
        var editor2 = CKEDITOR.replace('editorSpace', {
            uiColor: '#139ff7' // 只接受HEX進位值
        });

        editor2.on('pluginsLoaded', function (ev) {
            // 檢查 Dialog 是否已經存在，不存在才要建立
            if (!CKEDITOR.dialog.exists('myDialog')) {
                // 在獨體模式(Singleton)CKEDITOR上註冊一個新的 Dialog，名稱就叫做 'myDialog'
                CKEDITOR.dialog.add('myDialog', function (editor) {

                    // 這裡所返回的，就是 dialogDefinition 的設定。
                    return {
                        title: "I'm a Dialog",
                        minWidth: 400,
                        minHeight: 200,
                        contents: [// 一個content有數個頁籤
                            // 頁籤1
                            {
                                // 這裡是定義 Dialog 的內容，所使用到的都是那些 UI 與 Dialog 的 Definition。
                                // 裡面的東西有複雜到，待會我會直接寫出檔案上傳的範例。
                                id: 'page1',
                                hidden: false, // 不隱藏頁籤
                                filebrowser: 'uploadButton', //?
                                label: editor.lang.image.upload + '1',
                                // 在頁籤裡放置元件
                                elements:
                                    [
                                        {
                                            type: 'file',
                                            id: 'upload1',
                                            label: '請選擇1',
                                            style: 'height:40px;border: 1px solid red;',
                                        },
                                        {
                                            type: 'fileButton',
                                            id: 'uploadButton1',
                                            filebrowser: 'info:txtUrl', //?
                                            label: editor.lang.image.btnUpload,
                                            'for': ['Upload', 'upload'] //?
                                        }
                                    ]
                            },

                            // 頁籤2
                            {
                                id: 'page2',
                                hidden: false,
                                filebrowser: 'uploadButton',
                                label: editor.lang.image.upload + '2',
                                elements:
                                    [
                                        {
                                            type: 'file',
                                            id: 'upload2',
                                            label: '請選擇2',
                                            style: 'height:40px;border: 1px solid red;',
                                        },
                                        {
                                            type: 'fileButton',
                                            id: 'uploadButton2',
                                            filebrowser: 'info:txtUrl',
                                            label: editor.lang.image.btnUpload,
                                            'for': ['Upload', 'upload']
                                        }
                                    ]
                            }
                        ]
                    };
                });

            }
            // 建立一個新的編輯器命令，並將剛剛建立好的 myDialog 綁定在這個編輯器命令上面。
            editor2.addCommand('myDialogCmd', new CKEDITOR.dialogCommand('myDialog'));
            // 於editor ui上添加一按紐，並且將一編輯器命令，附加在按紐上。
            editor2.ui.addButton('MyButton',
                {
                    label: 'My Dialog',
                    command: 'myDialogCmd',
                    icon: 'http://www.ebesucher.de/favicon.ico',
                });
        });
    </script>
</body>
</html>

整個程式碼主要架構有三

CKEDITOR.dialog.add、editor2.addCommand、editor2.ui.addButton，

editor2.addCommand、editor2.ui.addButton用法較單純請參考程式碼，

以CKEDITOR.dialog.add方法較為複雜主要解說如下，

由spec可看出CKEDITOR.dialog.add( name, dialogDefinition )方法會回傳一個dialogDefinition物件，

其實dialogDefinition物件你可以把他想像成一個容器，而一個容器可以裝數個頁籤(page)，

架構如下

// 這裡所返回的，為 dialogDefinition 的設定。
return {
    title: "I'm a Dialog",
    minWidth: 400,
    minHeight: 200,
    contents: [// 一個content有數個頁籤
        {
        // 頁籤1
        },

        {
        // 頁籤2
        }
    ]
};

而一個頁籤裡可以放置N個元素，

架構如下

// 這裡所返回的，為 dialogDefinition 的設定。
return {
    title: "I'm a Dialog",
    minWidth: 400,
    minHeight: 200,
    contents: [// 一個content有數個頁籤
        // 頁籤1
        {
            elements:
                [
                    {
                        // 元素1
                    },
                    {
                        // 元素2
                    }
                ]
        },

        // 頁籤2
        {
            elements:
                [
                    {
                        // 元素1
                    },
                    {
                        // 元素2
                    }
                ]
        }
    ]
};

元素的設定法還蠻像html的寫法，用法請直接參考程式碼。

 

參考資料：

CKeditor 專注本業之 Dialog 超棘手 part 4