CKEditor插件開發

以前做過一個教育項目，是有關在線考試的。其中對編輯器CKEditor做了擴充，增加了插入客觀題、主觀題、選擇題和判斷題的功能。這里記述下CKEditor插件開發的過程。

CKEditor以前叫FCKEditor，下載地址：http://ckeditor.com/download。我用的3.5.3版本，基本流程和方法應該也適用最新的版本。

效果如下：

四個按鈕從左到右分別是：插入填空題，插入選擇題，插入判斷題和插入主觀題。

點擊 插入選擇題答案 按鈕，出現操作框：

點擊確定后在編輯器里插入一個下拉框：

 

四個插件基本流程是一樣的，拿“插入選擇題”的開發流程來做個說明。

1.在ckeditor\plugins\ 下新建一個目錄，名字為qchoice。我把這四個插件統一加了前綴字母q，是為了方便管理。

2.在qchoice下新建一個“plugin.js”，代碼如下：

CKEDITOR.plugins.add('qchoice', {
    requires: ['dialog'],
    init: function (editor) {
        var b = editor.addCommand('qchoice', new CKEDITOR.dialogCommand('qchoice')); 
        editor.ui.addButton('Choice', { //按鈕名稱：Choice，編輯器菜單上回用到
            label: '插入選擇題答案【客觀題】', //插件名稱
            command: 'qchoice', //插件命令
            icon: this.path + 'images/choice.gif' //編輯器菜單的圖標
        });
        CKEDITOR.dialog.add('qchoice', this.path + 'dialogs/insertanswer.js'); //點擊按鈕彈出對話框的js代碼
    }
});

3.在qchoice里新建一個images目錄，放進一個choice.gif。這個就是插件出現在編輯器菜單上的按鈕圖標。大小 16*16

4.在qchoice下新建dialogs目錄。這個目錄存放的是所有對話框。該目錄下新建一個insertanswer.js文件，代碼如下，我加了注釋加以說明：

CKEDITOR.dialog.add('qchoice', function (editor) { //要和plugin.js 中的command 一致
    var escape = function (value) {
        return value;
    };
    return {
        title: '插入選擇題答案【客觀題】', //對話框標題
        minWidth: 400, //對話框寬度
        minHeight: 100,//對話框高度
        contents: [{   //對話框內容
            id: 'choice',
            name: 'choice',
            label: '插入選擇題答案', 
            title: '插入選擇題答案',
            elements: [{
                id: 'rdType',
                type: 'radio', //表單元素類型：單選按鈕
                label: '類型：', //標題
                items: [['單選題', 'c'], ['多選題', 'm']], //單選按鈕選項
                'default': 'c' //默認值
            },
            {
                id: 'txtItems',
                type: 'text', //表單元素類型：輸入框
                label: '選項(選項之間用逗號隔開)：',
                'default': 'A,B,C,D'
            },
            {
                id: 'txtAnswer',
                type: 'text',
                label: '答案(大小寫要和選項一致，多選答案用逗號隔開如 B,D)：',
                validate: CKEDITOR.dialog.validate.notEmpty('請輸入答案！') //驗證
            }]
        }],
        onOk: function () { //點擊確定按鈕出發onOK事件。以下代碼主要目的是構造一個select下拉框
            qtype = this.getValueOf('choice', 'rdType');
            txtitems = this.getValueOf('choice', 'txtItems');
            items = txtitems.split(/[',','，']/);
            txtanswer = this.getValueOf('choice', 'txtAnswer');
            answers = txtanswer.split(/[',','，']/);
            rtn = "<select answertype='" + qtype + "'>";
            flag = true;
            //答案是否在選項中
            for (var i in answers) {
                isAnswerInItem = false;
                if (answers[i] != "") {
                    for (var j in items) {
                        if (items[j] == answers[i]) {
                            isAnswerInItem = true;
                            break;
                        }
                    }
                    if (!isAnswerInItem) {
                        alert("答案" + answers[i] + "在選項中不存在！");
                        this.getContentElement('choice', 'txtAnswer').focus();
                        flag = false;
                        break;
                    }
                }
            }
            if (flag) {
                for (var i in items) {
                    if (items[i] != '') {
                        rtn += "<option ";
                        for (var j in answers) {
                            if (answers[j] == items[i]) {
                                rtn += "selected='selected'";
                            }
                        }
                        rtn += ">" + items[i] + "</option>";
                    }
                }
                rtn += "</select>";
                editor.insertHtml(rtn); //將select插入編輯器
            }
            else {
                return false;
            }
        }
    };
});
function htmlEncode(str) {
    var temp = document.createElement("div");
    (temp.textContent != null) ? (temp.textContent = str) : (temp.innerText = str);
    var output = temp.innerHTML;
    temp = null;
    return output;
}

5.接下來就是將這個插件加入到編輯器里。打開ckeditor/config.js，設置config.extraPlugins=“qchoice”，然后在config.toolbar中加入 “Choice”這個按鈕名稱：

CKEDITOR.editorConfig = function (config) {
    config.language = 'zh-cn';
    config.extraPlugins = 'qgapfill,qchoice,qtruefalse,qsubjective';
    config.toolbar =
    [
        ['PasteFromWord', 'PasteText', '-', 'Cut', 'Copy', 'Paste'],
        ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', '-', 'Gapfill', 'Choice', 'Truefalse', '-', 'Subjective'],
        '/',
        ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Link', 'Unlink', 'Anchor'],
        '/',
        ['Styles', 'Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor'],
        ['Maximize', 'ShowBlocks', '-', 'Source', '-', 'Undo', 'Redo']
    ];
};

 

完成。