Question

所以我正在为ckeditor制作自己的插件，因为我需要一个特殊情况。无论如何，我不能使textarea元素可编辑。这是我自己的对话框（对于插件）的全部代码：

CKEDITOR.dialog.add('myDialog', function(editor) {
    return {
        title: 'My Plugin',
        minWidth: 750,
        minHeight: 500,
        onShow: function(evt) {
            var selection = editor.getSelection();
            var widget = editor.widgets.selected[0];
            var element = !!widget && !!widget.parts ? widget.parts['my'] : false;
            var command = this.getName();

            if(command == 'myDialog') {
                var code = selection.getSelectedElement();

                if(code && !!element) {
                    this.setupContent(code);
                    widget.data.myinput = element.getHtml();
                }
            }
        },
        contents: [{
            id: 'info',
            label: 'Info',
            accessKey: 'I',
            elements: [{
                id: 'myinput',
                type: 'textarea',
                required: true,
                label: 'Content',
                rows: 42,
                setup: function(widget) {
                    this.setValue(widget.data.myinput);
                },
                commit: function(widget) {
                    widget.setData('myinput', this.getValue());
                }
            }]
        }],
    };
});

问题仅在contents.myinput内。它的类型是textarea但是当我打开对话框时它不可编辑。当我将类型更改为文本并删除行时，文本输入显示，工作良好，等等。只有textarea是问题。这是打开对话框后的样子：

我的CKEditor版本是4.5。我之前已经制作了3个插件，但从来没有使用textarea所以除了这个之外所有其他插件都可以使用。我会追加jsFiddle，如果有任何网站提供“ckeditor插件测试器”，那么我只是发布我的代码。

Answer 1

问题是我在bootstrap的对话框中初始化了ckeditor。因此我的问题的解决方案是在初始化之后应用以下代码行：

$.fn.modal.Constructor.prototype.enforceFocus = function() {
    var $modalElement = this.$element;

    $(document).on('focusin.modal', function(e) {
        var $parent = $(e.target.parentNode);
        if($modalElement[0] !== e.target
                && !$modalElement.has(e.target).length
                && !$parent.hasClass('cke_dialog_ui_input_select')
                && !$parent.hasClass('cke_dialog_ui_input_text')
                && !$parent.hasClass('cke_dialog_ui_input_textarea')) {
            $modalElement.focus();
        }
    })
};

我在问题出现前已经有了这段代码，但我遗漏了!$parent.hasClass('cke_dialog_ui_input_textarea')我忘记添加了，所以这是我的错：）

CKEditor的对话框textarea不可编辑

1 个答案: