封装vue-quill-editor富文本组件

风轻_

已于 2023-12-15 16:38:49 修改

阅读量581

点赞数

文章标签： vue.js javascript 前端

于 2023-05-15 18:51:39 首次发布

本文链接：https://blog.csdn.net/weixin_48046344/article/details/130690579

版权

文章展示了如何在Vue项目中安装并引入vue-quill编辑器，包括引入样式和自定义配置，如工具栏选项和图片上传处理。同时，提到了组件的事件绑定和数据双向绑定，以及在父组件中如何监听和响应编辑器的变化。

摘要由CSDN通过智能技术生成

1、安装

npm install vue-quill

2、引入vue-quill封装quii-editor.vue

<template>
  <div class="ql-container ql-snow">
    <ImgUpload :class="refName" v-show="false" @handleSuccess="handleAvatarSuccess" :propsList="content"
      :isMultiple="true"></ImgUpload>
    <quill-editor v-model="content" :ref="refName" class="ql-editor" :disabled="isDisabled" :options="editorOption"
      @blur="onEditorBlur" @focus="onEditorFocus" @change="onEditorChange" @input="updateValue"></quill-editor>
  </div>
</template>

<script>
// 引入样式和quillEditor
import { quillEditor } from 'vue-quill-editor'
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme

// 工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline', 'strike'],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ header: 1 }, { header: 2 }],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ list: 'ordered' }, { list: 'bullet' }],
  // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ script: 'sub' }, { script: 'super' }],
  // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ indent: '-1' }, { indent: '+1' }],
  // 文本方向-----[{'direction': 'rtl'}]
  [{ direction: 'rtl' }],
  // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ size: ['small', false, 'large', 'huge'] }],
  // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ color: [] }, { background: [] }],
  // 字体种类-----[{ font: [] }]
  [{ font: [] }],
  // 对齐方式-----[{ align: [] }]
  [{ align: [] }],
  // 清除文本格式-----['clean']
  ['clean'],
  // 链接、图片、视频-----['link', 'image', 'video']
  ['image', 'video']
]

let timer = null

export default {
  components: {
    quillEditor
  },
  props: {
    value: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      refName: 'QuillEditor' + this._uid,
      isDisabled: false,
      content: '',
      editorOption: {
        placeholder: '请输入正文',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: (value) => {
                if (value) {
                  // 调用element的图片上传组件
                  document.querySelector(`.${this.refName} input`).click()
                } else {
                  this.quill.format('image', false)
                }
              }
            },
          },
        }
      }
    }
  },
  methods: {
    // 失去焦点事件
    onEditorBlur(e) {
      // console.log('onEditorBlur: ', e)
    },
    // 获得焦点事件
    onEditorFocus(e) {
      // console.log('onEditorFocus: ', e)
    },
    // 内容改变事件
    onEditorChange(e) {
      // console.log('onEditorChange: ', e)
    },
    handleAvatarSuccess(res) {
      // 获取富文本组件实例
      let {quill} = this.$refs[this.refName]
      let range = quill.selection.savedRange;
      if (!range) {
        this.$message.error('请将光标移至输入框内')
        return
      }
      // 插入图片到光标位置
      quill.insertEmbed(range.index,'image', res.url)
      quill.setSelection(range.index + 1);
    },
    updateValue() {
      if (timer) clearTimeout(timer)

      timer = setTimeout(() => {
        this.$emit('updateValue', this.content)
      }, 300)
    }
  },
  watch: {
    value(newValue) {
      this.content = newValue
    }
  }
}
</script>

<style lang="scss" scoped></style>

使用

<QuillEditor v-model="formData.detail" @updateValue="quillInput"></QuillEditor>

// 富文本
    quillInputRemark(value) {
      this.formData.remark = value
    },