在react中使用wangEditorV5

辣子雞好吃發表於2023-04-03
React

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

    )
}

然後在需要使用到編輯器的頁面進行引用就可以了

 

相關文章