Question

我在CKEitor 4.5中看到有一个新的拖放系统。我想将外部DIV或SPAN放入我的CkEditor并让它们变成＆＃34;占位符＆＃34; ＆＃34;虚假物品＆＃34;或者＆＃34;受保护的来源＆＃34;对象。即，被删除的对象应该变成与内容相关的任意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设置为删除。您可以根据需要替换丢弃的内容。 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/

将外部对象拖放到CKEditor中

1 个答案: