wangeditor文本编辑器

html将wangeditorcss引入

<template>
    <div style="border: 1px solid #ccc; margin-top: 10px">
        <!-- 工具栏 -->
        <Toolbar id="main" style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
        <!-- 编辑器 -->
        <template>
            <Editor style="height: 400px; overflow-y: hidden" :defaultConfig="editorConfig" ref="editor" id="editor"
                v-model="editorHtml" @onChange="onChange" @onCreated="onCreated" />
        </template>
    </div>
</template>
    
<script>
import WangEditor from "./WangEditor.js";

export default WangEditor;
</script>

<style src="@wangeditor/editor/dist/css/style.css">
</style>
<style>
</style>

js部分

引入

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IToolbarConfig,ISelectMenu,IDomEditor,DomEditor, Boot,IModuleConf} from "@wangeditor/editor";

export default{
  name: "WangEditor",
  components: { Editor, Toolbar },
  props: {
    propsHtml: {
      type: String,
      default: ""
    },
  },
data() {
    return {
      editorHtml: "",
      editor: null,
      toolbarConfig: {
       //当toolbarKeys不写具体的工具栏配置时显示的是全部的配置, 如有需要自己配置可以按照下面的写法,（以下并不是全部配置）
        toolbarKeys: [
          "headerSelect",
          "bold",
          "underline",
          "italic",
          {
            key: "group-more-style",
            title: "更多",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0     153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
            menuKeys: ["through", "code", "sup", "sub", "clearStyle"]
          },
          "color",
          "bgColor",
          "|",
          "fontSize",
          "fontFamily",
          "lineHeight",
          "bulletedList",
          "numberedList",
          "todo",
          {
            key: "group-justify",
            title: "对齐",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
            menuKeys: [
              "justifyLeft",
              "justifyRight",
              "justifyCenter",
              "justifyJustify"
            ]
          },
          {
            key: "group-indent",
            title: "缩进",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
            menuKeys: ["indent", "delIndent"]
          },
          "emotion",
          "insertLink",
          {
            key: "group-image",
            title: "图片",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
            menuKeys: ["insertImage", "uploadImage"]
          },
          {
            "key": "group-video",
            "title": "视频",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path 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\"></path></svg>",
            "menuKeys": [
              "insertVideo",
              "uploadVideo"
            ]
          },
          "|",
          "fullScreen"
        ]
      },
      toolbar: {},
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            customUpload: this.customUpload // 上传图片
          },
          uploadVideo: {
            customUpload: this.customUploadvideo  // 上传视频
          }
        }
      },
      html: ""
    };
  },
  methods: {
    async customUploadvideo(file, insertFn) {
      let formData = new FormData();
      formData.append("image_file", file);
      formData.append("image_type", 'video');
      if (formData) {
         let res = awwit api.name(formData)    //name为对应的接口名称
         insertFn(res) // 将获取到的url插入到文本编辑器中
      }
    },
    async customUpload(file, insertFn) {
      let formData = new FormData();
      formData.append("image_file", file);
      formData.append("image_type", 'image');
      if (formData) {
         if (formData) {
         let res = awwit api.name(formData)    //name为对应的接口名称
         insertFn(res) // 将获取到的url插入到文本编辑器中
      }
      }
    },
    // ----------------  工具栏和编辑器start------------
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
      this.$nextTick(() => {
        if (editor) {
          this.toolbar = DomEditor.getToolbar(editor);
          const toolsConfig = this.editor.getConfig();
          console.log(this.editorConfig, 'this.editorConfig')
          console.log("editor", editor);
          editor.setHtml(this.propsHtml);
          // console.log('this.toolbar.config.', toolsConfig.MENU_CONF.uploadImage)
        }
      });
    },

    onChange(editor) {
      this.editor = editor;
      // console.log(this.form.content, 'editor.getHtml()')
      this.$emit("changeEditor", editor.getHtml());
    },

    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;
      // console.log(editor.getText()); // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;
      this.form.content = editor.getHtml();
      this.$emit("changeEditor", editor.getHtml());
      console.log(editor.getHtml(), "wewdrjewuifh"); // 执行 editor API
    },

    withBreakAndDelete(editor) {
      const { insertBreak, deleteBackward } = editor // 获取当前 editor API
      const newEditor = editor
      // 重写 insertBreak 换行
      newEditor.insertBreak = () => {
        // if: 是 ctrl + enter ，则执行 insertBreak
        insertBreak()
        // else: 则不执行换行
        return
      }
      // 重写 deleteBackward 向后删除
      newEditor.deleteBackward = unit => {
        // if： 某种情况下，执行默认的删除
        deleteBackward(unit)
        // else: 其他情况，则不执行删除
        return
      }
      // 返回 newEditor ，重要！
      return newEditor
    },
    // ----------------  工具栏和编辑器end------------
  },

  beforeDestroy() {
    
      if (this.editor == null) return;
    // console.log(this.editor, this.toolbar)
       this.toolbar.config.insertKeys = {}
        this.editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  }

}