6

我正在尝试处理来自 CKEditor 5 的插入事件。

editor.document.on("change", (eventInfo, type, data) => {
  switch (type) {
    case "insert":
    console.log(type, data);
    break;
  }
});

在编辑器中输入时，会调用回调。事件回调中的data参数大致如下所示：

{
  range: {
    start: {
      root: { ... },
      path: [0, 14]
    },
    end: {
      root: { ... },
      path: [0, 15]
    }
  }
}

我看不到一种方便的方法来确定实际插入的文本。我可以调用data.range.root.getNodeByPath(data.range.start.path);which 似乎可以让我找到插入文本的文本节点。然后我们应该查看文本节点的data字段吗？我们是否应该假设路径中的最后一项始终是范围开始和结束的偏移量并将其用于子字符串？我认为插入事件也会被触发以插入非文本类型的东西（例如元素）。我们怎么知道这确实是事件的文本类型？

有什么我遗漏的东西，还是有不同的方法可以一起完成这一切？

4

2 回答 2

2

首先，让我描述一下您目前的做法（2018 年 1 月）。请记住，CKEditor 5 现在正在进行重大重构，事情将会发生变化。最后，我将描述我们完成重构后的样子。如果您不介意等待更多时间让重构结束，您可以跳到后面的部分。

编辑：该1.0.0-beta.1版本于 3 月 15 日发布，因此您可以跳转到“自 2018 年 3 月以来”部分。

至 2018 年 3 月（至1.0.0-alpha.2）

（如果您需要了解有关某些类 API 或事件的更多信息，请查看文档。）

您最好的选择是简单地遍历插入的范围。

let data = '';

for ( const child of data.range.getItems() ) {
    if ( child.is( 'textProxy' ) ) {
        data += child.data;
    }
}

请注意，TextProxy当您遍历范围时，始终会返回一个实例，即使整个Text节点都包含在范围内。

（您可以阅读更多关于在CKEditor5 和 Angular2 中对范围进行字符串化 - 在编辑器内单击获取插入符号的确切位置以获取数据。）

请记住，这InsertOperation可能会插入多个不同类型的节点。大多数情况下，这些只是单个字符或元素，但可以提供更多节点。这就是为什么data.item在data. 可能有，data.items但那些将与Array.from( data.range.getItems() ).

做改变Document#change

之后你没有提到你想用这些信息做什么。获取范围的内容很容易，但是如果您想以某种方式对这些更改做出反应并更改模型，那么您需要小心。当change事件被触发时，可能已经有更多的更改入队。例如：

  • 协作服务可以立即进行更多更改，
  • 不同的功能可能已经对相同的更改做出反应并将其更改排队，这可能会使模型不同。

如果您确切地知道您将使用哪些功能集，您可能会坚持我的建议。请记住，您对模型所做的任何更改都应该在一个Document#enqueueChanges()块中完成（否则，它不会被渲染）。

如果您希望此解决方案防弹，您可能必须这样做：

  1. 在对子节点进行迭代时data.range，如果您找到 a TextProxy，则在该节点上创建一个LiveRange跨越。
  2. 然后，在一个enqueueChanges()块中，遍历存储LiveRange的 s 和他们的孩子。
  3. 为每个找到的TextProxy实例执行逻辑。
  4. 之后记住destroy()所有的LiveRanges。

如您所见，这似乎不必要地复杂。提供开放和灵活的框架（如 CKE5）存在一些缺点，考虑到所有边缘情况就是其中之一。然而，它确实可以更简单，这就是我们首先开始重构的原因。

自 2018 年 3 月起（从 开始1.0.0-beta.1）

1.0.0-beta.1 中的重大变化将是引入model.Differ类、改进的事件结构和模型大部分的新 API。

首先，Document#event:change将在所有enqueueChange块完成后被解雇。这意味着您不必担心另一个更改是否会与您在回调中做出反应的更改混淆。

此外，engine.Document#registerPostFixer()还将添加方法，您将能够使用它来注册回调。event 仍然可用，但event 和change之间会有细微差别（我们将在指南和文档中介绍它们）。changeregisterPostFixer

其次，您将可以访问一个model.Differ实例，该实例将存储第一次更改之前的模型状态与您想要对更改做出反应时的模型状态之间的差异。您将遍历所有差异项并检查到底发生了什么变化以及在哪里发生了变化。

除此之外，重构中还将进行许多其他更改，下面的代码片段也将反映它们。所以，在新的世界里，它会是这样的：

editor.document.registerPostFixer( writer => {
    const changes = editor.document.differ.getChanges();

    for ( const entry of changes ) {
        if ( entry.type == 'insert' && entry.name == '$text' ) {
            // Use `writer` to do your logic here.
            // `entry` also contains `length` and `position` properties.
        }
    }
} );

就代码而言，它可能比第一个片段中的要多一些，但是：

  1. 第一个片段不完整。
  2. 在新方法中需要考虑的边缘情况要少得多。
  3. 新方法更容易掌握 - 在所有更改都完成后您就可以使用所有更改，而不是在其他更改排队并可能弄乱模型时对更改做出反应。

是一个对象，将writer用于对模型进行更改（而不是Document#batchAPI）。它将具有insertText(), insertElement(),remove()等方法。

您可以检查model.DifferAPI 和测试，因为它们已经在masterbranch上可用。（内部代码会改变，但 API 会保持原样。）

于 2018-01-23T10:57:23.957 回答
1

@Szymon Cofalik 的回答指向“如何根据更改侦听器应用一些更改”的方向。这使得它比从事件中获取文本所需的复杂得多Document#change，归结为以下代码段：

let data = '';

for ( const child of data.range.getChildren() ) {
    if ( child.is( 'textProxy' ) ) {
        data += child.data;
    }
}

但是，对更改做出反应是一项棘手的任务，因此，如果您打算这样做，请务必阅读 Szymon 的富有洞察力的答案。

于 2018-01-23T13:11:58.630 回答