CKEDITOR Интеграция с плагином для перетаскивания прекращает работу после уничтожения экземпляра редактора и его воссоздания

Question

У меня возникла небольшая проблема при попытке использовать интеграцию CGEditor с перетаскиванием.

Во-первых, перетаскивание в редактор полностью работает с dataTransfer и всеми. Но всякий раз, когда мне приходится уничтожать и воссоздавать экземпляр редактора, перетаскивание содержимого перестает работать, как ожидалось.

Я изменил образец кода непосредственно с CKEditor's SDK page about DnD integration, где вы можете увидеть воспроизводимую проблему. (я просто привел пример, чтобы сделать его более сукцином и добавил кнопку «Уничтожить и воссоздать» в нижней части списка.)

Не удалось заставить его работать в JSFiddle, так что извините, но вот код:

 '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 и обосновывать, кажется, продолжают работать хорошо, но drag_list не делает.

Кто-нибудь знает, почему это происходит? Что мне нужно сделать, чтобы иметь возможность перетаскивать контент, например, hcards в недавно созданном экземпляре CKEditor?

Заранее спасибо.

Answer 1

Это похоже на неприятную ошибку в ядре редактора. Я проверил его и сообщил о билете: https://dev.ckeditor.com/ticket/14339 Пока билет не будет исправлен, все, что я могу предложить, - это перезагрузить dragstart событие в редакторе отдыха. Вы можете поставить: CKEDITOR.document.getById('contactList').on('dragstart', ...); внутри плагина init метод. После таких изменений перетаскивание должно работать, но dragstart будет запущено несколько раз. Вы можете отсоединить событие dragstart, прежде чем присоединять его снова, все должно работать нормально.