在react 中使用tinyMce富文本编辑器

最新推荐文章于 2025-06-16 18:44:08 发布

爱吃排骨

最新推荐文章于 2025-06-16 18:44:08 发布

阅读量5.3k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： react javascript vue.js 文章标签： react.js tinymce

本文链接：https://blog.csdn.net/qq_36947128/article/details/113859824

1.加载缓慢，白屏问题。

最开始使用tinyMce的时候发现第一次加载巨慢，查了一下资料后发现一句话，tinyMce在首次加载的时候会在全局查找tinyMce这个变量，如果没有找到就会请求云服务器的tinyMce资源，个人认为应该是这个原因导致的，而导致这个问题的原因是因为开始没有导入tinyMce.js的原因

首先我们使用自托管模式，也就是在项目的根index.html中引入 tinyMce

将在 Self Hosted WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE 网站中下载的文件包，放到我们的public 下

然后引入

 <script src="%PUBLIC_URL%/tinymce/tinymce.min.js"></script>

发现果然加载速度很快了，不会白屏特别久，至此解决了白屏缓慢问题。

2.在项目中实际使用

npm install tinymce -S

npm install @tinymce/tinymce-react -S

import tinyMce from 'tinymce/tinymce';
import 'tinymce/themes/silver/theme'//编辑器主题
import 'tinymce/icons/default';
import 'tinymce/plugins/advlist'  //高级列表
import 'tinymce/plugins/autolink'  //自动链接
import 'tinymce/plugins/link'  //超链接
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/charmap'  //特殊字符
import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/wordcount'// 字数统计
import { Editor } from '@tinymce/tinymce