Ckeditor 将外部对象拖放到编辑器中

我在ckeitor4.5中看到了一个新的拖放系统。我希望将外部div或span放入我的CkEditor，并将它们转换为“占位符”、“伪对象”或“受保护源”对象。也就是说，被删除的对象应该变成与内容相关的任意HTML

---

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

是的，这是可能的。CKEditor 4.5目前正处于测试阶段，这意味着还没有教程，但下面是如何实现的示例

首先，您需要在

dragstart

上标记数据。您可以简单地设置

文本

：

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

但是你需要让你的文本独一无二，否则每次有人放下

foo

它就会被识别为你的容器

我更喜欢使用CKEditor data transfer facade，它允许您在每个浏览器（包括IE 8+）上使用自定义数据类型：

然后在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>' );
  }
} );

editor.on（'drop'，函数（evt）{
var dataTransfer=evt.data.dataTransfer；
if（dataTransfer.getData（'mydatatype'））{
setData（'text/html'，'Bar'）；
}
} );

---

您可以在这里找到工作示例：

三年半后，显然还没有关于这方面的教程，或者至少我找不到教程，但通过这个示例，我可以开始了-非常有用，谢谢！

editor.on( 'drop', function( evt ) {
  var dataTransfer = evt.data.dataTransfer;

  if ( dataTransfer.getData( 'mydatatype' ) ) {
    dataTransfer.setData( 'text/html', '<div>Bar</div>' );
  }
} );