|
|
|
|
@ -1,86 +0,0 @@
|
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
|
import '@wangeditor-next/editor/dist/css/style.css'; // 引入wangEditor样式
|
|
|
|
|
import { IDomEditor, IEditorConfig, IToolbarConfig, Boot } from '@wangeditor-next/editor';
|
|
|
|
|
import { Editor, Toolbar } from '@wangeditor-next/editor-for-react';
|
|
|
|
|
|
|
|
|
|
// import wordModule from 'wang-editor-plugin-import-from-word';
|
|
|
|
|
|
|
|
|
|
interface WangEditorProps {
|
|
|
|
|
value?: string;
|
|
|
|
|
onChange?: (value: string) => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const WangEditor: React.FC<WangEditorProps> = ({ value, onChange }) => {
|
|
|
|
|
const [editor, setEditor] = useState<IDomEditor | null>(null);
|
|
|
|
|
const [html, setHtml] = useState(value ?? '<p>请输入内容...</p>');
|
|
|
|
|
|
|
|
|
|
// 外部value变化时同步到内部
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (typeof value === 'string' && value !== html) {
|
|
|
|
|
setHtml(value);
|
|
|
|
|
}
|
|
|
|
|
}, [value]);
|
|
|
|
|
|
|
|
|
|
// 工具栏配置
|
|
|
|
|
const toolbarConfig: Partial<IToolbarConfig> = {};
|
|
|
|
|
|
|
|
|
|
// 编辑器配置
|
|
|
|
|
const editorConfig: Partial<IEditorConfig> = {
|
|
|
|
|
placeholder: '请输入内容...',
|
|
|
|
|
MENU_CONF: {
|
|
|
|
|
//@ts-ignore
|
|
|
|
|
// importFromWord: {
|
|
|
|
|
// server: process.env.BASE_URL + '/oss/imgUpload', //一个文件地址
|
|
|
|
|
// timeout: 5 * 1000, // 5s
|
|
|
|
|
|
|
|
|
|
// fieldName: 'file',
|
|
|
|
|
// headers: { Accept: 'text/x-json' },
|
|
|
|
|
// maxFileSize: 20 * 1024 * 1024, // 10M
|
|
|
|
|
// maxNumberOfFiles: 1,
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 组件卸载时销毁editor实例
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Boot.registerModule(wordModule);
|
|
|
|
|
return () => {
|
|
|
|
|
if (editor == null) return;
|
|
|
|
|
editor.destroy();
|
|
|
|
|
setEditor(null);
|
|
|
|
|
};
|
|
|
|
|
}, [editor]);
|
|
|
|
|
|
|
|
|
|
const handleChange = (editor: IDomEditor) => {
|
|
|
|
|
const newHtml = editor.getHtml();
|
|
|
|
|
setHtml(newHtml);
|
|
|
|
|
if (onChange) {
|
|
|
|
|
onChange(newHtml);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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={handleChange}
|
|
|
|
|
mode="default"
|
|
|
|
|
style={{ height: '300px', overflowY: 'hidden' }}
|
|
|
|
|
/>
|
|
|
|
|
<div style={{ marginTop: 16 }}>
|
|
|
|
|
<b>内容预览：</b>
|
|
|
|
|
<div dangerouslySetInnerHTML={{ __html: html }} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default WangEditor;
|
