TinyMCE中CDATA文本商标高亮HTML，避免文本模式显示源码问题

嘿，你的问题我懂了——直接用字符串替换把商标换成带<span>的HTML，结果在源码模式下暴露了标签，还可能有其他DOM结构问题对吧？这是因为直接修改HTML字符串的方式太粗暴，没遵循TinyMCE的内部处理逻辑，下面给你两种靠谱的解决方案：

方案1：用TinyMCE的DOM API安全操作文本节点 #

TinyMCE自带DOM操作工具，能精准找到文本节点并包裹目标内容，不会破坏现有结构，也不会在可视化模式外暴露标签：

// 获取编辑器的DOM操作实例
const dom = editor.dom;
// 遍历所有文本节点
const textNodes = Array.from(editor.getBody().getElementsByTagName('*')).reduce((nodes, elem) => {
  return nodes.concat(Array.from(elem.childNodes).filter(node => node.nodeType === Node.TEXT_NODE));
}, []);

// 逐个处理包含目标商标的文本节点
textNodes.forEach(node => {
  const targetText = 'ACME Soda Chips';
  const originalText = node.textContent;
  
  if (originalText.includes(targetText)) {
    // 拆分文本节点，把商标单独用span包裹
    const textParts = originalText.split(targetText);
    const parentNode = node.parentNode;
    parentNode.removeChild(node);
    
    textParts.forEach((part, idx) => {
      // 添加拆分后的普通文本
      if (part) {
        parentNode.appendChild(document.createTextNode(part));
      }
      // 添加包裹好的商标文本
      if (idx !== textParts.length - 1) {
        const brandSpan = dom.create('span', { class: 'douh' });
        brandSpan.textContent = targetText;
        parentNode.appendChild(brandSpan);
      }
    });
  }
});

方案2：自定义TinyMCE格式（强烈推荐） #

这种方式更符合TinyMCE的设计逻辑，既能批量应用高亮，还支持手动触发、撤销重做，编辑器会自动处理模式切换：

第一步：初始化时配置自定义格式 #

tinymce.init({
  // 你的其他配置（比如selector、toolbar等）
  formats: {
    brandHighlight: { inline: 'span', classes: 'douh' }
  },
  // 可选：把这个格式加到工具栏，方便手动给文本加高亮
  toolbar: 'bold italic | brandHighlight'
});

第二步：代码批量应用高亮 #

// 选中编辑器所有内容（也可以选特定区域）
editor.selection.select(editor.getBody());
// 应用自定义格式，指定要匹配的商标文本
editor.formatter.apply('brandHighlight', { value: 'ACME Soda Chips' });

为啥你的原方法不行？ #

直接用editor.getContent()拿HTML字符串替换，相当于绕开了TinyMCE的内部处理机制：

• 源码模式会直接显示你插入的<span>标签，因为它就是编辑器的底层HTML内容
• 如果商标词已经在其他标签（比如<p>、<strong>）里面，字符串替换可能导致标签嵌套错误，引发渲染bug

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