随着前后端分离以及富文本编辑器的广泛使用，基于 Quill 的富文本编辑器已成为了前端领域的重要技术之一。然而，Quill 默认并不支持图片的大小调整，这也给一些实际应用场景下的开发带来了困扰。而 npm 包 quill-image-resize-module 的出现，可以轻松地解决这个问题。
本文将为大家介绍npm 包 quill-image-resize-module 的使用方法及相关知识点。
安装
使用 npm 安装 quill-image-resize-module：
npm install quill-image-resize-module --save
引入
在 Quill 初始化时引入 quill-image-resize-module：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------------------
------------------------------------- -------------
----- ----- - --- ---------------- -
-------- -
-------- - ---------- ---------- --
------------ ----
--
------ ------
---其中，Quill.register 方法用于注册 quill-image-resize-module，通过设置 modules 的 imageResize 选项，我们可以在 Quill 中启用图片大小调整功能。
实现原理
quill-image-resize-module 的图片大小调整功能主要是通过在图片周围添加可拖动的拉伸控制点（resize handles），再通过监听拖动事件，实现图片的实时调整。
在 Quill 中，图片通常是嵌套在 <figure> 元素中，因此需要对 <figure> 元素进行包装处理。在 quill-image-resize-module 中，会通过重写一些 Quill 的方法以及添加 DOM 元素，实现对 <figure> 元素的包装，并在包装后的元素周围添加可拖动的拉伸控制点。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------------------
------------------------------------- -------------
----- -------------- - -
-------- --------- ------------ ---------- -- -------------
-- --------- --- -- -- -- -- -- ------ --- -- --
-- ------- -- --- -- --
-- -------- -- -- - ------------- -- --- -- ------
-- -------- -- --- -- ----
----------
--------- -- ------
--
----- ----- - --- ---------------- -
-------- -
-------- ---------------
------------ ----
--
------ ------
---
-- ----
---------------------------------------------- -- -- -
----- ----- - --------------------------------
-------------------------- --------
---------------------------- -----------
--------------
-- -- ----- ------
-------------- - -- -- -
----- ---- - ---------------
----- -------- - --- -----------
----------------------- ------
-- ----
------------------------- --------- -
-------- -
--------------- ---------------------
-
----------- -- -
----- --- - -------------
-- ----
----- ----- - ---------------------
------------------------------ -------- ---- --------------------
---
--
---总结
通过 quill-image-resize-module 的使用，我们可以轻松地实现 Quill 中图片的大小调整功能。同时，对于一些实际应用场景下的开发，这种技术也具有指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab17b5cbfe1ea0610657