quill-image-resize-module 位置不起作用

要让 quill-image-resize-module 生效，需要在 Quill 初始化时将该模块添加到模块列表中，并将其相应的配置选项传递给 Quill。以下是一个示例代码：

import Quill from 'quill';
import ImageResize from 'quill-image-resize-module';

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

const quill = new Quill('#editor', {
  modules: {
    imageResize: {
      displaySize: true
    }
  },
  // 其他 Quill 配置项
});

请确保 `quill-image-resize-module` 已正确安装，并且在 `node_modules` 目录下已存在。另外，如果你正在使用 Webpack 等打包工具，还需要确保你已正确配置了相关的 loader 和 plugin，以便正确地打包和引入该模块。

相关问题

nuxt 使用quill-image-resize-module

如果你想在 Nuxt.js 中使用 Quill-Image-Resize-Module，可以按照以下步骤进行操作：

1. 安装 Quill-Image-Resize-Module：

npm install quill-image-resize-module

2. 在 nuxt.config.js 中引入 Quill 和 Quill-Image-Resize-Module：

import Vue from 'vue'

if (process.client) {
  const VueQuillEditor = require('vue-quill-editor/ssr')
  Vue.use(VueQuillEditor)
  const Quill = require('quill')
  const ImageResize = require('quill-image-resize-module').default
  Quill.register('modules/imageResize', ImageResize)
}

3. 在组件中使用 Quill 编辑器：

<template>
  <div>
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorOption: {
        modules: {
          imageResize: {},
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],

            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            [{ direction: 'rtl' }],
            [{ size: ['small', false, 'large', 'huge'] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],

            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ align: [] }],

            ['clean'],
            ['link', 'image', 'video'],
          ],
        },
      },
    }
  },
}
</script>

这样就可以在 Nuxt.js 中使用 Quill-Image-Resize-Module 了。

如何quill-image-resize-module使用

Quill-image-resize-module 是一个用于 Quill 富文本编辑器的插件，用于调整插入的图片大小。以下是使用 Quill-image-resize-module 的步骤：

1. 安装插件

可以通过 npm 安装插件：

npm install quill-image-resize-module --save

2. 引入插件

在需要使用 Quill 的页面中引入插件：

import Quill from 'quill';
import ImageResize from 'quill-image-resize-module';

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

3. 配置 Quill

在 Quill 的配置中加入 imageResize 模块：

const quill = new Quill('#editor-container', {
  // ...
  modules: {
    // ...
    imageResize: {}
  }
});

4. 使用插件

在编辑器中插入图片后，通过鼠标拖拽或点击并拖动右下角的调整框来调整图片大小。

注意事项：

- Quill-image-resize-module 需要 Quill v1.3.0 或更高版本。
- 插件只能用于通过 Quill 插入的图片，不能用于通过 HTML 直接插入的图片。
- 插件默认使用 CSS3 的 transform 属性来调整图片大小，不支持 IE9 及以下版本浏览器。