将外部对象拖放到 CKEditor

Question

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

可用的演示似乎是关于上传内容的，但这是不同的，我会很感激演示......

Answer 1

是的，这是可能的。 CKEditor 4.5 目前处于 beta 阶段，这意味着还没有教程，但这里是示例。

首先，您需要在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/