在react中使用wangEditorV5

wangEditor是基于JavaScript和css的一款web富文本编辑器,是国内比较好用的一款轻量级富文本编辑器,上手简单,易用且开源免费.

官方文档：http://www.wangeditor.com/

本文讲述的是在react中如何去使用这款富文本编辑器

首先引入编辑器

yarn add @wangeditor/editor-for-react
npm install @wangeditor/editor-for-react --save

还有CDN引入方式(网址:安装 | wangEditor)
创建一个MyEdit.js,对富文本编辑器进行一个简单的封装

import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import '@wangeditor/editor/dist/css/style.css'

export default function MyEditor() {
    const [editor, setEditor] = useState(null) // 存储 editor 实例
    const [html, setHtml] = useState('')

    // 模拟 ajax 请求，异步设置 html
    useEffect(() => {

    }, [])

    const toolbarConfig = {}

    const editorConfig = {
        placeholder: '请输入内容...',
        scroll: true,

        // 继续其他配置
        MENU_CONF: {
            // 配置字号
            fontSize: 'small',

            // 配置上传图片
            uploadImage: "/api/load",

            // 继续其他菜单配置
        }

    }
    editorConfig.onChange = (editor) => {            // JS 语法
        // editor changed
        //当前文本的获取,获取纯文本可以使用getText
        //console.log(editor.getHtml());
        localStorage.setItem("editor", editor.getHtml())

    }
    // 及时销毁 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>
        </>

    )
}

然后在需要使用到编辑器的页面进行引用就可以了