简介
@ckeditor/ckeditor5-ckfinder 是一个适用于 CKEditor 5 的 CKFinder 集成，可以让用户更方便地上传和管理文件及图片。
安装
在终端中输入以下命令来使用 npm 安装：
npm install --save @ckeditor/ckeditor5-ckfinder
引用
在 HTML 文件中，添加以下代码：
-- -------------------- ---- -------
---- ------------------
------- --------------------------------------------------------------------------------
--------
-------------
-------- ----------------------- --------- -- -
--------- -
-- -- -------- ------ ----------------
---------- -----------------------------
---------- -----------------------------
-- ----------
-------- -
------------- ---------
--------- ----
-- --- ------- -------- ----
-
-
- -
------- ----- -- -
-------------- ----- --
- --
---------配置项
uploadUrl
上传文件的 URL，需要根据实际情况进行配置。一般地，上传文件的 URL 应该返回一个 JSON 格式的响应，例如：
{
"uploaded": true,
"url": "https://example.com/uploads/image.png"
}openerUrl
打开 CKFinder 弹窗的 URL，需要根据实际情况进行配置。
options
更多可选属性如下所示：
language: CKFinder 的语言，默认值为'en'，也可以设置成'zh-cn'等其他语言编码值。resourceType: 要上传的资源类型，默认值为'Files'，可以设置成'Images'或'Media'等其他类型。accessKey: 版权密钥。debug: 启用调试模式。renderer: 自定义窗口的呈现方式。startupFolderExpanded: 初始文件夹是否展开。width: 弹窗宽度。height: 弹窗高度。title: 弹窗标题。toolbar: 工具栏类型。rememberLastFolder: 记住上一次访问的文件夹。
更多详细的配置项可以在 CKFinder 官网获取。
示例代码
以下是一段上传图片的示例代码：
-- -------------------- ---- -------
---- ------------------
------- --------------------------------------------------------------------------------
--------
-------------
-------- ----------------------- --------- -- -
--------- -
---------- -----------------------------
---------- -----------------------------
-------- -
--------- -----
------------- ---------
------ ----
------- ----
-------- -
----------- -------------
--
------------------- -----
-
--
-- -- ----- ------ - ------ --
------------- -
-- ----- ----------------
---------- -----------------------------
-- ------------
----------------- -------- -- -
----- -------- - -------------
----- ---------- - ----------------------- ----- --
-------------- - ---------
-- ------------
--------------------------- ---------- --
--
-- ------
------------- -------- - ---- - -
-- --------
----- ---------------- - ------------- --------------
-- - --------------------------- --------- - - -
------------ --------- --
------ ------
-
------ -----
-
-
- -
------- ----- -- -
-------------- ----- --
- --
---------在上面的示例中，我们配置了上传图片的 URL 和弹窗的 URL，还配置了将要上传的文件类型、弹窗的宽高、工具栏类型等。对于图片的上传部分，我们配置了图片上传到哪个 URL、上传成功后如何在编辑器中显示这张图片、如何验证这张图片的类型等。
注意事项
在实际使用中，我们需要根据实际情况来配置 uploadUrl 和 openerUrl 等属性，同时在上传文件时，需要注意验证文件类型和文件大小等是否符合要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3208873b0ab45f74a8bd36