CKEditor5内联Widget拖拽触发误删事件问题及解决方案咨询

方案一：区分拖拽临时移除与真正删除 #

CKEditor拖拽内联Widget时，会先把元素移到$graveyard临时存放，拖拽完成后会将元素移回编辑区。针对这个特性，可以延迟判断元素是否真的被留在$graveyard里，以此区分拖拽和删除操作：

editor.model.document.on('change:data', () => {
  const graveyard = editor.model.document.getRoot('$graveyard');
  // 找出graveyard里的placeholder元素
  const tempRemovedPlaceholders = Array.from(graveyard.getChildren()).filter(node => 
    node.is('element') && node.hasClass('placeholder')
  );

  if (!tempRemovedPlaceholders.length) return;

  // 等待当前操作批次完成后检查元素状态
  editor.model.enqueueChange({ isUndoable: false }, () => {
    const trulyDeleted = tempRemovedPlaceholders.filter(node => node.parent === graveyard);
    if (trulyDeleted.length) {
      // 这里触发Redux状态更新，比如传递元素的标识
      updateReduxState(trulyDeleted.map(node => node.getAttribute('data-id')));
    }
  });
});

也可以用100ms左右的短延迟替代enqueueChange，效果类似，适合简单场景。

方案二：直接禁用内联Widget的拖拽功能 #

如果不需要拖拽功能，直接禁用更省心：

方式1：在Widget定义中关闭拖拽 #

自定义Widget时，添加draggable: false配置：

editor.widgets.add('placeholderWidget', {
  // 其他配置项（比如upcast、downcast等）
  draggable: false,
  // 其他方法
});

方式2：通过事件阻止拖拽 #

如果上述配置不生效，可以监听拖拽起始事件并终止动作：

editor.plugins.get('Widget').on('dragstart', (evt) => {
  const targetWidget = evt.source;
  if (targetWidget.element.hasClass('placeholder')) {
    evt.stop(); // 终止拖拽动作
  }
});

内容的提问来源于stack exchange，提问作者pranav m