1.安装
npm install @wangeditor/editor-for-react --save
或者
yarn add @wangeditor/editor-for-react
2.使用案例
组件内部分:
import '@wangeditor/editor/dist/css/style.css' // 引入 css import React, { useState, useEffect } from 'react' import { Editor, Toolbar } from '@wangeditor/editor-for-react' function MyEditor({defaultHtml,updateHtml}) { const [editor, setEditor] = useState(null) // 存储 editor 实例 const [html, setHtml] = useState(defaultHtml) // 编辑器内容 useEffect(() => { updateHtml(html) }, [html]) const toolbarConfig = {} const editorConfig = { placeholder: '请输入内容...', } // 及时销毁 editor ,重要! useEffect(() => { return () => { if (editor == null) return editor.destroy() setEditor(null) } }, [editor]) return ( <> <div style={{ border: '1px solid #ccc', zIndex: 100,height:'350px',padding:'1vh 0', }}> <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: '50%', 'overflow-y': 'hidden' }} /> </div> </> ) } export default MyEditor;
(1)传递的一个dufaultHTML作为富文本编辑器的默认值,供编辑的场景使用。
(2)updateHTML作为用于富文本编辑器的值发生变化后向父组件暴漏出来的当前最新的值,父组件使用高阶函数来获取编辑器最新的值。