Umi/React.js接入TinyMCE 5富文本编辑器

好久没耍React.js了，最近有项目要用React.js，看了下Umi.js还不错，配合阿里巴巴Ant.design组件库绝配。这管理系统富文本是个头疼问题，目前比较好的方案就是TinyMCE了，主要是因为它支持普通HTML页面、Angular、Vue、React都支持，所以选择它能很好的和其它管理中心得到一致的编辑器结果。

在网上找TinyMCE 5和React的接入方法，都感觉完美，其实官方就有文档的。官方的方法很简单。

官方文档地址：

https://www.tiny.cloud/docs/integrations/react/

全是英文，翻译过来就是安装依赖npm install --save @tinymce/tinymce-react并在你的React组件页面引入Editor并配置一个apiKey，APIKey可以登录官网获取，然后配置项和官方文档一样就行了。

虽然如此简单，但是需要apiKey和联网验证，对于国内服务器用户不是很友好，毕竟是境外服务器，速度和可靠性降低了啊。

如何去掉apikkey验证呢，很简单。根据如下方法安装TinyMCE for React。

安装命令：

npm install --save @tinymce/tinymce-react tinymce

然后在React组件库进行编辑器引入和完整安装。

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

引用编辑器

<Editor 
        init={this.editorConfig} 
        initialValue={this.editorContent}>

</Editor>

安装

componentDidMount() {
    tinymce.setup()
}

然后就不会提示需要APIKey了。

然后官网配置项目自行配置即可。项目需要访问静态主题等资源，把npm install 安装的tinymce 也就是node_modules目录下的tinymce目录复制到 public目录下总之目的就是前台静态路径能访问对应文档，可以复制文件夹或者自行配置webpack。

默认是英文界面，需要汉化去官网下载汉化包并配置汉化js路径，路径同上能被访问到即可。

如何https://www.tiny.cloud/get-tiny/language-packages/

大功告成，经过测试，图片上传等各项所有功能正常，插件等自行配置即可，复制tinymce目录下就包含插件目录，插件可以有效使用。