TinyMCE将查询字符串中的&转换为HTML实体致链接失效求助

我之前也踩过这个坑！TinyMCE对HTML实体的编码逻辑有时候确实会“过度热心”，把原本正确的&转成&，直接导致链接里的查询参数失效。下面是我亲测有效的几种解决办法：

1. 调整TinyMCE的实体编码配置 #

这是最直接的解决方案，通过初始化参数控制编码行为：

• 如果希望完全保留原始的&符号（不进行任何编码），可以设置entity_encoding: 'raw'：

tinymce.init({
  selector: '#your-editor',
  entity_encoding: 'raw',
  // 其他配置项...
});

• 如果你需要保留基本HTML实体的编码（比如<转成<），但不想让&被二次编码，可以指定只编码必要的实体：

tinymce.init({
  selector: '#your-editor',
  entities: '&,lt,gt,amp,quot,apos', // 只编码这些基础实体，避免双重转义
  entity_encoding: 'named'
});

修改后插入链接，切换到源码模式检查，应该能看到href里的&只会被转成一次&（或者保留原始&，取决于你选的配置），浏览器会自动解析成正确的参数分隔符。

2. 通过API插入链接时使用官方方法 #

如果你是通过代码动态插入链接，不要手动拼接HTML字符串，用TinyMCE提供的dom.createHTML方法生成元素，它会自动处理编码逻辑：

// 生成正确的链接HTML
const linkElement = tinymce.activeEditor.dom.createHTML('a', {
  href: '/foo?one=1&two=2'
}, 'A link');
// 插入到编辑器中
tinymce.activeEditor.insertContent(linkElement);

这种方式能避免手动拼接时可能出现的编码混乱。

3. 排查自定义过滤器或插件 #

有时候自己添加的编辑器插件、或者setup函数里的内容处理逻辑，可能会额外对实体进行编码。检查你的初始化代码里有没有类似这样的逻辑：

tinymce.init({
  setup: function(editor) {
    editor.on('BeforeSetContent', function(e) {
      // 如果这里有手动编码HTML实体的代码，可能会导致双重转义
      // 比如 e.content = e.content.replace(/&/g, '&'); 这种就会出问题
    });
  }
});

如果有这类自定义处理，要么调整逻辑避免重复编码，要么直接移除。

4. 更新到最新版本的TinyMCE #

旧版本的TinyMCE确实存在过双重编码的bug，如果你用的是比较老的版本，升级到最新稳定版大概率能解决问题。

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