CKeditor插件開發流程

jopen 11年前發布 | 12K 次閱讀 HTML編輯器 CKEditor

1.放在多文件中

第一步:config.js中

config.extraPlugins = '插件名稱';//注冊插件,extraPlugins只允許出現一次,你如果之前有新增別的插件,那么用逗號分隔 
第二步:plugins文件夾下新建:插件名稱 文件夾
第三步:
1:在plugins/插件名稱/下新建plugin.js;
2:在plugins/插件名稱/下新建 dialogs文件夾,并在其內新建 "插件名稱.js"
(function() {
    CKEDITOR.plugins.add("插件名稱", {
        requires: ["dialog"],
        init: function(a) {
            a.addCommand("插件名稱", new CKEDITOR.dialogCommand("插件名稱"));
            a.ui.addButton("插件名稱", {
                label: "插件名稱",//調用dialog時顯示的名稱
                command: "插件名稱",
                icon: this.path + "g.ico"http://在toolbar中的圖標

            });
            CKEDITOR.dialog.add("插件名稱", this.path + "dialogs/插件名稱.js")

        }

    })

})();
第四步:/plugins/插件名稱/dialogs/插件名稱.js 內容如下:

(function() {
    CKEDITOR.dialog.add("插件名稱", 
    function(a) {
        return {
            title: "插件名稱",
            minWidth: "500px",
            minHeight:"500px",
            contents: [{
                id: "tab1",
                label: "",
                title: "",
                expand: true,
                width: "500px",
                height: "500px",
                padding: 0,
                elements: [{
                    type: "html",
                    style: "width:500px;height:500px",
                    html: '內容測試'
                }]
            }],
            onOk: function() {
                //點擊確定按鈕后的操作
                //a.insertHtml("編輯器追加內容");
            }
        }
    })
})();
2、放在單個plugin.js中
第一步:config.js中

config.extraPlugins = 'clearempty';//注冊插件,extraPlugins只允許出現一次,你如果之前有新增別的插件,那么用逗號分隔

第二步:plugins文件夾下新建:clearempty 文件夾
第三步:在plugins/clearempty/下新建plugin.js;內容如下:

(function() {
    CKEDITOR.plugins.add('clearempty', {
        requires: ['styles', 'button'],
        init: function(a) {
            a.addCommand('clearempty', CKEDITOR.plugins.clearempty.commands.clearempty);
            a.ui.addButton('clearempty', {
                label: "清除空行",
                command: 'clearempty',
                icon: this.path + "g.ico"http://這個g.ico是你的插件圖標,放在同目錄下
            });
        }
    });
    CKEDITOR.plugins.clearempty = {
        commands: {
            clearempty: {
                exec: function(a) {
                    var _html = a.getData();
                    //在這里執行你將_html中的空行替換掉的操作
                       a.setData(_html);
                }
            }
        }
    };
})();

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!