如何在NuxtJS项目中为PrimeVue Editor集成Quill Image Resize模块

1. 安装依赖 #

PrimeVue的Editor基于Quill实现，先安装Quill和ImageResize模块：

npm install quill quill-image-resize-module

2. 解决Nuxt3的CommonJS转译问题 #

quill-image-resize-module属于CommonJS模块，Nuxt3默认会出现兼容性报错，需在nuxt.config.ts中添加转译配置：

export default defineNuxtConfig({
  build: {
    transpile: ['quill-image-resize-module']
  }
})

3. 在组件中配置Editor #

在使用Editor的.vue文件里，完成模块注册并配置:modules属性：

<template>
  <Editor
    v-model="editorContent"
    :modules="editorModules"
    toolbar="full" <!-- 确保工具栏包含图片插入按钮，方便测试resize功能 -->
  />
</template>

<script setup>
import { ref } from 'vue'
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'

// 将ImageResize模块注册到Quill
Quill.register('modules/imageResize', ImageResize)

const editorContent = ref('')
const editorModules = ref({
  imageResize: {
    // 可选：自定义样式和功能模块
    displayStyles: {
      backgroundColor: '#333',
      color: '#fff',
      border: 'none'
    },
    modules: ['Resize', 'DisplaySize', 'Toolbar']
  }
})
</script>

常见问题排查 #

• 若模块不生效，检查Quill.register是否在Editor渲染前执行，确保导入顺序正确。
• 若样式异常，可调整displayStyles自定义样式，部分版本可能需要手动引入模块的CSS文件。
• 确认Editor工具栏包含图片插入按钮，否则无法插入图片触发resize功能。

内容的提问来源于stack exchange，提问作者anderson