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