react 使用富文本(TinyMCE)

一：有关文档

• TinyMCE中文文档
• TinyMCE官方文档
• Ant design

二：使用步骤

1.安装插件

npm install --save @tinymce/tinymce-react

1.页面中使用

 import {
      Editor } from '@tinymce/tinymce-react';
 // 富文本
  const handleEditorChange = (content, editor) => {
     
    console.log('Content was updated:', content);
    setContent(content);
  };
  <Editor
         init={
     {
     
         height: 500,
         language:'zh_CN',
        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 |fontselect fontsizeselect | bold italic backcolor forecolor | \
             alignleft aligncenter alignright alignjustify | \
             bullist numlist outdent indent | removeformat | help',
              }}
              onEditorChange={
     handleEditorChange}
            />