devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

wangEditor5在vue中自定义菜单栏--格式刷，上传图片，视频功能_wangeditor自定义菜单

作者：Monodyee | 2024-04-26 20:48:43

赞

踩

wangeditor自定义菜单

复制粘贴修改一下直接用，也写了相关的注释。

一、安装相关插件

  1. npm install @wangeditor/editor
  2. npm install @wangeditor/editor-for-vue

二、官方关键文档

  1. ButtonMenu：https://www.wangeditor.com/v5/development.html#buttonmenu
  2. 注册菜单到wangEditor：自定义扩展新功能 | wangEditor
  3. insertKeys自定义功能的keys:https://www.wangeditor.com/v5/toolbar-config.html#insertkeys
  4. 自定义上传图片视频功能:菜单配置 | wangEditor
  5. 源码地址:GitHub - wangeditor-team/wangEditor: wangEditor —— 开源 Web 富文本编辑器

三、初始化编辑器（wangEdit.vue） 

  1. <template>
  2.   <div style="border: 1px solid #ccc">
  3.     <Toolbar
  4.       style="border-bottom: 1px solid #ccc"
  5.       :editor="editor"
  6.       :defaultConfig="toolbarConfig"
  7.       :mode="mode"
  8.     />
  9.     <Editor
  10.       style="height: 500px; overflow-y: hidden"
  11.       v-model="html"
  12.       :defaultConfig="editorConfig"
  13.       :mode="mode"
  14.       @onCreated="onCreated"
  15.       @onChange="onChange"
  16.     />
  17.   </div>
  18. </template>
  19.  
  20. <script>
  21. // import Location from "@/utils/location";
  22. import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
  23. import { Boot, IModuleConf, DomEditor } from "@wangeditor/editor";
  24. import { getToken } from "@/utils/auth";
  25. import MyPainter from "./geshi";
  26. const menu1Conf = {
  27.   key: "geshi", // 定义 menu key ：要保证唯一、不重复（重要）
  28.   factory() {
  29.     return new MyPainter(); // 把 `YourMenuClass` 替换为你菜单的 class
  30.   },
  31. };
  32. const module = {
  33.   // JS 语法
  34.   menus: [menu1Conf],
  35.  
  36.   // 其他功能，下文讲解...
  37. };
  38. Boot.registerModule(module);
  39. export default {
  40.   components: { Editor, Toolbar },
  41.   props: {
  42.     relationKey: {
  43.       type: String,
  44.       default: "",
  45.     },
  46.   },
  47.   created() {
  48.     console.log(this.editorConfig.MENU_CONF.uploadImage.meta.activityKey);
  49.   },
  50.   data() {
  51.     return {
  52.       // 富文本实例
  53.       editor: null,
  54.       // 富文本正文内容
  55.       html: "",
  56.       // 编辑器模式
  57.       mode: "default", // or 'simple'
  58.       // 工具栏配置
  59.       toolbarConfig: {
  60.         //新增菜单
  61.         insertKeys: {
  62.           index: 32,
  63.           keys: ["geshi"],
  64.         },
  65.         //去掉网络上传图片和视频
  66.         excludeKeys: ["insertImage", "insertVideo"],
  67.       },
  68.       // 编辑栏配置
  69.       editorConfig: {
  70.         placeholder: "请输入相关内容......",
  71.         // 菜单配置
  72.         MENU_CONF: {
  73.           // ===================
  74.           // 上传图片配置
  75.           // ===================
  76.           uploadImage: {
  77.             // 文件名称
  78.             fieldName: "contentAttachImage",
  79.             server: Location.serverPath + "/editor-upload/upload-image",
  80.             headers: {
  81.               Authorization: "Bearer " + getToken(),
  82.             },
  83.             meta: {
  84.               activityKey: this.relationKey,
  85.             },
  86.             // 单个文件的最大体积限制，默认为 20M
  87.             maxFileSize: 20 * 1024 * 1024,
  88.             // 最多可上传几个文件，默认为 100
  89.             maxNumberOfFiles: 10,
  90.             // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  91.             allowedFileTypes: ["image/*"],
  92.             // 跨域是否传递 cookie ，默认为 false
  93.             withCredentials: true,
  94.             // 超时时间，默认为 10 秒
  95.             timeout: 5 * 1000,
  96.             // 自定义插入图片操作
  97.             customInsert: (res, insertFn) => {
  98.               if (res.errno == -1) {
  99.                 this.$message.error("上传失败!");
  100.                 return;
  101.               }
  102.               insertFn(Location.serverPath + res.data.url, "", "");
  103.               this.$message.success("上传成功!");
  104.             },
  105.           },
  106.           // =====================
  107.           // 上传视频配置
  108.           // =====================
  109.           uploadVideo: {
  110.             // 文件名称
  111.             fieldName: "contentAttachVideo",
  112.             server: Location.serverPath + "/editor-upload/upload-video",
  113.             headers: {
  114.               Authorization: "Bearer " + getToken(),
  115.             },
  116.             meta: {
  117.               activityKey: this.relationKey,
  118.             },
  119.             // 单个文件的最大体积限制，默认为 60M
  120.             maxFileSize: 60 * 1024 * 1024,
  121.             // 最多可上传几个文件，默认为 100
  122.             maxNumberOfFiles: 3,
  123.             // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
  124.             allowedFileTypes: ["video/*"],
  125.             // 跨域是否传递 cookie ，默认为 false
  126.             withCredentials: true,
  127.             // 超时时间，默认为 10 秒
  128.             timeout: 15 * 1000,
  129.             // 自定义插入图片操作
  130.             customInsert: (res, insertFn) => {
  131.               if (res.errno == -1) {
  132.                 this.$message.error("上传失败!");
  133.                 return;
  134.               }
  135.               insertFn(Location.serverPath + res.data.url, "", "");
  136.               this.$message.success("上传成功!");
  137.             },
  138.           },
  139.         },
  140.       },
  141.  
  142.       // ===== data field end =====
  143.     };
  144.   },
  145.   methods: {
  146.     // =============== Editor 事件相关 ================
  147.     // 1. 创建 Editor 实例对象
  148.     onCreated(editor) {
  149.       this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
  150.       this.$nextTick(() => {
  151.         const toolbar = DomEditor.getToolbar(this.editor);
  152.         const curToolbarConfig = toolbar.getConfig();
  153.         console.log("【 curToolbarConfig 】-39", curToolbarConfig);
  154.       });
  155.     },
  156.     // 2. 失去焦点事件
  157.     onChange(editor) {
  158.       this.$emit("change", this.html);
  159.     },
  160.  
  161.     // =============== Editor操作API相关 ==============
  162.     insertText(insertContent) {
  163.       const editor = this.editor; // 获取 editor 实例
  164.       if (editor == null) {
  165.         return;
  166.       }
  167.       // 执行Editor的API插入
  168.       editor.insertText(insertContent);
  169.     },
  170.  
  171.     // =============== 组件交互相关 ==================
  172.     // closeEditorBeforeComponent() {
  173.     //   this.$emit("returnEditorContent", this.html);
  174.     // },
  175.     closeContent(){
  176.         this.html=''
  177.     },
  178.     // ========== methods end ===============
  179.   },
  180.   mounted() {
  181.     // ========== mounted end ===============
  182.   },
  183.   beforeDestroy() {
  184.     const editor = this.editor;
  185.     if (editor == null) {
  186.       return;
  187.     }
  188.     editor.destroy();
  189.     console.log("销毁编辑器!");
  190.   },
  191. };
  192. </script>
  193. <style lang="scss" scoped>
  194. // 对默认的p标签进行穿透
  195. ::v-deep .editorStyle .w-e-text-container [data-slate-editor] p  {
  196.   margin: 0 !important;
  197. }
  198. </style>
  199. <style src="@wangeditor/editor/dist/css/style.css"></style>
  1. 自定义上传图片接口
  2.  uploadImage: {
  3.                         // 文件名称
  4.                         fieldName: "contentAttachImage",
  5.                         // server: '/api/v1/public/uploadFile',
  6.                         headers: {
  7.                             Authorization: "Bearer " + getToken(),
  8.                         },
  9.                         meta: {
  10.                             activityKey: this.relationKey,
  11.                         },
  12.                         // 单个文件的最大体积限制，默认为 20M
  13.                         maxFileSize: 20 * 1024 * 1024,
  14.                         // 最多可上传几个文件，默认为 100
  15.                         maxNumberOfFiles: 10,
  16.                         // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  17.                         allowedFileTypes: ["image/*"],
  18.                         // 跨域是否传递 cookie ，默认为 false
  19.                         withCredentials: true,
  20.                         // 超时时间，默认为 10 秒
  21.                         timeout: 5 * 1000,
  22.                          这里设置
  23.                         customUpload: async (file, insertFn) => {
  24.                             console.log(file, "file");
  25.                             let formData = new FormData()
  26.                             const sub = "order";
  27.                             formData.append('file', file)
  28.                             formData.append("sub", sub);
  29.                             formData.append("type", "1");
  30.                             let res = await getUploadImg(formData)
  31.                             insertFn(res.data.full_path, '', '');
  32.                         },
  33.                         customInsert: (res, insertFn) => {
  34.                             if (res.errno == -1) {
  35.                                 this.$message.error("上传失败!");
  36.                                 return;
  37.                             }
  38.                             // insertFn(res.data.url, "", "");
  39.                             this.$message.success("上传成功!");
  40.                         },
  41.                     },

四、格式刷功能类js文件

  1.  
  2. import {
  3.   SlateEditor,
  4.   SlateText,
  5.   SlateElement,
  6.   SlateTransforms,
  7.   DomEditor,
  8.   //   Boot,
  9. } from "@wangeditor/editor";
  10. // Boot.registerMenu(menu1Conf);
  11. import { Editor } from "slate";
  12. export default class MyPainter {
  13.   constructor() {
  14.     this.title = "格式刷"; // 自定义菜单标题
  15.     // 这里是设置格式刷的样式图片跟svg都可以，但是注意要图片大小要小一点，因为要应用到鼠标手势上
  16.     this.iconSvg = ``;
  17.     this.tag = "button"; //注入的菜单类型
  18.     this.savedMarks = null; //保存的样式
  19.     this.domId = null; //这个可要可不要
  20.     this.editor = null; //编辑器示例
  21.     this.parentStyle = null; //储存父节点样式
  22.     this.mark = "";
  23.     this.marksNeedToRemove = []; // 增加 mark 的同时，需要移除哪些 mark （互斥，不能共存的）
  24.   }
  25.   clickHandler(e) {
  26.     console.log(e, "e"); //无效
  27.   }
  28.   //添加或者移除鼠标事件
  29.   addorRemove = (type) => {
  30.     const dom = document.body;
  31.     if (type === "add") {
  32.       dom.addEventListener("mousedown", this.changeMouseDown);
  33.       dom.addEventListener("mouseup", this.changeMouseup);
  34.     } else {
  35.       //赋值完需要做的清理工作
  36.       this.savedMarks = undefined;
  37.       dom.removeEventListener("mousedown", this.changeMouseDown);
  38.       dom.removeEventListener("mouseup", this.changeMouseup);
  39.       document.querySelector("#w-e-textarea-1").style.cursor = "auto";
  40.     }
  41.   };
  42.  
  43.   //处理重复键名值不同的情况
  44.   handlerRepeatandNotStyle = (styles) => {
  45.     const addStyles = styles[0];
  46.     const notVal = [];
  47.     for (const style of styles) {
  48.       for (const key in style) {
  49.         const value = style[key];
  50.         if (!addStyles.hasOwnProperty(key)) {
  51.           addStyles[key] = value;
  52.         } else {
  53.           if (addStyles[key] !== value) {
  54.             notVal.push(key);
  55.           }
  56.         }
  57.       }
  58.     }
  59.     for (const key of notVal) {
  60.       delete addStyles[key];
  61.     }
  62.     return addStyles;
  63.   };
  64.  
  65.   // 获取当前选中范围的父级节点
  66.   getSelectionParentEle = (type, func) => {
  67.     if (this.editor) {
  68.       const parentEntry = SlateEditor.nodes(this.editor, {
  69.         match: (node) => SlateElement.isElement(node),
  70.       });
  71.       let styles = [];
  72.       for (const [node] of parentEntry) {
  73.         styles.push(this.editor.toDOMNode(node).style); //将node对应的DOM对应的style对象加入到数组
  74.       }
  75.       styles = styles.map((item) => {
  76.         //处理不为空的style
  77.         const newItem = {};
  78.         for (const key in item) {
  79.           const val = item[key];
  80.           if (val !== "") {
  81.             newItem[key] = val;
  82.           }
  83.         }
  84.         return newItem;
  85.       });
  86.       type === "get"
  87.         ? func(type, this.handlerRepeatandNotStyle(styles))
  88.         : func(type);
  89.     }
  90.   };
  91.  
  92.   //获取或者设置父级样式
  93.   getorSetparentStyle = (type, style) => {
  94.     if (type === "get") {
  95.       this.parentStyle = style; //这里是个样式对象 例如{textAlign:'center'}
  96.     } else {
  97.       SlateTransforms.setNodes(
  98.         this.editor,
  99.         { ...this.parentStyle },
  100.         {
  101.           mode: "highest", // 针对最高层级的节点
  102.         }
  103.       );
  104.     }
  105.   };
  106.  
  107.   //这里是将svg转换为Base64格式
  108.   addmouseStyle = () => {
  109.     const icon = ``; // 这里是给鼠标手势添加图标
  110.     // 将字符串编码为Base64格式
  111.     const base64String = btoa(icon);
  112.     // 生成数据URI
  113.     const dataUri = `data:image/svg+xml;base64,${base64String}`;
  114.     // 将数据URI应用于鼠标图标
  115.     document.querySelector(
  116.       "#w-e-textarea-1"
  117.     ).style.cursor = `url('${dataUri}'), auto`;
  118.   };
  119.   changeMouseDown = () => {}; //鼠标落下
  120.  
  121.   changeMouseup = () => {
  122.     //鼠标抬起
  123.     if (this.editor) {
  124.       const editor = this.editor;
  125.       const selectTxt = editor.getSelectionText(); //获取文本是否为null
  126.       if (this.savedMarks && selectTxt) {
  127.         //先改变父节点样式
  128.         this.getSelectionParentEle("set", this.getorSetparentStyle);
  129.         // 获取所有 text node
  130.         const nodeEntries = SlateEditor.nodes(editor, {
  131.           //nodeEntries返回的是一个迭代器对象
  132.           match: (n) => SlateText.isText(n), //这里是筛选一个节点是否是 text
  133.           universal: true, //当universal为 true 时，Editor.nodes会遍历整个文档，包括根节点和所有子节点，以匹配满足条件的节点。当universal为 false 时，Editor.nodes只会在当前节点的直接子节点中进行匹配。
  134.         });
  135.         // 先清除选中节点的样式
  136.         for (const node of nodeEntries) {
  137.           const n = node[0]; //{text:xxxx}
  138.           const keys = Object.keys(n);
  139.           keys.forEach((key) => {
  140.             if (key === "text") {
  141.               // 保留 text 属性
  142.               return;
  143.             }
  144.             // 其他属性，全部清除
  145.             SlateEditor.removeMark(editor, key);
  146.           });
  147.         }
  148.         // 再赋值新样式
  149.         for (const key in this.savedMarks) {
  150.           if (Object.hasOwnProperty.call(this.savedMarks, key)) {
  151.             const value = this.savedMarks[key];
  152.             editor.addMark(key, value);
  153.           }
  154.         }
  155.         this.addorRemove("remove");
  156.       }
  157.     }
  158.   };
  159.  
  160.   getValue(editor) {
  161.     // return "MyPainter"; // 标识格式刷菜单
  162.     const mark = this.mark;
  163.     console.log(mark, "mark");
  164.     const curMarks = Editor.marks(editor);
  165.     // 当 curMarks 存在时，说明用户手动设置，以 curMarks 为准
  166.     if (curMarks) {
  167.       return curMarks[mark];
  168.     } else {
  169.       const [match] = Editor.nodes(editor, {
  170.         // @ts-ignore
  171.         match: (n) => n[mark] === true,
  172.       });
  173.       return !!match;
  174.     }
  175.   }
  176.  
  177.   isActive(editor, val) {
  178.     const isMark = this.getValue(editor);
  179.     return !!isMark;
  180.     //  return !!DomEditor.getSelectedNodeByType(editor, "geshi");
  181.     // return false;
  182.   }
  183.  
  184.   isDisabled(editor) {
  185.     //是否禁用
  186.     return false;
  187.   }
  188.   exec(editor, value) {
  189.     //当菜单点击后触发
  190.     // console.log(!this.isActive());
  191.     console.log(value, "value");
  192.     this.editor = editor;
  193.     this.domId = editor.id.split("-")[1]
  194.       ? `w-e-textarea-${editor.id.split("-")[1]}`
  195.       : undefined;
  196.     if (this.isDisabled(editor)) return;
  197.     const { mark, marksNeedToRemove } = this;
  198.     if (value) {
  199.       // 已，则取消
  200.       editor.removeMark(mark);
  201.     } else {
  202.       // 没有，则执行
  203.       editor.addMark(mark, true);
  204.       this.savedMarks = SlateEditor.marks(editor); // 获取当前选中文本的样式
  205.       this.getSelectionParentEle("get", this.getorSetparentStyle); //获取父节点样式并赋值
  206.     //   this.addmouseStyle(); //点击之后给鼠标添加样式
  207.       this.addorRemove("add"); //处理添加和移除事件函数
  208.       // 移除互斥、不能共存的 marks
  209.       if (marksNeedToRemove) {
  210.         marksNeedToRemove.forEach((m) => editor.removeMark(m));
  211.       }
  212.     }
  213.     if (
  214.       editor.isEmpty() ||
  215.       editor.getHtml() == "<p><br></p>" ||
  216.       editor.getSelectionText() == ""
  217.     )
  218.       return; //这里是对没有选中或者没内容做的处理
  219.   }
  220. }

五、页面应用组件

  1.  <el-form-item label="内容">
  2.  <WangEdit v-model="form.content" ref="wangEdit"  @change="change"></WangEdit>
  3.   </el-form-item>
  4.  
  5.  
  6. // js
  7. const WangEdit = () => import("@/views/compoments/WangEdit.vue");
  8. export default {
  9.   name: "Notice",
  10.   components: {
  11.     WangEdit,
  12.   },
  13.     data(){
  14.     return{
  15.           form:{
  16.          }
  17.     }
  18.     },
  19.  
  20.  methods: {
  21.      change(val) {
  22.             console.log(val,'aa');
  23.             this.form.content=val
  24.         },
  25.      // 取消按钮
  26.     cancel() {
  27.       this.open = false;
  28.       this.form={};
  29.       this.$refs.wangEdit.closeContent();
  30.     },
  31. }
  32.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/493039
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号