Vue + vue-quill-editor（图片上传+禁止粘贴图片）

基本配置使用

封装组件

1 公共组件

<template>
  <quill-editor class='quill-editor' v-model="content" :options="editorOption" ref="myQuillEditor"></quill-editor>
</template>
<script>
// 富文本编辑器
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
	name:'Editor ',
  props: {
    value: "",
  },
  data() {
    return {
      content: this.value,
      editorOption: {
        modules: {
          toolbar: 'title'
        },
        placeholder: '请输入正文'
      }
    }
  },
  watch: {
    value(n) {
      this.content = n;
    },
    content(n) {
      this.$emit("input", n);
    },
  },
}
</script>

2 父组件引用

<template>
    <Editor v-model="data