在vue3的vite脚手架中怎么用呢(how to use in vite)

[cjx19961030]

No description provided.

[cjx19961030]

在vue3的vite脚手架中怎么用呢

[namegaoyang]

解决了吗 一样遇到这个问题

[mcheung610]

我也是

[yaoqq632319345]

const inject = require('@rollup/plugin-inject');

plugins: [,
  inject({
    'window.Quill': ['@vueup/vue-quill', 'Quill']
  })
]

[qikai713]

const inject = require('@rollup/plugin-inject');

plugins: [,
  inject({
    'window.Quill': ['@vueup/vue-quill', 'Quill']
  })
]

请问一下页面怎么使用呢

[pine-chen]

因为在import的时候quill没有注册到window上，

在main.js里加入以下代码即可

import { Quill } from 'vue-quill-editor'

window.Quill = Quill

这是我临时的一个解决办法，如果你可以将window.Quill = Quill通过vite注册，希望能分享一下您的写法

[weiximei]

需要使用到这个库

@rollup/plugin-inject

在 Vite 中 plugins 节点下

import inject from '@rollup/plugin-inject';
..... 省略一些代码

plugins[
    // ..... 一些其他插件配置
    inject({
      'window.Quill': ['@vueup/vue-quill', 'Quill'],
      Quill: ['@vueup/vue-quill', 'Quill'],
    }),
]

然后 Quill 富文本注册插件 ImageDrop 、imageResize

  import { QuillEditor, Quill } from '@vueup/vue-quill';
  import '@vueup/vue-quill/dist/vue-quill.snow.css';
  import { ImageDrop } from 'quill-image-drop-module';
  import imageResize from 'quill-image-resize-module';

  Quill.register('modules/ImageDrop', ImageDrop);
  Quill.register('modules/imageResize', imageResize);

最后效果

我已经写在简书上 VUE3 使用 vue-quill 富文本库、使用图片大小等插件

[lv23ji]

打包的时候有报RollupError: "default" is not exported by "node_modules/quill-image-resize-module/image-resize.min.js"吗

[rizkipadhil]

这个解决方案已经找到了吗？我在使用上述解决方案构建时仍然遇到错误。"default" 没有被 "node_modules/quill-image-resize-module/image-resize.min.js" 导出。

[weiximei]

关于打包，报错 【“default” 不是由 “node_modules/quill-image-resize-module/image-resize.min.js”导出的 】 ，只需要直接导入就可以 (文章里给出了最新代码)
import 'quill-image-resize-module/image-resize.min.js';

VUE3 使用 vue-quill 富文本库、使用图片大小等插件

[ceuer]

谢谢，提供实现方案。
我本地开发测试没有问题。
但是打包（npm run build:prod）后运行报错：
Uncaught TypeError: Cannot set properties of undefined (setting 'ImageResize')
at index-1Az4iJXG.js:113:1452
at index-1Az4iJXG.js:113:1458

请问，有没有遇到这个问题？如何解决呢？谢谢

[kyrie668]

谢谢，提供实现方案。 我本地开发测试没有问题。 但是打包（npm run build:prod）后运行报错： Uncaught TypeError: Cannot set properties of undefined (setting 'ImageResize') at index-1Az4iJXG.js:113:1452 at index-1Az4iJXG.js:113:1458 请问，有没有遇到这个问题？如何解决呢？谢谢

我也遇到这个问题，兄弟你怎么解决的

[wangrensan]

@kyrie668 @ceuer 找到原因了吗？

[Fuphoenixes]

这么写可以解决

const init = async () => {

  window.Quill = Quill;
  const { default: ImageResize } = await import('quill-image-resize-module');
  Quill.register('modules/imageResize', ImageResize);

  const quill = new Quill('#editor', {
     // xxxxx
  });
};

[Q-OldStreet]

const inject = require('@rollup/plugin-inject');

plugins: [,
  inject({
    'window.Quill': ['@vueup/vue-quill', 'Quill']
  })
]

不太行呀

[bigQY]

这么写可以解决

const init = async () => {

  window.Quill = Quill;
  const { default: ImageResize } = await import('quill-image-resize-module');
  Quill.register('modules/imageResize', ImageResize);

  const quill = new Quill('#editor', {
     // xxxxx
  });
};

这样写确实可以，还能解决这个问题

谢谢，提供实现方案。 我本地开发测试没有问题。 但是打包（npm run build:prod）后运行报错： Uncaught TypeError: Cannot set properties of undefined (setting 'ImageResize') at index-1Az4iJXG.js:113:1452 at index-1Az4iJXG.js:113:1458 请问，有没有遇到这个问题？如何解决呢？谢谢

[persistencess]

@appsflare/quill-image-resize-module用这个库，其他配置一样就行