1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/**
* wangEditor http://www.wangeditor.com/ 将git 源码下载下来 然后 npm run build 获取编译后的代码 版本 4.2.2
* 钟是志
* 2020年11月5日 16:56:23
*
**/
/**
* key: 组件的key // 同一页面渲染应该只有一个唯一的key
* height: number // 编辑区域的高度 单位px
* zIndex: number // 默认为 10000 可自行设置
* placeholder: string // 提示文字,
* focus: boolean, // 是否获取焦点
* value: string // 富文本的值
* 更多配置项 参考 http://www.wangeditor.com/doc/
* */
import React, { useState, useEffect } from 'react';
import WangEditor from './includes/wangEditor.min';
import { uploadFile } from "@/webPublic/one_stop_public/libs/PictureSignature/ShowItem";
import { queryApiActionPath, queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
import PdfMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/PdfMenu';
import VideoMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/VideoMenu';
let editor = null;
export default function Index({
height,
zIndex,
placeholder,
focus,
value,
domKey,
onChangeValue,
menus,
}) {
useEffect(() => {
editor = new WangEditor(`#wangEditor${domKey}`);
editor.menus.extend('PdfMenuKey', PdfMenu);
editor.menus.extend('video', VideoMenu);
editor.config.zIndex = 20;
if (height) {
editor.config.height = height; // 编辑器高度
}
if (zIndex) {
editor.config.zIndex = zIndex; // 编辑器 z-index
}
if (placeholder) {
editor.config.placeholder = placeholder; // placeholder
}
if (focus) {
editor.config.focus = focus;
}
editor.config.onchange = function(newHtml) {
onChangeValue(newHtml);
};
editor.config.onchangeTimeout = 500; // html内容改变时的 timeOut 配置
editor.config.customUploadImg = function(resultFiles, insertImgFn) {
// 重写上传图片的方法
uploadFile(resultFiles[0]).then((y) => {
if (y && y.length) {
insertImgFn(queryFileUrl(y));
}
});
// insertImgFn(imgUrl);
};
editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤
editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 上传的图片不能大于3M
editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片
editor.config.showFullScreen = false; // 关闭全局变量
editor.config.menus = menus || [
// 配置菜单
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'justify',
'quote',
// 'emoticon',
'image',
'video',
'table',
// 'code',
'splitLine',
'PdfMenuKey',
// 'undo',
// 'redo',
];
editor.create();
editor.txt.html(value);
// if (value && value.indexOf('wangEditorHtml') > -1) {
// editor.txt.html(value);
// } else {
// editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
// }
return () => {
console.log('是否销毁了editor');
editor.destroy();
};
}, []);
// useEffect(() => {
// if (value && editor && editor.txt) {
// editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
// }
// }, [value]);
return <div id={`wangEditor${domKey}`} />;
}