什么是 @ckeditor/ckeditor5-adapter-ckfinder？
@ckeditor/ckeditor5-adapter-ckfinder 是一个用于将 Ckeditor5 和 Ckfinder 集成应用的 npm 包。Ckeditor5 是一款基于现代化的浏览器所支持的 JavaScript 编辑器，支持多种功能和具有高度的自定义性。而 Ckfinder 是一个用于管理和上传文件到服务器的工具。
安装
使用 npm 进行安装：
npm install --save @ckeditor/ckeditor5-adapter-ckfinder
如何使用
- 在 HTML 中引入 Ckeditor5。
<script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
- 然后，在你的 JS 中引入 Ckeditor5 和 Ckfinder 的 adapter。
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import ckfinderAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/adapter';
- 接着，将 Ckfinder 的 adapter 和配置添加到 Ckeditor5 中。
-- -------------------- ---- -------
-------------
------------------------------------------ -
------------- ------------------
--------- -
-- -- --------
-
--
------------ -- -
--------------------
--
------------ -- -
---------------------
---配置
在上述代码中的 ckfinder 选项中为 Ckfinder 的 adapter 提供了一组自定义配置，以满足您的特定需求。下面是一些可供您使用的常用配置：
ckfinder.options.uploadUrl
ckfinder.options.uploadUrl 选项为上传文件到服务器的 URL 地址。
ckfinder: {
options: {
uploadUrl: '/upload'
}
}ckfinder.options.resourceType
ckfinder.options.resourceType 选项指定要管理的资源类型。例如，如果该选项的值为 Images，则应用程序将仅处理图像。
ckfinder: {
options: {
resourceType: 'Images'
}
}ckfinder.options.maxFileSize
ckfinder.options.maxFileSize 选项指定允许上传的最大文件大小。
ckfinder: {
options: {
maxFileSize: 1024 * 1024 // max 1 MB
}
}完整示例
纵观全文，我们来看一下完整的示例。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---------------- ---- -------- ---------------
------- ----------------------------------------------------------------------------------
-------
------
---- ------------------
------- -----------------------------
--------
------ ------------- ---- ------------------------------------
------ --------------- ---- ---------------------------------------------------
------------------------------------------------------- -
------------- ------------------
--------- -
-------- -
------------- ---------
---------- ----------
------------ ---- - ---- -- --- - --
-
-
--
------------ -- -
--------------------
--
------------ -- -
---------------------
---
---------
-------
-------结论
通过本文，我们掌握了如何使用 @ckeditor/ckeditor5-adapter-ckfinder 包，以及它如何帮助我们集成 Ckeditor5 和 Ckfinder 应用程序。如果你是一名前端开发者，那么这些技巧和指南对你来说是非常有用的，因为它们将帮助你更快地构建更好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3208873b0ab45f74a8bd33