Vue3使用vue-quill富文本图片缩放、拖拽功能

不甜呐

已于 2023-06-13 15:45:00 修改

阅读量3.6k

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue 前端

于 2023-06-13 15:41:28 首次发布

@不甜呐

本文链接：https://blog.youkuaiyun.com/weixin_55992854/article/details/131170806

文章介绍了如何在Vue项目中使用@vueup/vue-quill组件，集成包括富文本编辑、图片拖拽和缩放等功能。通过安装相关插件并注册到Quill，设置编辑器选项，实现了一个具备多种工具栏功能和自定义样式的文本编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图

安装下面几个插件

富文本

npm install @vueup/vue-quill --save

图片拖拽

npm install quill-image-drop-module --save

图片缩放

npm install quill-blot-formatter --save

Quill注册插件 ImageDrop、BlotFormatter

import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { QuillEditor, Quill } from '@vueup/vue-quill'

import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)

import BlotFormatter from 'quill-blot-formatter'
Quill.register('modules/blotFormatter', BlotFormatter)

完整代码

<template>
  <QuillEditor
    ref="editorRef"
    contentType="html"
    v-model:content="content"
    :options="editorOption"
    style="height: 300px; width: 100%"
  />
</template>

<script lang="ts">
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { QuillEditor, Quill } from '@vueup/vue-quill'

import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)
import BlotFormatter from 'quill-blot-formatter'
Quill.register('modules/blotFormatter', BlotFormatter)

import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  components: { QuillEditor },
  setup() {
    const state = reactive({
      content: ``,
      // 富文本编辑器配置
      editorOption: {
        modules: {
          // 工具栏
          toolbar: [
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image', 'link', 'video'] // 图片、链接、视频
          ],
          // 图片拖拽
          imageDrop: true,
          // 图片缩放
          blotFormatter: {
            // overlay: {
            //    style: {
            //        border: '2px solid red',
            //    }
            // },
            toolbar: {
              mainClassName: 'blot-formatter__toolbar'
            }
          }
        },
        // 主题
        theme: 'snow', // snow: 有工具栏  bubble:只有文本域的
        placeholder: '请输入内容',
        // 是否只读
        readyOnly: false
      }
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

如有错误，欢迎随时雅正。