wangeditor编辑器自定义按钮和节点,上传word转换html，文本更换 ...

vue3+ts
需求：在编辑器插入图片和视频时下方会有一个输入框填写描述，上传word功能
wangeditor文档wangEditor开源 Web 富文本编辑器，开箱即用，配置简朴

https://www.wangeditor.com/
 安装：npm install @wangeditor/editor --save
1、自定义按钮部分 index.ts，参考了文档

1. import type { IButtonMenu, IDomEditor } from "@wangeditor/editor-for-vue";
2. import { Range } from "slate";
3. import { DomEditor } from "@wangeditor/editor";
5. class VideoMenu implements IButtonMenu {
6.   title: string;
7.   tag: string;
8.   iconSvg: string;
9.   constructor() {
10.     this.title = "上传视频";
11.     this.iconSvg =
12.       '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="black" d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"/></svg>';
13.     this.tag = "button";
14.   }
15.   getValue() {
16.     return " ";
17.   }
18.   isActive() {
19.     return false;
20.   }
21.   isDisabled(editor: IDomEditor): boolean {
22.     //这部分参考的源码写的
23.     const { selection } = editor;
24.     if (selection == null) return true;
25.     if (!Range.isCollapsed(selection)) return true; // 选区非折叠，禁用
26.     const selectedElems = DomEditor.getSelectedElems(editor);
27.     const hasVoidOrPre = selectedElems.some(elem => {
28.       const type = DomEditor.getNodeType(elem);
29.       if (type === "pre") return true;
30.       if (type === "list-item") return true;
31.       if (editor.isVoid(elem)) return true;
32.       return false;
33.     });
34.     if (hasVoidOrPre) return true; // void 或 pre ，禁用
36.     return false;
37.   }
38.   exec(editor: IDomEditor) {
39.     if (this.isDisabled(editor)) return;
40.     //点击打开上传视频的弹框
41.     editor.emit("uploadvideo");
42.   }
43. }
44. class TextReplace implements IButtonMenu {
45.   title: string;
46.   iconSvg: string;
47.   tag: string;
48.   constructor() {
49.     this.title = "文本替换";
50.     this.iconSvg =
51.       '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="black" d="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05A6.976 6.976 0 0 0 11 4c-3.53 0-6.43 2.61-6.92 6H6.1A5 5 0 0 1 11 6m5.64 9.14A6.89 6.89 0 0 0 17.92 12H15.9a5 5 0 0 1-4.9 4c-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05A6.976 6.976 0 0 0 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49L21.49 20z"/></svg>';
52.     this.tag = "button";
53.   }
54.   getValue() {
55.     return false;
56.   }
57.   isActive() {
58.     return false;
59.   }
60.   isDisabled(editor: IDomEditor): boolean {
61.     const { selection } = editor;
62.     if (selection == null) return true;
63.     return false;
64.   }
65.   exec(editor: IDomEditor) {
66.     if (this.isDisabled(editor)) return;
67.     editor.emit("toggleModal", "textReplace", true);
68.   }
69. }
71. class sendwordMenu implements IButtonMenu {
72.   title: string;
73.   tag: string;
74.   constructor() {
75.     this.title = "上传word";
76.     this.tag = "button";
77.   }
78.   getValue() {
79.     return " ";
80.   }
81.   isActive() {
82.     return false;
83.   }
84.   isDisabled(editor: IDomEditor): boolean {
85.     const { selection } = editor;
86.     if (selection == null) return true;
87.     if (!Range.isCollapsed(selection)) return true; // 选区非折叠，禁用
88.     const selectedElems = DomEditor.getSelectedElems(editor);
89.     const hasVoidOrPre = selectedElems.some(elem => {
90.       const type = DomEditor.getNodeType(elem);
91.       if (type === "pre") return true;
92.       if (type === "list-item") return true;
93.       if (editor.isVoid(elem)) return true;
94.       return false;
95.     });
96.     if (hasVoidOrPre) return true; // void 或 pre ，禁用
97.   }
98.   exec(editor: IDomEditor) {
99.     if (this.isDisabled(editor)) return;
100.     //这里写点击按钮后的操作,我这里是调自定义事件
101.     editor.emit("uploadword");
102.   }
103. }
104. export const menu1Conf = {
105.   key: "videomenu", // 定义 menu key ：要保证唯一、不重复（重要）
106.   factory() {
107.     return new VideoMenu();
108.   }
109. };
111. export const menu2Conf = {
112.   key: "wordmenu",
113.   factory() {
114.     return new sendwordMenu();
115.   }
116. };
117. export const menu3Conf = {
118.   key: "textReplace",
119.   factory() {
120.     return new TextReplace();
121.   }
122. };

复制代码

 2、editorComponents.vue代码，在editor组件中引入index.ts和renderviedoEle/index和renderimgEle/index 

1. <script setup lang="ts">
2. import {
3.   onBeforeUnmount,
4.   ref,
5.   reactive,
6.   shallowRef,
7.   defineEmits,
8.   defineProps,
9. } from "vue";
10. import "@wangeditor/editor/dist/css/style.css";
11. import {
12.   Editor,
13.   Toolbar,
14.   IDomEditor,
15. } from "@wangeditor/editor-for-vue";
16. import {
17.   Boot,
18.   DomEditor,
19. } from "@wangeditor/editor";
20. import type { UploadInstance } from "element-plus";
21. import mammoth from "mammoth";
22. import customvideo from "@/utils/renderviedoEle/index";
23. import customimage from "@/utils/renderimgEle/index";
24. import {
25.   menu1Conf,
26.   menu2Conf,
27.   menu3Conf,
28. } from "@/utils/menus/index";
29. defineOptions({
30.   name: "editUpload"
31. });
32. const emit = defineEmits([
33.   "changevalue",
34. ]);
36. const mode = "default";
37. const props = defineProps({
38.   editvalue: {
39.     type: String,
40.     default: ""
41.   },
42. });
43. const localeditvalue = ref(props.editvalue);
44. const txtplace = reactive({
45.   findContent: "",
46.   replaceContent: ""
47. });
48. const textReplaceShow = ref(false);
50. const replaceTextInHTML = function (html, searchText, replaceText) {
51.   // 定义全局匹配的正则表达式，匹配除了HTML标签之外的所有内容
52.   const regex = />([^<]*)</g;
53.   // 使用replace方法替换匹配到的文本内容
54.   const replacedHtml = html.replace(regex, (match, text) => {
55.     // 判断文本内容是否包含需要替换的搜索文本
56.     if (text.includes(searchText)) {
57.       // 替换文本内容
58.       const replacedText = text.replace(
59.         new RegExp(searchText, "g"),
60.         replaceText
61.       );
62.       return `>${replacedText}<`;
63.     } else {
64.       // 不需要替换，返回原内容
65.       return match;
66.     }
67.   });
69.   return replacedHtml;
70. };
71. const handleSubmit = () => {//替换文本提交
72.   const html = editorRef.value.getHtml();
73.   const newHtml = replaceTextInHTML(
74.     html,
75.     txtplace.findContent,
76.     txtplace.replaceContent
77.   );
78.   editorRef.value.setHtml(newHtml);
79. };
81. const insertVideo = val => {//插入视频
82.   editorRef.value.restoreSelection();// 恢复选区
83.   setTimeout(() => {
84.     editorRef.value.insertNode({
85.       type: "customvideo",
86.       src: val.videoUrl,
87.       poster: val.coverUrl,
88.       videoId: val.videoID,
89.       altDes: "",
90.       children: [
91.         {
92.           text: ""
93.         }
94.       ]
95.     });
96.   }, 500);
97. }
98. const sendeluploads = ref<UploadInstance>();
99. // 编辑器实例，必须用 shallowRef
100. const editorRef = shallowRef();
101. const toolbarConfig: any = {//这里把不想要的菜单排除掉
102.   excludeKeys: [
103.     "insertImage",
104.     "insertVideo",
105.     "uploadVideo",
106.     "editvideomenu",
107.     "group-video"
108.   ]
109. };
110. const editorConfig = {
111.   placeholder: "请输入内容...",
112.   MENU_CONF: {}
113. };
114. // 在工具栏插入自定义的按钮
115. toolbarConfig.insertKeys = {
116.   index: 19, // 插入的位置，基于当前的 toolbarKeys
117.   keys: [
118.     "videomenu",
119.     "wordmenu",
120.     "textReplace"
121.   ]
122. };
124. //注意：这个要再外面注入，不然会报错
125. Boot.registerModule(customvideo);
126. Boot.registerModule(customimage);
127. const handleCreated = (editor: IDomEditor) => {
128.   editorRef.value = editor;
129.   // 判断已插入过就不要重复插入按钮
130.   if (
131.     !editor
132.       .getAllMenuKeys()
133.       ?.includes(
134.         "videomenu",
135.         "wordmenu",
136.         "textReplace"
137.       )
138.   ) {
139.     Boot.registerMenu(menu1Conf);
140.     Boot.registerMenu(menu2Conf);
141.     Boot.registerMenu(menu3Conf);
142.   }
143.   editor.on("uploadvideo", val => {
144.       // 处理上传视频的逻辑,上传完直接插入视频 insertVideo()
145.       // ........
146.   });
147.   editor.on("uploadword", () => {
148.     // 点击上传word按钮模拟上传事件clik
149.     sendeluploads.value.$.vnode.el.querySelector("input").click();
150.   });
151.   editor.on("toggleModal", (modalName, show) => {
152.     // 显示替换的弹框
153.     textReplaceShow.value = show;
154.   });
156. };
157. const onChange = editor => {//编辑器的值改变
158.   emit("changevalue", editor.getHtml());
159. };
160. // 组件销毁时，也及时销毁编辑器
161. onBeforeUnmount(() => {
162.   const editor = editorRef.value;
163.   if (editor == null) return;
164.   editor.destroy();
165. });
167. // 图片上传阿里云服务器
168. editorConfig.MENU_CONF["uploadImage"] = {
169.   // 自定义上传
170.   async customUpload(file: File, insertFn) {
171.    aliyunApi(file).then((res: any) => {
172.       // 上传到服务器后插入自定义图片节点
173.       editorRef.value.insertNode({
174.         type: "customimage",
175.         src: res.url,
176.         alt: res.name,
177.         href: res.url,
178.         children: [
179.           {
180.             text: ""
181.           }
182.         ]
183.       });
184.     });
185.   }
186. };
188. const handleSuccess = val => {};
189. const beforeUpload = val => {};
190. const handleUpload = val => {//上传完word文档后的处理，此处用到了mammoth.js，查看地址：https://github.com/mwilliamson/mammoth.js
191.   // word文档转换插入到富文本
192.   const file = val.file;
193.   var reader = new FileReader();
194.   reader.onload = function (loadEvent) {
195.     var arrayBuffer = loadEvent.target?.result;
196.     mammoth
197.       .convertToHtml(
198.         { arrayBuffer: arrayBuffer as ArrayBuffer },
199.         { convertImage: convertImage }//将base64图片转换上传到阿里云服务器
200.       )
201.       .then(
202.         function (result) {
203.           // 没能修改插入图片的源码，这里自己做了下修改，加了customimage的div,让图片渲染走自己定义的节点
204.           // 如果没有这一步，会默认插入原先img的那个节点
205.           const parser = new DOMParser();
206.           const doc = parser.parseFromString(result.value, "text/html");
207.           const images = doc.getElementsByTagName("img");
208.           for (let i = images.length - 1; i >= 0; i--) {
209.             const img = images[i];
210.             const div = doc.createElement("div");
211.             div.setAttribute("data-w-e-type", "customimage");
212.             div.setAttribute("data-w-e-is-void", "");
213.             div.setAttribute("data-w-e-is-inline", "");
214.             if (img.parentNode) {
215.               img.parentNode.replaceChild(div, img);
216.             }
217.             div.appendChild(img);
218.           }
219.           const processedHtml = doc.body.innerHTML;
220.           editorRef.value.dangerouslyInsertHtml(processedHtml);
221.         },
222.         function (error) {
223.           console.error(error);
224.         }
225.       );
226.   };
227.   reader.readAsArrayBuffer(file);
228. };
230. // word图片转换
231. const convertImage = mammoth.images.imgElement(image => {
232.   return image.read("base64").then(async imageBuffer => {
233.     const result = await uploadBase64Image(imageBuffer, image.contentType);
234.     return { src: result };
235.   });
236. });
238. const uploadBase64Image = async (base64Image, mime) => {
239.   const _file = base64ToBlob(base64Image, mime);
240.   let data: any = await aliyunApi(_file);
241.   return data.url;
242. };
243. const base64ToBlob = (base64, mime) => {
244.   mime = mime || "";
245.   const sliceSize = 1024;
246.   const byteChars = window.atob(base64);
247.   const byteArrays = [];
248.   for (
249.     let offset = 0, len = byteChars.length;
250.     offset < len;
251.     offset += sliceSize
252.   ) {
253.     const slice = byteChars.slice(offset, offset + sliceSize);
254.     const byteNumbers = new Array(slice.length);
255.     for (let i = 0; i < slice.length; i++) {
256.       byteNumbers[i] = slice.charCodeAt(i);
257.     }
258.     const byteArray = new Uint8Array(byteNumbers);
259.     byteArrays.push(byteArray);
260.   }
261.   return new Blob(byteArrays, { type: mime });
262. };
264. </script>
266. <template>
267.   <div
268.     class="wangeditor"
269.   >
270.     <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
271.     <Editor
272.       id="editor-container"
273.       v-model="localeditvalue"
274.       :defaultConfig="editorConfig"
275.       :mode="mode"
276.       style="height: 500px; overflow-y: hidden; border: 1px solid #ccc"
277.       @onCreated="handleCreated"
278.       @onChange="onChange"
279.     />
280.     <el-upload
281.       v-show="false"
282.       ref="sendeluploads"
283.       action="#"
284.       :show-file-list="false"
285.       accept=".docx"
286.       :on-success="handleSuccess"
287.       :before-upload="beforeUpload"
288.       :http-request="handleUpload"
289.     />
290.     <el-dialog
291.       v-model="textReplaceShow"
292.       title="文本替换"
293.       width="30%"
294.       class="replacedialog"
295.     >
296.       <el-form
297.         v-model="txtplace"
298.         label-width="auto"
299.       >
300.         <el-form-item label="查找文本">
301.           <el-input v-model="txtplace.findContent" />
302.         </el-form-item>
303.         <el-form-item label="替换文本">
304.           <el-input v-model="txtplace.replaceContent" />
305.         </el-form-item>
306.         <el-form-item>
307.           <el-button type="primary" @click="handleSubmit">替换</el-button>
308.         </el-form-item>
309.       </el-form>
310.     </el-dialog>
311.   </div>
312. </template>
313. <style scoped lang="scss">
314. .replacedialog {
315.   .el-form {
316.     .el-form-item {
317.       margin-bottom: 20px;
319.       label {
320.         font-weight: bold;
321.         color: #333;
322.       }
324.       .el-input {
325.         input {
326.           color: #333;
327.         }
328.       }
329.     }
330.   }
331. }
332. </style>
333. <style lang="scss">
334. .w-e-image-container {
335.   border: 2px solid transparent;
336. }
338. .w-e-text-container [data-slate-editor] .w-e-selected-image-container {
339.   border: 2px solid rgb(180 213 255);
340. }
342. .w-e-text-container [data-slate-editor] img {
343.   display: block !important;
344.   margin: 0 auto;
345. }
347. .w-e-text-container [data-slate-editor] .w-e-image-container {
348.   display: block;
349. }
351. .w-e-text-container [data-slate-editor] .w-e-image-container:hover {
352.   box-shadow: none;
353. }
355. .txt-input {
356.   .el-textarea__inner {
357.     height: 300px;
358.   }
359. }
361. .w-e-text-container [data-slate-editor] p {
362.   margin: 5px 0;
363. }
365. .w-e-textarea-video-container video {
366.   width: 30%;
367. }
369. .w-e-textarea-video-container {
370.   background: none;
371. }
373. .w-e-text-container
374.   [data-slate-editor]
375.   .w-e-selected-image-container
376.   .left-top {
377.   display: none;
378. }
380. .w-e-text-container
381.   [data-slate-editor]
382.   .w-e-selected-image-container
383.   .right-top {
384.   display: none;
385. }
387. .w-e-text-container
388.   [data-slate-editor]
389.   .w-e-selected-image-container
390.   .left-bottom {
391.   display: none;
392. }
394. .w-e-text-container
395.   [data-slate-editor]
396.   .w-e-selected-image-container
397.   .right-bottom {
398.   display: none;
399. }
400. </style>

复制代码

 3、在页面中引用editor组件

1. <script setup lang="ts">
2. import { ref, reactive } from "vue";
3. import { EdtiorUpload } from "@/components/editor";
4. const editorcontent = ref("");
5. const childeditRef = ref(null);
6. const editorChange = val => {
7.   // 编辑器值改变了...
8. };
9. </script>
11. <template>
12.   <div>
13.     <div style="width: 100%">
14.       <!-- 这里组件写ref标识 保证每次组件打开都能更新 -->
15.       <EdtiorUpload
16.         ref="childeditRef"
17.         :editvalue="editorcontent"
18.         @changevalue="editorChange"
19.       />
20.     </div>
21.   </div>
22. </template>

复制代码

4.自定义节点的部分renderviedoEle/index，renderimgEle/index 放在了githubhttps://github.com/srttina/wangeditor-customsalte/tree/master

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。