javascript CK编辑器内联元素拖放问题

vbopmzt1 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(100)

我已经创建了一个自定义插件，如图所示.我可以添加类为“placeholder”的对象。<span class="placeholder">Loop-ANS(Q2)</span>。

从Created from创建的内联小部件
内联小部件演示演示
现在，当有人从编辑器中删除它时，我需要生成一个事件（调用一个函数），这样我就可以在我的redux状态中标记这个项目已经删除。我用下面的代码解决了这个问题。

editor.model.document.on( 'change:data', () => {  // Listen to all changes in model.
    // Get changes buffered in Differ. Include items moved to the graveyard (removed from document).
    const changes = editor.model.document.differ.getChanges( { includeChangesInGraveyard: true } );

    for ( const change of changes ) {
        // Check items moved to the graveyard (so they are removed from the document root).
        if ( change.type == 'insert' && change.name != '$text' && change.position.root.rootName == '$graveyard' ) {

            // The element that we are looking for could be nested in some block-quote or a table cell
            // so we need to walk through the whole element content and check if our element was removed or not.
            const range = editor.model.createRangeOn( change.position.nodeAfter );

            for ( const item of range.getItems() ) {
                if ( item.is( 'element', 'imageInline' ) ) { // Here you change the value to your element's name.
                    console.log( 'inline image removed', item ); // (**I will add a callback here**)
                }
            }
        }
    }
} );

问题是，当我尝试拖放inline-widget时，它也被认为是已删除的。也就是说，元素正在移动到墓地，这是不应该的。有什么办法可以防止这种情况发生吗？当拖放到其他位置时，占位符不会在gravyard上移动。或者检查事件是否因拖放而产生而不调用回调。
如果这是不可能的，任何方法来停止拖放事件的内联小部件

JavaScript

来源：https://stackoverflow.com/questions/76537058/ck-editor-inline-element-drag-and-drop-issue

1条答案

按热度按时间

ie3xauqp1#

如果以后有人需要这个功能，可以参考下面的代码：

function _getPlaceholderChanges(editor, inGraveyard) {
  const changes = editor.model.document.differ.getChanges({
    includeChangesInGraveyard: inGraveyard,
  });
  let changedItems = [];
  for (const change of changes) {
    if (
      inGraveyard
        ? change.type == "insert" &&
          change.name != "$text" &&
          change.position.root.rootName == "$graveyard"
        : change.type == "insert" && change.name != "$text"
    ) {
      const range = editor.model.createRangeOn(change.position.nodeAfter);
      for (const item of range.getItems()) {
        if (item.is("element", "placeholder")) {
          changedItems.push(item);
        }
      }
    }
  }
  const changedPlaceholders = changedItems.map((item) =>
    item._attrs.get("name")
  );
  return changedPlaceholders;
}

function pipingDeletionChecker(editor, questionId, callback) {
  const model = editor.model;
  model.document.on("change:data", () => {
    // Get changes buffered in Differ. Include items moved to the graveyard (removed from document).
    const removedPlaceHolders = _getPlaceholderChanges(editor, true);
    const addedPlaceHolders = _getPlaceholderChanges(editor, false);

    //if a placeholder deleted and added on same time means, this is happend due to reposition of item (drag and drop).
    //In this case we wont call the callback
    if (removedPlaceHolders.length && !addedPlaceHolders.length) {
      callback(questionId, removedPlaceHolders);
    }
  });
}

export default pipingDeletionChecker;

赞(0）回复(0）举报 2023-06-28

我来回答

javascript CK编辑器内联元素拖放问题

1条答案

相关问题

热门标签

最新问答