记录下Tinymce富文本插件遇到的问题

原创已于 2025-10-25 23:04:57 修改 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #前端

于 2023-03-20 16:31:03 首次发布

在React项目中，由于兼容性问题，作者从Brief Editor转向了Tinymce。然而，在使用Tinymce时遇到了在Electron打包后因缺失referer头导致的错误。通过将Tinymce本地化解决了此问题。文章详细介绍了如何在React+Umi项目中安装本地依赖、下载Tinymce并引入到项目中，以及在document.ejs中引用，确保Tinymce从本地加载。

在邮件系统中使用到了富文本框，之前用的时Breaf Editor，但是兼容性不是太好，邮件转发时，会有源码的显示bug，后面换成了Tinymce，使用时也是会有很多问题，记录下解决的方法，供大家参考

正式环境报错：We’re unable to check your domain because the referer header is missing.

官方解释：Cloud Troubleshooting | TinyMCE Documentation

大概的问题就是tinymce向 cloud发起请求时，出现了问题。浏览器不存在这个问题，而如果使用Electron将项目打包成APP时，就会出现此问题。虽然项目中已经在node_module中引入了本地包，但是Tinymce还是会从云端请求数据，所以可以将Tinymce本地化来解决这个问题。

现在的项目使用了 react+ umi框架

1、安装本地依赖

npm install @tinymce/tinymce-react -S

2、下载Tinymce本地包，并放到public目录下，（如果没有这个目录，可以在根目录新建一个）

Self Hosted WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCEhttps://www.tiny.cloud/get-tiny/self-hosted/最好不要下载最新的，因为我下载最新的，会一直提示升级插件。

目录结构：

3、在项目的根index.html中引入 tinyMce, 在umijs中，document.ejs文件就对应index.html

使用umi框架的可以这样写：

在src/pages目录下，新建 document.ejs 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>app name</title>
  </head>
  <!-- Tinymce 自托管模式，项目启动时加载tinymce本地包 -->
  <script src="<%= context.config.publicPath %>tinymce/js/tinymce/tinymce.min.js"></script>
  <body>
      <div id="root"></div>
  </body>
</html>

现在Tinymce已经成功本地化了，剩下的步骤网上都有，基本不会出问题了。

测试可以看到，tinymce已经成功从本地加载

参考文章：

在react 中使用tinyMce富文本编辑器_@tinymce/tinymce-react设置只读模式_爱吃排骨的博客-CSDN博客

react umi传入外部js_umi 引入外部js_weixin_40461134的博客-CSDN博客

umi.js的document.ejs中如何引用配置变量_丰色木夕的博客-CSDN博客