如何在CKEditor 5中实现点击删除自定义元素？

2024-07-29 19:21:17

CKEditor 5 点击删除自定义元素难题解析

在富文本编辑器 CKEditor 5 的开发过程中，自定义元素的应用为我们提供了更灵活的功能扩展。然而，为这些自定义元素添加点击删除功能，却常常让开发者头疼不已。本文将深入剖析这一难题背后的原因，并提供一种基于 CKEditor 5 架构的解决方案，帮助您轻松实现自定义元素的点击删除。

问题根源

通常，我们会借助 JavaScript 事件监听器来处理元素的点击事件。在 CKEditor 5 中，editor.editing.view.document.on('click', ...) 为我们提供了监听文档点击事件的途径。当用户点击自定义元素时，我们可以捕获这一事件，并尝试从 DOM 或 CKEditor 的数据模型中移除该元素。

然而，直接操作 DOM 或调用 editor.model.document.model.deleteContent() 方法，往往无法达到预期的删除效果。这是因为 CKEditor 5 采用了一种虚拟 DOM 机制来管理编辑器内容。直接操作 DOM 并不会同步更新到数据模型，导致元素删除操作最终失效。

解决方案探秘

为了突破这一困境，我们需要借助 CKEditor 5 提供的 API 来操作数据模型，从而实现自定义元素的有效删除。以下是一种行之有效的解决方案：

editor.editing.view.document.on('click', (evt, data) => {
    const clickedElement = data.domTarget;

    // 判断是否点击了自定义元素
    if (clickedElement.classList.contains('my-custom-element')) {
        // 获取自定义元素在数据模型中的对应位置
        const modelElement = editor.editing.mapper.toModelElement(clickedElement);

        // 从数据模型中删除元素
        if (modelElement) {
            editor.model.change(writer => {
                writer.remove(modelElement);
            });
        }
    }
});

代码解读:

精准定位模型元素: 我们首先使用 editor.editing.mapper.toModelElement() 方法，将 DOM 元素转换为数据模型中的对应元素，确保操作的准确性。
保障数据一致性: 为了保证操作的原子性和数据一致性，我们将删除操作包裹在 editor.model.change() 方法中，确保数据模型的同步更新。
安全删除元素: 在 editor.model.change() 方法的回调函数中，我们使用 writer.remove() 方法安全地从数据模型中移除目标元素，避免直接操作 DOM 带来的潜在问题。

代码优化实践

为了使代码更加简洁易懂，我们可以进行如下优化：

editor.editing.view.document.on('click', ({ domTarget }) => {
  if (domTarget.classList.contains('my-custom-element')) {
    const modelElement = editor.editing.mapper.toModelElement(domTarget);

    modelElement && editor.model.change(writer => writer.remove(modelElement));
  }
});

优化说明:

使用解构赋值语法简化参数获取，提高代码可读性。
利用逻辑运算符简化条件判断，使代码更加紧凑。
将多个语句合并为一行，减少代码行数，提升代码简洁度。

常见问题解答

问：除了点击事件，是否可以使用其他事件来触发删除操作？

答：当然可以。您可以根据实际需求，选择其他合适的事件，例如右键菜单事件或自定义事件，来触发删除操作。
问：如何删除多个自定义元素？

答：您可以使用 writer.remove() 方法多次调用，或者使用 Range 对象来选择多个元素，然后一次性删除。
问：如何自定义删除时的动画效果？

答：您可以通过监听 editor.model.document.on('change:data', ...) 事件，在数据模型更新后，使用 CSS 或 JavaScript 添加动画效果。
问：如何防止误删除自定义元素？

答：您可以在删除操作前添加确认弹窗，或者提供撤销/重做功能，以防止误操作。
问：如何处理删除操作失败的情况？

答：您可以在 editor.model.change() 方法的回调函数中添加错误处理逻辑，例如记录错误日志或提示用户。