自定义TinyMCE插件插入图片src被多次篡改问题求助

我之前也碰到过类似的路径被TinyMCE自动调整的坑，核心原因是TinyMCE默认会自动处理相对URL，导致你的/api/...根相对路径被反复修改。下面给你几个可行的解决思路：

1. 配置TinyMCE禁用自动URL转换 #

在初始化TinyMCE的时候，添加这几个关键配置项，直接阻止编辑器篡改你的路径：

<Editor
  init={{
    relative_urls: false, // 禁用相对URL转换逻辑
    remove_script_host: false, // 保留URL中的根路径标识
    convert_urls: false, // 完全关闭URL自动转换功能
    // 其他原有配置项...
  }}
/>

这三个配置组合起来，就能让TinyMCE原封不动地保留你插入的<img src="/api/rendermath?formula=y^x2">路径，不会再自动添加../或者去掉开头的/。

2. 自定义插件中强制锁定路径 #

如果上面的配置还没完全解决问题，你可以在自己的数学公式插入插件里，给图片路径加上明确的标记，并且插入时直接使用根相对路径：

// 插件中插入数学公式图片的代码示例
const insertMathFormula = (editor, formula) => {
  // 对公式编码避免URL解析问题
  const encodedFormula = encodeURIComponent(formula);
  // 直接插入带根相对路径的img标签
  editor.insertContent(`<img src="/api/rendermath?formula=${encodedFormula}" data-is-math="true">`);
};

添加data-is-math这类自定义属性，还能帮你后续快速识别这些数学公式图片，方便做批量更新或重新渲染操作。

3. 渲染回编辑器时的兜底修复 #

如果已经有被篡改的历史内容需要处理，你可以在把内容传入Editor之前，做一次字符串替换修正路径：

const fixMathImagePaths = (content) => {
  // 匹配被篡改的路径，替换回正确的根相对路径
  return content.replace(/<img src="(?:\.\.\/)?api\/rendermath\?formula=/g, '<img src="/api/rendermath?formula=');
};

// 渲染时传入修正后的内容
<Editor
  value={fixMathImagePaths(yourSavedContent)}
  // 其他配置...
/>

总结一下，最根本的解决方式还是通过TinyMCE的配置关闭自动URL转换，从源头阻止路径被修改。如果有历史数据需要处理，再配合字符串替换来兜底修复。

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