CkEditor对话框事件处理

Question

我刚刚开始使用CKEditor，我不能很好地理解API来完成我的目标。

实际上，我在页面上有几个编辑器实例。但是，对于名为htmlInput的编辑器，我想收集添加到编辑器中的表单元素的名称。我所得到的最接近的是在打开适当的对话框时弹出一个警告，但是我无法提取这些框的name字段的值。

这是我到目前为止写的。

CKEDITOR.on('dialogDefinition', function (e) {
    var dialogName = e.data.name;
    var dialog = e.data.definition.dialog;
    if(e.editor.name == 'htmlInput' && (dialogName=='checkbox' || dialogName=='radio' || dialogName=='textfield' || dialogName == 'textarea' || dialogName == 'select'))
    {
        dialog.on('show', function (ev) {
            alert('here');
        });
    }
});

Answer 1

你这样做很不安全。想象一下，如果有人粘贴了这样的表单元素或使用了editor.insertHtml()方法。它们不会被收集。更好的方法如下:

var form = {};
CKEDITOR.instances.editor1.dataProcessor.htmlFilter.addRules({
    elements: {
        $: function( element ) {
            if ( element.name in { 'input' : 1, 'textarea': 1, 'button' : 1 } ) {
                if ( !form[ element.name ] )
                    form[ element.name ] = [];
                form[ element.name ].push( element );
            }
        }
    }
});

现在你基本上可以这样做:

CKEDITOR.instances.editor1.getData();
console.log( form );

然后您将检索属于文档的所有表单元素(或任何类型的元素)。只要确保在序列化表单时form对象为空，因为在源模式<-> wysiwyg之间切换时也会执行htmlFilter，并且它将不断填充您的列表。

---

你基本上也可以使用下面的方法通过标签名称检索元素(IMO的简单方法):

CKEDITOR.instances.editor1.document.getElementsByTag( 'input' );