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> </> ) }
然後在需要使用到編輯器的頁面進行引用就可以了