在前端开发中，图片无疑是一个非常重要的资源。但是在使用富文本编辑器 Quill 时，由于其默认不支持图片大小的调整，很多开发者就需要自己编写相关的代码进行调整。
而这时，就可以借助到 npm 包 @gzzhanghao/quill-image-resize-module，它是一个专门为 Quill 富文本编辑器打造的插件，可以方便地对富文本编辑器中的图片进行大小的调整。本文就将详细介绍该 npm 包的使用教程。
安装
首先，我们需要安装 @gzzhanghao/quill-image-resize-module 这个 npm 包。你可以在终端中使用以下命令来进行安装：
npm install --save @gzzhanghao/quill-image-resize-module
引入
安装完成后，我们需要在项目中引入该 npm 包。可以直接在脚本中导入相关文件：
import ImageResize from '@gzzhanghao/quill-image-resize-module';
注册
引入后，我们需要在 Quill 中注册该插件。在 Quill 初始化的地方，可以通过以下代码进行注册：
Quill.register('modules/imageResize', ImageResize);请注意，'modules/imageResize' 中的 imageResize 为插件名称，可以自定义，但是需要保证其在 Quill 中唯一。
配置
在注册插件之后，我们还需要对其进行配置。可以通过以下代码进行配置：
const quill = new Quill('#editor', {
modules: {
imageResize: {
displaySize: true
}
}
});其中，'#editor' 为编辑器的容器选择器。displaySize 表示是否在调整图片大小时显示图片的实际大小。
使用
使用 @gzzhanghao/quill-image-resize-module 插件非常简单。只需要在 Quill 中添加图片，然后就可以拖拽图片调整其大小了。
// 添加图片 const range = this.quill.getSelection(); this.quill.insertEmbed(range.index, 'image', imgUrl);
示例代码
以下是一个完整的示例代码，展示了如何使用 @gzzhanghao/quill-image-resize-module 插件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ ------------
----- --------------------------------------------------- -----------------
------- ------------------------------------------------------
------- ------------------------------------------------------------------------------
-------
------
---- ------------
-------- ----------
------
--------
----- ------ - --- ---------------- -
-------- -
-------- -
-- --------- --- -- -- ------ ---
-------- --------- ------------ ----------
-- -------- -- -- - ------------- -- ---
----------
--
------------ -
------------ ----
-
--
------ ------
---
---------
-------
-------通过以上步骤，我们就可以轻松地在 Quill 富文本编辑器中添加和调整图片了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cd881e8991b448da780