在react中使用wangEditorV5|每日热讯

yarn add @wangeditor/editor-for-reactnpm 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 (        <>            
                                 setHtml(editor.getHtml())}                    mode="default"                    style={{ height: "500px", overflowY: "hidden" }}                />            
            )}