将外部对象拖放到 CKEditor 中

Question

我在CKEitor 4.5中看到一个新的拖放系统。我想将外部 DIV 或 SPAN 放入我的 CkEditor 中，并让它们变成"占位符"、"假对象"或"受保护的源"对象。即，删除的对象应该变成与内容相关的任意 HTML。

可用的演示似乎是关于上传内容的，但这是不同的，我希望有一个演示......

Answer 1

是的，这是可能的。CKEditor 4.5 目前处于测试阶段，这意味着还没有教程，但这里是示例操作方法。

首先，您需要在dragstart上标记您的数据。您可以简单地设置text：

dragstart( evt ) {
evt.dataTransfer.setData( 'text', 'foo' );
} );

但是你需要让你的文本独一无二，否则每次有人掉foo它都会被识别为你的容器。

我更喜欢使用 CKEditor 数据传输外观，它可以让您在每个浏览器(包括 IE 8+)上使用自定义数据类型：

dragstart( evt ) {
var evt = { data: { $: $evt } }; // Create CKEditor event.
CKEDITOR.plugins.clipboard.initDragDataTransfer( evt );
evt.data.dataTransfer.setData( 'mydatatype', true );
// Some text need to be set, otherwise drop event will not be fired.
evt.data.dataTransfer.setData( 'text', 'x' );
} );

然后在 CKEDITOR 中，您可以识别此数据并将您的 html 设置为删除。您可以根据需要替换已删除的内容。在 drop 事件中简单设置text/html数据：

editor.on( 'drop', function( evt ) {
var dataTransfer = evt.data.dataTransfer;
if ( dataTransfer.getData( 'mydatatype' ) ) {
dataTransfer.setData( 'text/html', '<div>Bar</div>' );
}
} );

您可以在此处找到工作示例：http://jsfiddle.net/oqzy8dog/3/