在React中使用TinyMCE富文本编辑器

富文本编辑器

富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。

作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了，毕竟从开发上讲，每个富文本编辑器的用法都是有区别的。

下面是我收集的一些业界比较受欢迎的富文本编辑器，喜欢的朋友、用过的朋友可以一起看看，一起探讨。

TinyMCE

TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。

而且这么好的东西还是开源免费的，目前一直有人维护，这款编辑器使用的人非常多。

恰好最近项目中需要富文本编辑的功能，所以我记录下在React中使用TinyMCE的过程。

步骤

1. 使用Create React App package创建一个名为tinymce-react-demo的新的React工程

    $ npx create-react-app tinymce-react-demo
   

2. 进入新创建的文件夹

    $ cd tinymce-react-demo
   

3. 安装tinymce用--save存到package.json文件里

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

4. 使用TinyMCE编辑器，打开 ./src/App.js 并改成以下内容:

    import React, { useRef } from 'react';
    import { Editor } from '@tinymce/tinymce-react';
   
    export default function App() {
      const editorRef = useRef(null);
      const log = () => {
        if (editorRef.current) {
          console.log(editorRef.current.getContent());
        }
      };
      return (
        <>
          <Editor
            onInit={(evt, editor) => editorRef.current = editor}
            initialValue="<p>This is the initial content of the editor.</p>"
            init={{
              height: 500,
              menubar: false,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
              ],
              toolbar: 'undo redo | formatselect | ' +
              'bold italic backcolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent | ' +
              'removeformat | help',
              content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            }}
          />
          <button onClick={log}>Log editor content</button>
        </>
      );
    }
   

这将会生成和Basic example page一样的内容.

5. 标题使用Tiny Cloud 或者本地的TinyMCE服务来提供访问TinyMCE的权限.

   Tiny Cloud

   更多API可以访问 Tiny Cloud API .

   Such as:

     <Editor apiKey='your-api-key' init={{ /* your other settings */ }} />
   
   

   本地TinyMCE

   TinyMCE 可以通过以下方式自托管：部署独立于 React 应用程序的 TinyMCE，或将 TinyMCE 与 React 应用程序捆绑在一起。

   使用 tinymceScriptSrc 独立于 React 应用程序部署 TinyMCE

   要使用 TinyMCE 的独立部署，请添加 tinymceScriptSrc 属性以指定 TinyMCE 脚本的路径，例如：

   <Editor tinymceScriptSrc="/path/to/tinymce.min.js" />
   

   要将 tinymceScriptSrc 与 create-react-app 项目一起使用，请将 TinyMCE 分发版放在 ./public 文件夹中，并使用环境变量 process.env.PUBLIC_URL 引用公共文件夹的路径，例如：

    <Editor tinymceScriptSrc={process.env.PUBLIC_URL + '/tinymce/tinymce.min.js'}>
   

   使用脚本标签部署独立于 React 应用程序的 TinyMCE

   另一种方法是将脚本添加到 HTML 文件的 或 的末尾，例如：

   <script src="/path/to/tinymce.min.js"></script>
   

   要将独立来源的 TinyMCE 与 create-react-app 一起使用，请将脚本标签添加到 ./public/index.html。

   通常，tinymce 发行版会放在公共文件夹中，并使用 URL %PUBLIC_URL%/tinymce/tinymce.min.js 进行引用，例如：

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

   更多本地部署TinyMCE的问题, 请参见: Installing TinyMCE.

   使用模块加载器将 TinyMCE 与 React 应用程序捆绑在一起

   Tiny 不建议将 tinymce 和 tinymce-react 与模块加载器捆绑在一起。捆绑这些包可能很复杂且容易出错。

   要使用模块加载器（例如 Webpack 和 Browserify）捆绑 TinyMCE，请参阅：Usage with module loaders.

   一个绑定的例子:

     import { Editor } from '@tinymce/tinymce-react';
   
     // TinyMCE so the global var exists
     // eslint-disable-next-line no-unused-vars
     import tinymce from 'tinymce/tinymce';
   
     // Theme
     import 'tinymce/themes/silver';
     // Toolbar icons
     import 'tinymce/icons/default';
     // Editor styles
     import 'tinymce/skins/ui/oxide/skin.min.css';
   
     // importing the plugin js.
     import 'tinymce/plugins/advlist';
     import 'tinymce/plugins/autolink';
     import 'tinymce/plugins/link';
     import 'tinymce/plugins/image';
     import 'tinymce/plugins/lists';
     import 'tinymce/plugins/charmap';
     import 'tinymce/plugins/hr';
     import 'tinymce/plugins/anchor';
     import 'tinymce/plugins/searchreplace';
     import 'tinymce/plugins/wordcount';
     import 'tinymce/plugins/code';
     import 'tinymce/plugins/fullscreen';
     import 'tinymce/plugins/insertdatetime';
     import 'tinymce/plugins/media';
     import 'tinymce/plugins/nonbreaking';
     import 'tinymce/plugins/table';
     import 'tinymce/plugins/template';
     import 'tinymce/plugins/help';
   
     // Content styles, including inline UI like fake cursors
     /* eslint import/no-webpack-loader-syntax: off */
     import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
     import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';
   
     export default function TinyEditorComponent(props) {
       // note that skin and content_css is disabled to avoid the normal
       // loading process and is instead loaded as a string via content_style
       return (
         <Editor
           init={{
             skin: false,
             content_css: false,
             content_style: [contentCss, contentUiCss].join('\n'),
           }}
         />
       );
     }
   

6. 使用 Node.js 开发服务器测试应用程序。

   要开始运行程序需要进入tinymce-react-demo的文件夹里并输入命令：

     $ npm run start
   

   在命令行里输入Ctrl+C来结束程序