CKEDITOR拖放插件集成在编辑器实例被销毁和重新创建后停止工作 [英] CKEDITOR Drag and drop plugin integration stops working after editor instance is destroyed and recreated
问题描述
在尝试使用CKEditor的拖放集成时，我遇到了很多麻烦。
I'm having quite a bit of trouble while trying to use CKEditor's drag and drop integration.
首先，拖放到编辑器中，直接使用dataTransfer和所有。但是每当我必须销毁并重新创建编辑器的实例时，拖放内容就会停止正常工作。
At first, dragging and dropping into the editor works allright with dataTransfer and all. But whenever I have to destroy and recreate an instance of the editor, dragging and dropping content stops working as expected.
我已经直接从关于DnD集成的CKEditor SDK页面，您可以在其中看到要重现的问题。
（我只是减少了例子，因为它更多的succint，并添加了销毁和重新创建按钮在列表的底部。）
I have modified the sample code directly from CKEditor's SDK page about DnD integration, where you can see the issue being reproduced. (I just reduced the example as to make it more succint and added the "Destroy and recreate" button at the bottom of the list.)
非常抱歉，但这里是代码：
Could not get it to work in JSFiddle, so sorry about that, but here's the code:
'use strict';
var CONTACTS = [{
name: 'Huckleberry Finn',
tel: '+48 1345 234 235',
email: 'h.finn@example.com',
avatar: 'hfin'
}, {
name: 'D\'Artagnan',
tel: '+45 2345 234 235',
email: 'dartagnan@example.com',
avatar: 'dartagnan'
}];
CKEDITOR.disableAutoInline = true;
CKEDITOR.plugins.add('drag_list', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('drag_list', {
allowedContent: true,
pathName: 'drag_list',
upcast: function(el) {
return el.name == 'table' && el.hasClass('product_widget');
}
});
editor.addFeature(editor.widgets.registered.drag_list);
editor.on('paste', function(evt) {
var contact = evt.data.dataTransfer.getData('contact');
if (!contact) {
return;
}
evt.data.dataValue =
'<span class="h-card">' +
'<a href="mailto:' + contact.email + '" class="p-name u-email">' + contact.name + '</a>' +
' ' +
'<span class="p-tel">' + contact.tel + '</span>' +
'</span>';
});
}
});
CKEDITOR.document.getById('contactList').on('dragstart', function(evt) {
var target = evt.data.getTarget().getAscendant('div', true);
CKEDITOR.plugins.clipboard.initDragDataTransfer(evt);
var dataTransfer = evt.data.dataTransfer;
dataTransfer.setData('contact', CONTACTS[target.data('contact')]);
dataTransfer.setData('text/html', target.getText());
if (dataTransfer.$.setDragImage) {
dataTransfer.$.setDragImage(target.findOne('img').$, 0, 0);
}
});
CKEDITOR.inline('editor1', {
extraPlugins: 'drag_list,sourcedialog,justify'
});
function destroy_recreate() {
for (var instance in CKEDITOR.instances) {
console.log(CKEDITOR.instances[instance])
CKEDITOR.instances[instance].destroy();
}
CKEDITOR.inline('editor1', {
extraPlugins: 'drag_list,sourcedialog,justify'
});
}
.columns {
background: #fff;
padding: 20px;
border: 1px solid #E7E7E7;
}
.columns:after {
content: "";
clear: both;
display: block;
}
.columns > .editor {
float: left;
width: 65%;
position: relative;
z-index: 1;
}
.columns > .contacts {
float: right;
width: 35%;
box-sizing: border-box;
padding: 0 0 0 20px;
}
#contactList {
list-style-type: none;
margin: 0 !important;
padding: 0;
}
#contactList li {
background: #FAFAFA;
margin-bottom: 1px;
height: 56px;
line-height: 56px;
cursor: pointer;
}
#contactList li:nth-child(2n) {
background: #F3F3F3;
}
#contactList li:hover {
background: #FFFDE3;
border-left: 5px solid #DCDAC1;
margin-left: -5px;
}
.contact {
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact .u-photo {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
#editor1 .h-card {
background: #FFFDE3;
padding: 3px 6px;
border-bottom: 1px dashed #ccc;
}
#editor1 {
border: 1px solid #E7E7E7;
padding: 0 20px;
background: #fff;
position: relative;
}
#editor1 .h-card .p-tel {
font-style: italic;
}
#editor1 .h-card .p-tel::before,
#editor1 .h-card .p-tel::after {
font-style: normal;
}
#editor1 .h-card .p-tel::before {
content: "(☎ ";
}
#editor1 .h-card .p-tel::after {
content: ")";
}
#editor1 h1 {
text-align: center;
}
#editor1 hr {
border-style: dotted;
border-color: #DCDCDC;
border-width: 1px 0 0;
}
<script src="http://cdn.ckeditor.com/4.5.5/standard-all/ckeditor.js"></script>
<div class="columns">
<div class="editor">
<div cols="10" id="editor1" name="editor1" rows="10" contenteditable="true">
<h3>Drop stuff here then press the Destroy/Recreate button and try again.</h3>
</div>
</div>
<div class="contacts">
<h3>List of Droppable Contacts</h3>
<ul id="contactList">
<li>
<div class="contact h-card" data-contact="0" draggable="true" tabindex="0">
<img src="http://sdk.ckeditor.com/samples/assets/draganddrop/img/hfin.png" alt="avatar" class="u-photo">Huckleberry Finn
</div>
</li>
<li>
<div class="contact h-card" data-contact="1" draggable="true" tabindex="0">
<img src="http://sdk.ckeditor.com/samples/assets/draganddrop/img/dartagnan.png" alt="avatar" class="u-photo">D'Artagnan
</div>
</li>
</ul>
<button class='destroy_recreate' onclick='destroy_recreate()'>Destroy and recreate editors</button>
</div>
</div>
sourcedialog和justify似乎保持良好工作，但drag_list不。
Other plugins like sourcedialog and justify seem to keep working well, but drag_list does not.
有人知道为什么会发生这种情况吗？我需要做什么才能在新创建的CKEditor实例中拖放内容，例如示例的hcards？
Does anyone know why this is happening? What do I have to do to be able to drag and drop content such as the example's hcards in a newly created CKEditor instance?
提前感谢。
推荐答案
它在编辑器核心看起来像一个讨厌的错误。我查看并报告了一张票： https://dev.ckeditor.com/ticket/14339 直到票将被修复，我可以建议是重新附加 dragstart 事件在编辑器娱乐。你可以把 CKEDITOR.document.getById（'contactList'）。on（'dragstart'，...）; / code>方法。在这样的更改后，拖放应该工作，但 dragstart 将被触发多次。您可以分离 dragstart 事件，在再次附加它之前，一切都应该正常工作。
It looks like a nasty bug in the editor core. I checked it and reported a ticket: https://dev.ckeditor.com/ticket/14339 Until the ticket will be fixed, all I can suggest is to reattach dragstart event on the editor recreation. You can put: CKEDITOR.document.getById('contactList').on('dragstart', ... ); inside the plugin init method. After such change drag and drop should work, but dragstart will be fired multiple times. You can detach the dragstart event, before you attach it again end everything should work fine.
这篇关于CKEDITOR拖放插件集成在编辑器实例被销毁和重新创建后停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
