tinymce本地化引入方案

在公司React项目开发过程中，我们需要用到富文本编辑器，用于商品详情信息的录入；由于商品信息需要导入图片，最终在同事的推荐下，使用了TinyMCE。

不过，在使用的一段时间后，公司测试同事说这个富文本编辑器经常出现加载不出来的情况，经过排查发现，虽然我们使用npm安装了TinyMCE，但是TinyMCE还是采用了云加载的方式加载功能组件和插件；但是这个网站的服务器经常出现加载失败或者打不开的问题，这就导致了在我们自己的项目加载TinyMCE模块时显示空白；

经过一般折腾，最终找到了从本地引入的一套解决方案，⬇️⬇️⬇️

官方文档

https://github.com/tinymce/tinymce-react

本篇文章TinyMCE版本 “@tinymce/tinymce-react": "^3.6.0",

一. 基本安装过程

1. 在React项目中安装TinyMCE依赖

npm install --save @tinymce/tinymce-react

2. 在项目中引入 Editor

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

3. 使用 Editor

                        <Editor
              initialValue="<p>请输入内容</p>"
              value={formIntroduce}
              init={{
                height: 500,
                language: "zh_CN", //调用放在langs文件夹内的语言包
                menubar: true,
                plugins: [
                  "advlist autolink lists link image charmap print preview anchor",
                  "searchreplace visualblocks code fullscreen",
                  "insertdatetime media table paste code help wordcount",
                ],
                a11y_advanced_options: true,
                toolbar:
                  "image undo redo | formatselect | bold italic backcolor | \
                    alignleft aligncenter alignright alignjustify | \
                    bullist numlist outdent indent | removeformat | help",
              }}
              onEditorChange={(content: any, editor: any) => {
                setFormIntroducn(content);
              }}
            />

二. TinyMCE本地化引入

Tip：思路为将TinyMCE插件包下载至本地，通过script标签的形式在index.html文件中引入

1. 首先下载TinyMCE插件包，插件包下载地址如下：

https://info.qzroc.com/355.html

1. 文件解压后，将tinymce文件夹移动至工程根目录下的public文件夹中

1. 打开public文件夹中的index.html文件，在title标签上增加script标签，如下所示

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

1. 保存项目，刷新页面即可；