在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>
        </>

    )
} 

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

 

查看更多关于在react中使用wangEditorV5的详细内容...