83 lines
1.8 KiB
JavaScript
83 lines
1.8 KiB
JavaScript
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
|
|
import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
|
|
|
|
// 当前菜单排序和分组
|
|
|
|
function MyEditor(props, ref) {
|
|
// editor 实例
|
|
const [editor, setEditor] = useState(null)
|
|
|
|
// 编辑器内容
|
|
const [html, setHtml] = useState('<p></p>')
|
|
|
|
// 工具栏配置
|
|
const toolbarConfig = {
|
|
excludeKeys: ['group-image', 'group-video']
|
|
}
|
|
|
|
// 编辑器配置
|
|
const editorConfig = {
|
|
placeholder: '请输入内容...'
|
|
}
|
|
|
|
const changeValue = html => {
|
|
setHtml(html)
|
|
props.onChange(html)
|
|
}
|
|
|
|
const onClear = () => setHtml('')
|
|
|
|
/**
|
|
* 回现代码
|
|
*/
|
|
const onCashBack = () => {
|
|
let { cashBackText } = props
|
|
if (!!!cashBackText) {
|
|
return
|
|
}
|
|
setHtml(`${cashBackText}`)
|
|
// editor.fo;
|
|
}
|
|
|
|
// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
|
|
useImperativeHandle(ref, () => ({
|
|
// onCallback 就是暴露给父组件的方法
|
|
onClear,
|
|
onCashBack
|
|
}))
|
|
|
|
// 及时销毁 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 => changeValue(editor.getHtml())}
|
|
mode='default'
|
|
style={{ height: '300px', overflowY: 'scroll' }}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default forwardRef(MyEditor)
|