wangeditor 组件使用指南

安装

安装wangeditor可以通过npm包管理工具完成。请在项目根目录下执行以下命令：

npm install wangeditor --save

组件代码

Wangeditor.vue

Wangeditor.ts

import { onMounted, onBeforeUnmount, ref, watch } from "vue";import WangEditor from "wangeditor";import hljs from "highlight.js";import { webScoketObject } from "@/hooks/common";export default {  name: "Wangeditor",  setup(props: any, content: any) {    const editor = ref();    let instance: any = '';    watch(      () => webScoketObject.is_click_send,      () => {        if (webScoketObject.is_click_send) {          instance.txt.clear();          webScoketObject.is_click_send = false;        }      }    );    onMounted(() => {      instance = new WangEditor(editor.value);      instance.config.languageType = [        "Bash", "C", "C#", "C++", "CSS", "Java", "JavaScript", "JSON",        "TypeScript", "Plain text", "Html", "XML", "SQL", "Go", "Kotlin",        "Lua", "Markdown", "PHP", "Python", "Shell Session", "Ruby", "typescript"      ];      instance.config.menus = [        "emoticon", "image", "code", "splitLine", "undo", "redo"      ];      instance.highlight = hljs;      instance.config.uploadImgServer = "/upload-img";      instance.config.uploadImgAccept = ["jpg", "jpeg", "png", "gif", "bmp"];      instance.config.uploadVideoServer = "/api/upload-video";      instance.config.height = 150;      instance.config.zIndex = 10;      instance.config.placeholder = "请输入您的文字！";      instance.config.colors = [        "#000000", "#eeece0", "#1c487f", "#4d80bf"      ];      instance.config.pasteIgnoreImg = true;      Object.assign(instance.config, {        onchange() {          content.emit("getWangEditorValue", instance.txt.html());        },        linkImgCallback(src: string) {          console.log("图片 src ", src);        },        onlineVideoCallback(video: string) {          console.log("插入视频内容", video);        }      });      instance.create();    });    onBeforeUnmount(() => {      instance.destroy();      instance = null;    });    return { editor };  }};