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已发布，其带来的功能之一是与本机拖放功能的集成。新系统非常强大，并且包含许多新功能，但您最感兴趣的是，已删除的内容通过editor#paste事件传递，然后像往常一样通过{{3}插入到编辑器中}。此方法使用运行editor.htmlDataProcessor.toHtml()的{{1}}。换句话说 - 您不需要做任何事情 - 所有粘贴和删除的内容都将自动通过数据过滤器。

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

PS。我建议不要尝试使用旧版本的CKEditor并尝试手动处理drop（正如你所示），因为我们经验丰富，由于缺乏API（例如从丢弃位置获取范围的能力）和不同的浏览器，这是非常困难的支持拖放。我们花了好几个月的时间来雕刻我们可以释放的东西：）。

CKEDITOR dataFilter在drop上应用规则

1 个答案: