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

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

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

import tinyMce from 'tinymce/tinymce';

，最开始只导入了

import { Editor } from '@tinymce/tinymce-react';

在知道这个问题后，就导入了第一个文件，发现果然加载速度很快了，不会白屏特别久，至此解决了白屏缓慢问题。

2.在项目中实际使用

首先导入第一条的2个文件后，我们就可以在代码里面使用了

其中有几个属性和方法我们会经常使用到

初始化内容:initialValue属性   

文本框内容发生变化事件回调:onEditorChange

文本框离开焦点事件回调:onBlur

获取内容：tinyMce.activeEditor.getContent()

设置内容：有2种情况使用的方法不相同

 1.更新纯文本，不包含html的 只需要使用

tinyMCE.activeEditor.setContent('插入的文本不含html标签')

2.如果要插入带html标签的文本，这个需要通过JS来改变富文本框的值，tinyMce里面的值是加载了一个iframe，所以我们需要使用JS来控制（这里是针对react，vue中双向数据绑定就没这个问题了，v-model="XXXX",就能响应改变）

          let trialDom=tinyMce.activeEditor.contentDocument
          let dom=trialDom.getElementById('tinymce')
          dom.innerHTML='
插入的文本
'

到此处在项目中就能基本使用了

3.加载的是英文?

只需要下载一个zh_CN.js就好了，在项目里面引入一下

import zh_CN from '/tinymce/zh_CN';