如何使用JavaScript和jQuery在CKEditor 5中实现文本查找与替换？

嘿，我来帮你搞定这个需求！你选择用change:data事件触发处理逻辑的方向完全正确，不过直接修改文本得符合CKEditor的模型操作规范，不然容易出现编辑器状态不一致的问题。下面是一步步的实现方案：

核心思路 #

• 监听编辑器内容变化的change:data事件
• 通过CKEditor的模型API遍历所有文本节点
• 定位到@符号的位置，截断并替换为自定义文本
• 所有修改操作必须包裹在editor.model.change()中，确保编辑器事务的正确性

基础实现代码 #

先从最基础的版本开始，处理根节点下的直接文本：

window.editor.model.document.on('change:data', () => {
  // 用change方法包裹所有修改，保证编辑器状态同步
  window.editor.model.change(writer => {
    const root = window.editor.model.document.getRoot();
    
    // 遍历根节点下的子节点
    root.getChildren().forEach(node => {
      // 只处理文本节点（包括文本代理节点）
      if (node.is('$text') || node.is('$textProxy')) {
        const textContent = node.data;
        const atPosition = textContent.indexOf('@');
        
        // 如果找到了@符号
        if (atPosition !== -1) {
          // 替换@及之后的内容为你的自定义文本，这里用"[已替换内容]"举例
          const newContent = textContent.slice(0, atPosition) + "[已替换内容]";
          // 创建新的文本节点替换原节点
          const newTextNode = writer.createText(newContent);
          writer.replace(node, newTextNode);
        }
      }
    });
  });
});

处理嵌套节点的递归方案 #

上面的代码只处理了根节点下的直接文本，如果你的内容有嵌套结构（比如段落、列表、标题里的文本），需要用递归函数遍历所有子节点：

// 递归处理所有文本节点的函数
function processAllTextNodes(node, writer) {
  if (node.is('$text') || node.is('$textProxy')) {
    const textContent = node.data;
    const atPosition = textContent.indexOf('@');
    
    if (atPosition !== -1) {
      const newContent = textContent.slice(0, atPosition) + "[已替换内容]";
      const newTextNode = writer.createText(newContent);
      writer.replace(node, newTextNode);
    }
  } else if (node.is('element')) {
    // 如果是元素节点，递归处理它的所有子节点
    node.getChildren().forEach(childNode => processAllTextNodes(childNode, writer));
  }
}

// 在change:data事件中调用递归函数
window.editor.model.document.on('change:data', () => {
  window.editor.model.change(writer => {
    const root = window.editor.model.document.getRoot();
    processAllTextNodes(root, writer);
  });
});

避免无限循环的优化 #

注意：替换文本的操作会再次触发change:data事件，导致无限循环。我们可以加个标记来避免这个问题：

let isProcessing = false;

window.editor.model.document.on('change:data', () => {
  // 如果正在处理中，直接返回，避免循环
  if (isProcessing) return;
  isProcessing = true;
  
  window.editor.model.change(writer => {
    const root = window.editor.model.document.getRoot();
    processAllTextNodes(root, writer);
  });
  
  // 处理完成后重置标记
  isProcessing = false;
});

进阶：用正则表达式精准匹配 #

如果你需要更灵活的匹配规则（比如只替换@开头的连续非空白字符），可以用正则表达式替换：

// 替换@及后面的所有非空白字符为自定义文本
const newContent = textContent.replace(/@\S*/, "[已替换内容]");

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