前言
在前端开发中，富文本编辑器是一个常见的需求。其中，CKEditor 是一个流行的开源富文本编辑器。为了扩展 CKEditor 的功能，社区开发了许多插件，而这些插件通常以 npm 包的形式发布。本文将介绍一个 npm 包 @dilan2/ckeditor5-build-imageupload，该包扩展了 CKEditor5，添加了图片上传功能。
安装与引入
安装
安装 CKEditor5 和 @dilan2/ckeditor5-build-imageupload：
npm install --save @ckeditor/ckeditor5-build-classic @dilan2/ckeditor5-build-imageupload
引入
在前端项目中引入：
<script src="/path/to/ckeditor5-build-classic/build/ckeditor.js"></script>
在 vue 项目中引入：
-- -------------------- ---- -------
------ ------------- ---- ------------------------------------
------ ----------- ---- --------------------------------------
---------------------------- - --------------------------------- -------------
--------------------------- - -
-------- -
------ ----------- ---- ------- --------- ---- ------- --------------- --------------- -------------- ------- --------
--
------ -
-------- ------------------------ ---- ----------------------- ------------------ -------------------------
------- -------- ------------ --------------
-------------- -
-
----- ---------------------
------ ------- ----- -- -----
------ -----
--
-
----- ---------------------
------ ------- ----- -- -----
------ -----
--
-
----- ---------------------
------ ------- ----- -- ------
------ ------
--
--
------- -
------ -------- ------ -------
------------ ---- - -----
----- -----------
--
-------- --------
--
--
------ ------- -
----- -----------
----------- -
--------- -------------------
--
------ -
------ -------
--
------ -
------ -
------- -----
--
--
--------- -
--------------------------------------- ---------------------------------------- -- -
----------- - -------
--------------------------------
-------------- -- -
---------------------
---
--
--------------- -
-- ------------- -
----------------------------- -- -
----------- - -----
-------------- -- -
---------------------
---
-
--
------ -
------ --------------- -
-- ------------ -- ----- --- ---------------------- -
---------------------------
-
--
--
--注意，
toolbar.items需要包含 'imageUpload' 才能显示上传图片的按钮。
用法示例
-- -------------------- ---- -------
----------
-----
---------- ---------------- --------------- --
------
-----------
--------
------ ------------- ---- ------------------------------------
------ ----------- ---- --------------------------------------
---------------------------- - --------------------------------- -------------
--------------------------- - -
-------- -
------ ----------- ---- ------- --------- ---- ------- --------------- --------------- -------------- ------- --------
--
------ -
-------- ------------------------ ---- ----------------------- ------------------ -------------------------
------- -------- ------------ --------------
-------------- -
-
----- ---------------------
------ ------- ----- -- -----
------ -----
--
-
----- ---------------------
------ ------- ----- -- -----
------ -----
--
-
----- ---------------------
------ ------- ----- -- ------
------ ------
--
--
------- -
------ -------- ------ -------
------------ ---- - -----
----- -----------
--
-------- --------
--
--
------ ------- -
----- -----------
----------- -
--------- ------------------------
--
------ -
------ -------
--
------ -
------ -
------- -----
--
--
--------- -
-------------
-------------------------- ----------------------------
------------ -- -
----------- - -------
--------------------------------
--
------------ -- -
---------------------
---
--
--------------- -
-- ------------- -
-----------
----------
-------- -- -
----------- - -----
--
------------ -- -
---------------------
---
-
--
------ -
------ --------------- -
-- ------------ -- ----- --- ---------------------- -
---------------------------
-
--
--
--
---------进阶用法
@ckeditor/ckeditor5-build-classic 包含的 CKEditor 打包了大量的插件，如果你需要进一步定制闭包的体积，可以使用 @ckeditor/ckeditor5-dev-utils 包提供的打包工具进行定制。
安装 @ckeditor/ckeditor5-dev-utils 包：
npm install --global @ckeditor/ckeditor5-dev-utils
使用 --class 选项指定需要打包的插件：
npx --no-install ckeditor5-dev-closure --class=Classic --class=ImageUpload --class=ImageResize --class=ImageStyle
这将会生成一个唯一的 build/ckeditor.js 文件，包含你定制的插件。
总结
@ckeditor/ckeditor5-build-imageupload 是一个扩展 CKEditor5 的 npm 包，提供了图片上传功能。本文介绍了如何安装、引入和使用该包，并提供了实际用例和进阶选项。希望本文对于想使用 CKEditor 的开发者能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a22