【富文本编辑器】利用wangEditor编写的React富文本编辑器组件

第一步：安装包

yarn add @wangeditor/editor @wangeditor/editor-for-react

第二步：React组件编写

import React, { Component } from 'react';
import '@wangeditor/editor/dist/css/style.css' // 引入 cs
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig } from '@wangeditor/editor'

class  MyEditor extends Component{
    state = {
      editor: null , // 存储 editor 实例
      html : '<p>hello</p>'  // 编辑器内容
    }

    setEditor=(value)=>{
      this.setState({
        editor: value
      })
    }

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



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

      const toolbarConfig = { }
      const editorConfig = {
          placeholder: '请输入内容...',
      }
      const { html , editor } = this.state
    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={this.setEditor}
                    onChange={editor => this.setHtml(editor.getHtml())}
                    mode="default"
                    style={{ height: '500px', 'overflow-y': 'hidden' }}
                />
            </div>
            <div style={{ marginTop: '15px' }}>
                {html}
            </div>
        </>
    )
  }
}

export default MyEditor

最后，查看效果