React 集成 TinyMCE 5.2

安装官方组件

npm install --save @tinymce/tinymce-react

集成组件

import React from 'react';

import './App.css';

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

class App extends React.Component {

  handleEditorChange = (content, editor) => {

    console.log('Content was updated:', content);

  }

  render() {

  return (

    <div className="App">

      <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'

        }}

        onEditorChange={this.handleEditorChange}

      />

    </div>

  );

  }

}

export default App;

完成上两步就可以看到编辑器了。不过会提示你注册。解决办法下载tinyMCE免费的组件。

下载地址：https://www.tiny.cloud/get-tiny/self-hosted/ 如果不准备做二次开发可以直接下载社区版本可以免费试用。如果有需要可以下载开发板。包括源代码

下载界面

下载后解压缩完会得到一个js文件夹，可以直接拷贝到react项目的public目录下。我的结构是：public/tinymce/js/tinymce/tinymce.min.js。 然后在react项目的idex.html文件中加入引用再刷新就不会提示了。

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

最终效果：

效果图

此时已经能都开始使用了。

相关系列：

React集成TinyMCE（二）汉化

相关代码：

前端完整项目

后台服务代码