react 使用富文本(TinyMCE)

一:有关文档

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

二:使用步骤

按照下面步骤显示页面

1.安装插件

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

1.页面中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 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}
            />