Question

我试图动态添加/删除ckeditor实例中的按钮。

我在stackoverflow上找到了以下线程：Change CKEditor toolbar dynamically

触发uiSpace事件的解决方案可以正常工作，但工具栏中的组合框存在问题。如果我在使用该方法更新工具栏后尝试更改编辑器的只读状态，则会出现以下异常：

未捕获的TypeError：无法读取属性＆＃39; setState＆＃39; of null ckeditor.js：752 CKEDITOR.ui.richCombo.CKEDITOR.tools.createClass.proto.setState ckeditor.js：746

此外，组合框也未被禁用。

我添加了以下重新加载功能：

CKEDITOR.editor.prototype.reloadToolbar = function() {
        if (!this._.events.themeSpace) {
          CKEDITOR.plugins.registered.colorbutton.init(this);
          CKEDITOR.plugins.registered.toolbar.init(this);
        }

        //According to CKEditor documentation
        var obj = this.fire( 'uiSpace', { space: 'top', html: '' } ).html;
        // Replace the toolbar HTML 
        var tbEleId = this.id +"_" + this.config.toolbarLocation;
        var tbEle = document.getElementById(tbEleId);
        tbEle.innerHTML = obj;
}

然后我执行以下代码（缩短示例）：

CKEDITOR.config.toolbarGroups = [
    { name: 'clipboard', groups: [ 'clipboard', 'undo', 'find' ]}, 
    { name: 'colors' }
];
CKEDITOR.instances.editor.reloadToolbar();

如果我现在尝试通过

将编辑器置于只读模式，则异常会引发

CKEDITOR.instances.editor.setReadOnly(true);

所以问题是，是否可以使用上述解决方案动态更新工具栏？如果是这样，缺少什么也会改变只读状态工作？或者这是破坏和重新加载编辑器的唯一方法吗？

CKEditor - 动态更新工具栏

0 个答案: