富文本编辑器

　安装

　yarn add @wangeditor/editor

    yarn add @wangeditor/editor-for-react

　引入

    import '@wangeditor/editor/dist/css/style.css' // 引入 css

    import React, { useState, useEffect } from 'react'

    import { Editor, Toolbar } from '@wangeditor/editor-for-react'

    import { IDomEditor, IEditorConfig } from '@wangeditor/editor'

　使用 ：一个函数组件

function MyEditor() {
        const [editor, setEditor] = useState<IDomEditor | null>(null) // 存储 editor 实例
        const [html, setHtml] = useState('<p>hello</p>') // 编辑器内容

        // 模拟 ajax 请求，异步设置 html
        useEffect(() => {
            setTimeout(() => {
                setHtml('<p>hello&nbsp;world</p>')
            }, 1500)
        }, [])

        const toolbarConfig = {}
        const editorConfig: Partial<IEditorConfig> = {
            placeholder: '请输入内容...',
        }

        // 及时销毁 editor ，重要！
        useEffect(() => {
            return () => {
                if (editor == null) return
                editor.destroy()
                setEditor(null)
            }
        }, [editor])

        return (
            <>
                <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
                    <Toolbar
                        editor={editor}
                        defaultConfig={toolbarConfig}
                        mode="default"
                        style={{ borderBottom: '1px solid #ccc' }}
                    />
                    <Editor
                        defaultConfig={editorConfig}
                        value={html}
                        onCreated={setEditor}
                        onChange={editor => setHtml(editor.getHtml())}
                        mode="default"
                        style={{ height: '500px', 'overflowY': 'hidden' }}
                    />
                </div>
                <div style={{ marginTop: '15px' }}>
                    {html}
                </div>
            </>
        )
    }