【vue】vue组件之图文编辑

ps：使用该组件需另外安装vue-quill-editor插件

1.代码

<template>
  <div class="public-vue-quill-editor">
    <quill-editor v-model="value2" ref="myQuillEditor" :options="editorOption"></quill-editor>
    <!-- 自定义上传图片组件 -->
    <public-upload-image
      :btnId="btnId"
      :show="false"
      @success="customerImgSuccessHandler"
      :limit="1000"
    />
  </div>
</template>
<script>
/**
 * @editorOption quill-editor组件配置信息
 * @value 默认值
 */
import 'quill/dist/quill.snow.css'
import { quillEditor } from 'vue-quill-editor'
// import Delta from 'quill-delta'
export default {
  name: 'public-vue-quill-editor',
  data() {
    return {
      value2: ''
    }
  },
  props: {
    btnId: { type: String, default: 'customerUploadImageComponent' },
    editorOption: {
      type: Object,
      default: () => ({
        modules: {
          toolbar: [
            [],
            ['image']
          ]
        },
        theme: 'snow',
        placeholder: '请输入内容'
      })
    },
    value: { type: String, default: '' }
  },
  components: { quillEditor },
  computed: {},
  created() {

  },
  onload() { },
  onShow() { },
  watch: {
    value2: {
      handler: function (newVal, oldVal) {
        this.$emit('liveUpdate', newVal)
      },
      immediate: true,
      deep: true
    },
    value: {
      handler: function (newVal, oldVal) {
        this.value2 = JSON.parse(JSON.stringify(newVal))
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    let that = this
    this.$refs.myQuillEditor.quill
      .getModule('toolbar')
      .addHandler('image', this.customerImgInsertHandler)

    this.$refs.myQuillEditor.quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
      let ops = []
      delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') { // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
          ops.push({
            insert: op.insert
          })
        } else {
          that.$message({
            message: '不允许粘贴图片,请手动上传',
            type: 'warning'
          })
        }
      })
      delta.ops = ops
      return delta
    })
  },
  methods: {
    customerImgSuccessHandler(val) {
      if (val) {
        let imgarr = val.split(',')
        let quill = this.$refs.myQuillEditor.quill
        let length = quill.getSelection().index
        quill.insertEmbed(length, 'image', imgarr[imgarr.length - 1])
        quill.setSelection(length + 1)
      }
    },
    customerImgInsertHandler(state) {
      this.insertImg = true
      this.addRange = this.$refs.myQuillEditor.quill.getSelection()
      if (state) {
        document.getElementById(this.btnId).click()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.public-vue-quill-editor {
  .quill-editor {
    height: 450px;
  }
}
</style>

2. 引用

<public-vue-quill-editor :value="form.details" @liveUpdate="(val)=>{form.details=val}" />

3. 页面样式