将外部对象拖放到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数据传输Facade,它允许您在每个浏览器(包括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设置为删除.您可以根据需要替换丢弃的内容.text/htmldrop事件中的简单设置数据:

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/