|
@@ -31,23 +31,19 @@ function MyEditor(props) {
|
31
|
31
|
const [editor, setEditor] = useState(null); // 存储 editor 实例
|
32
|
32
|
const [html, setHtml] = useState("");
|
33
|
33
|
|
34
|
|
- // // 模拟 ajax 请求,异步设置 html
|
35
|
|
- // useEffect(() => {
|
36
|
|
- // setHtml(value || "");
|
37
|
|
- // }, [value]);
|
|
34
|
+ // 模拟 ajax 请求,异步设置 html
|
|
35
|
+ useEffect(() => {
|
|
36
|
+ setHtml(value || "");
|
|
37
|
+ }, [value]);
|
38
|
38
|
|
39
|
39
|
// 及时销毁 editor
|
40
|
40
|
useEffect(() => {
|
41
|
|
- if (editor) {
|
42
|
|
- setHtml(value || "");
|
43
|
|
- }
|
44
|
|
-
|
45
|
41
|
return () => {
|
46
|
42
|
if (editor == null) return;
|
47
|
43
|
editor.destroy();
|
48
|
44
|
setEditor(null);
|
49
|
45
|
};
|
50
|
|
- }, [editor, value]);
|
|
46
|
+ }, [editor]);
|
51
|
47
|
|
52
|
48
|
function insertText() {
|
53
|
49
|
if (editor == null) return;
|
|
@@ -59,6 +55,13 @@ function MyEditor(props) {
|
59
|
55
|
console.log(editor.getHtml());
|
60
|
56
|
}
|
61
|
57
|
|
|
58
|
+ const handleChange = (editor) => {
|
|
59
|
+ const raw = editor.getHtml();
|
|
60
|
+ if (raw !== '<p><br></p>') {
|
|
61
|
+ onChange(raw)
|
|
62
|
+ }
|
|
63
|
+ }
|
|
64
|
+
|
62
|
65
|
return !readonly ? (
|
63
|
66
|
<div className={props.className} style={style}>
|
64
|
67
|
<Toolbar
|
|
@@ -71,7 +74,7 @@ function MyEditor(props) {
|
71
|
74
|
defaultConfig={editorConfig}
|
72
|
75
|
value={html}
|
73
|
76
|
onCreated={setEditor}
|
74
|
|
- onChange={(editor) => onChange(editor.getHtml())}
|
|
77
|
+ onChange={handleChange}
|
75
|
78
|
mode="default"
|
76
|
79
|
style={{ height: "500px" }}
|
77
|
80
|
/>
|