tinymce-react富文本编辑器

tinymce-react富文本编辑器

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

下载依赖

npm install --save @tinymce/tinymce-react

使用方法和例子

官网例子：

代码：

init({
  selector: '#tiny-ui .editor',
  toolbar: 'bold italic underline | addcomment showcomments',
  menubar: 'file edit view insert format tools tc',
  menu: {
    tc: {
      title: 'TinyComments',
      items: 'addcomment showcomments deleteallconversations'
    }
  },
  plugins: 'paste tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'Author',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

自定义后的富文本编辑器（自定义的按钮和样式修改）

代码如下：

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


<div className="editor-wrapper">
   <Editor
     apiKey='官网申请的key'
     initialValue='Hello'
     init={{
       height: 400,
       menubar: false,
       selector: 'textarea#custom-toolbar-button',
       toolbar:
         'undo redo | customInsertButton customDateButton | custButton customDateButton | \
         amountButton customDateButton | linkButton customDateButton',
         setup: function (editor) {
           editor.ui.registry.addButton('customInsertButton', {
             text: 'First Name',
             onAction: function (_) {
               editor.insertContent('[FirstName]');
             }
           });
           editor.ui.registry.addButton('custButton', {
             text: 'Last Name',
             onAction: function (_) {
               editor.insertContent('[LastName]');
             }
           });
           editor.ui.registry.addButton('amountButton', {
             text: 'Amount',
             onAction: function (_) {
               editor.insertContent('[Amount]');
             }
           });
           editor.ui.registry.addButton('linkButton', {
             text: 'Link',
             onAction: function (_) {
               editor.insertContent('[Link]');
             }
           });
         },
         content_style: 'body { font-size:18px; color: #000 }'
     }}
     onEditorChange={handleEditorChange}
   />
 </div>

问题1：

安装到项目中并实践后会出现下列警告

这个需要到官网 ( https://www.tiny.cloud/ ) 上面注册一个tiny账号, 然后添加自己项目的域名后就可以了

官网Key

地址

[英文官网]：(https://www.tiny.cloud/docs/)
[中文官网]：(http://tinymce.ax-z.cn/)
[官网注册登录]：(https://www.tiny.cloud/)