CKEDITOR dataFilter 在删除时应用规则

Question

我正在尝试为插入到编辑器中的每个图像标签设置样式，以将其宽度设置为 500px（例如）。

到目前为止，如果我从剪贴板粘贴图像，它工作正常，但它不适用于拖放事件，dataFilter 没有应用规则。

这是我的代码：

CKEDITOR.on('instanceReady', function (ev) {

            //Works on paste from clipboard
            ev.editor.dataProcessor.dataFilter.addRules({
                elements: {
                    img: function(e) {
                        e.attributes.style = 'width: 500px;';
                    }
                }
            });

            ev.editor.dataProcessor.htmlFilter.addRules({
                elements: {
                    img: function(e) {
                        e.attributes.style = 'width: 500px;';
                    }
                }
            });

            ev.editor.on('paste', function(evt) {
                //do something maybe
            });

            ev.editor.document.on('drop', function (evt) {
                //do something maybe
            });
        });

Answer 1

几天前CKEditor 4.5.0 Beta was released and one of the features that it brings is an integration with native drag and drop. The new system is very powerful and consists of many new features, but you will be most interested in the fact that dropped content is passed through the editor#paste event and then, as usual, inserted into the editor by editor.insertHtml()。此方法使用运行 editor.htmlDataProcessor.dataFilter 的 editor.htmlDataProcessor.toHtml()。换句话说 - 您无需执行任何操作 - 所有粘贴和删除的内容都将自动通过数据过滤器。

所以我建议等待 CKEditor 4.5.0 的最终版本。您现在当然可以使用测试版。

PS。我建议不要尝试使用旧版本的 CKEditor 并尝试手动处理放置（如您所示），因为正如我们自己所经历的那样，由于缺乏 API（例如，从放置位置获取范围的能力）和不同的浏览器，这非常困难支持拖放。我们花了几个月的时间来雕刻我们可以发布的东西:)。

CKEDITOR dataFilter 在删除时应用规则

CKEDITOR dataFilter apply rules on drop

ckeditor