oldmaster/wenjuan/src/components/editor/index.vue

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :class="showToolbar == true?'':'tooll'"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="html"
      :style="`height:${height}px;overflow-y: hidden;`"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {
  imgUp
} from '../../api/imgFlieUp'
export default {
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default: ''
    },
    read: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 300
    }
  },
  data () {
    return {
      // read:false,
      editor: null,
      showToolbar: true, // 默认显示编辑栏
      html: '',
      toolbarConfig: {
        // 不要的功能按钮
        excludeKeys: ['insertVideo', 'uploadVideo', 'insertImage'],
      },
      editorConfig: {
        readOnly: false,
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            customUpload: this.uploadImg, // 自定义上传方法
          },
        },
      },
      mode: 'default', // or 'simple'
    };
  },
  watch: {
    read: {
      handler (newVal, oldVal) {
        // this.showToolbar = !newVal;
        // this.editorConfig.readOnly = newVal;
        this.$nextTick(() => {
          this.showToolbar = !newVal;
          this.editorConfig.readOnly = newVal;
        });
      },
      immediate: true, // 添加此选项以立即执行回调
      deep: true
    },
    value (newVule, old) {
      if (newVule != '<p><br></p>') {
        this.html = this.value;
        console.log(newVule, old);
      }
    },
  },
  // computed: {
  //   computedEditorConfig() {
  //     return {
  //       readOnly: this.read,
  //       placeholder: "请输入内容...",
  //       MENU_CONF: {
  //         uploadImage: {
  //           customUpload: this.uploadImg, // 自定义上传方法
  //         },
  //       },
  //     };
  //   }
  // },
  mounted () {
    // 异步渲染编辑器
    this.$nextTick(() => {
      this.html = this.value;
    });
  },
  beforeDestroy () {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    // 上传图片
    uploadImg (file, insertFn) {
      const { type } = file;
      if (type.indexOf('image') < 0) {
        this.$message.warning('请选择上传图片');
        return false;
      }
      const formData = new FormData();
      formData.append('file', file);
      imgUp(formData)
        .then((res) => {
          console.log(res)
          if (res.code == '') {
            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(this.hostUrl + res.data.url);
          } else {
            this.$message.error(res.statusText || '上传失败');
          }
        })
        .catch(() => {
          this.$message.error('上传失败');
        });
    },
    // 上传视频
    // uploadVideo(file, insertFn) {
    //   const { type } = file;
    //   if (type.indexOf("video") < 0) {
    //     this.$message.warning("请选择上传视频");
    //     return false;
    //   }
    //   const formData = new FormData();
    //   formData.append("file", file);
    //   this.$api
    //     .uploadFile(formData)
    //     .then((res) => {
    //       if (res.status === 200) {
    //         // 从 res 中找到 url poster(封面图) ，然后插入视频
    //         insertFn(res.data.url);
    //       } else {
    //         this.$message.error(res.statusText || "上传失败");
    //       }
    //     })
    //     .catch(() => {
    //       this.$message.error("上传失败");
    //     });
    // },
    onCreated (editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange () {
      this.$emit('input', this.html);
    },
  },
};
</script>
<style scoped lang="scss">
@import url("./index.css");
::v-deep .tooll{
  .w-e-toolbar{
    display: none;
  }
}
</style>