jin_ji_hu/src/views/components/myEditor/index.vue

<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      ref="editor"
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{height: height, overflowY: 'hidden'}"
      v-loading="Loading"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
      @onFocus="onFocus"
      @onBlur="onBlur"
    />
  </div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css"
import { DomEditor } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: '',
      Loading: false,
      toolbarConfig: {
        excludeKeys: [
          'group-video',
          'insertImage',
          'emotion',
        ],
      },
      number: 0,
      editorConfig: { 
        placeholder: '请输入内容...',
        autoFocus:false,                        // 配置编辑器默认是否 focus ，默认为 true
        backColor: "red",
        MENU_CONF: {
          uploadImage:{
            // 上传图片配置
            server: process.env.VUE_APP_BASE_API + '/common/upload',
            fieldName: "file",
            headers: {
              Authorization: "Bearer " + getToken()
            },
            customInsert(res,insertFn){
              // console.log(res);
              // console.log(insertFn);
              insertFn(res.url,res.originalFilename,res.url)
              // console.log("=======customInsert=======");
            },
            onBeforeUpload(file){
              console.log(this.Loading);
              // console.log("=======onBeforeUpload=======");
            },
            // onSuccess(file,res){
            //   console.log('onSuccessFile',file);
            //   console.log('onSuccessRes',res);
            //   console.log("=======onSuccess=======");
            // },
          }
        }, 
      },
      mode: 'default', // or 'simple'
    }
  },
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  watch: {
    value: {
      handler(val) {
        this.html = val
      },
      immediate: true,
    },
  },
  methods:{
    onCreated(editor) {
      // 
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.$nextTick(()=>{
        const toolbar = DomEditor.getToolbar(editor)
        const curToolbarConfig = toolbar.getConfig()
        console.log( curToolbarConfig.toolbarKeys ) // 当前菜单排序和分组
      })
    },
    onChange(editor){
      let html = editor.getHtml();
      // console.log("html", html);
      this.$emit('input',html);
      // console.log('content', editor.children)
    },
    onFocus(editor){
      this.$emit('onFocus');
    },
    // 光标处插入数据
    interposition(value){
      this.editor.dangerouslyInsertHtml(`<span style="color: rgb(255, 255, 255); background-color: rgb(66, 144, 247);">${value}</span><span></span>`)
    },
    onBlur(){
      this.$emit('onBlur');
    },
    destroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    },
  },
  mounted() {
  },
}
</script>
<style lang="scss" scoped>

</style>