简介
@ckeditor/ckeditor5-essentials 是一个用于创建富文本编辑器的 npm 包，基于 CKEditor 5 核心架构和插件系统开发。该包提供了一组基础插件，以支持常用的富文本编辑器功能，例如：粗体、斜体、下划线、超链接等等。
安装
使用 npm 包管理器进行安装：
npm install --save @ckeditor/ckeditor5-essentials
使用
初始化编辑器
在 HTML 文件中添加一个 div 标签作为富文本编辑器的容器。在 JavaScript 中，使用以下方式进行初始化：
-- -------------------- ---- -------
------ ------------- ---- -------------------------------------------------------
------ ---------- ---- ------------------------------------------------
--------------------- ----------------------- --------- -- -
-------- - ---------- -
- -
------ ------ -- -
------------ ------- --- ------------- ------ --
- -
------- ----- -- -
-------------- ----------- --
- --插件列表
@ckeditor/ckeditor5-essentials 包含以下基础插件：
- Bold ( 粗体 )
- Italic ( 斜体 )
- Underline ( 下划线 )
- Strikethrough ( 删除线 )
- Subscript ( 下标 )
- Superscript ( 上标 )
- Link ( 超链接 )
- HorizontalLine ( 水平线 )
自定义插件
可以通过 ckeditor 的插件系统，创建自定义插件来增强编辑器的功能，例如添加插入图片的功能：
-- -------------------- ---- -------
------ ------------- ---- -------------------------------------------------------
------ ---------- ---- ------------------------------------------------
------ ----------- ---- ----------------
--------------------- ----------------------- --------- -- -
-------- - ----------- ----------- -
- -
------ ------ -- -
------------ ------- --- ------------- ------ --
- -
------- ----- -- -
-------------- ----------- --
- --InsertImage 插件的示例代码如下：
-- -------------------- ---- -------
------ ------ ---- --------------------------------------
------ ------------- ---- ----------------------------------------------------------
------ ------- ----- ----------- ------- ------ -
------ --- ------------ -
------ --------------
-
------ -
----- ------ - ------------
------------------------------- -------------- ------ -- -
----- ---- - --- -------------- -------------- - -- -- ------- ------ - --
--------------------- - -----
--------------- ---------- -- -- -
----- ----- - ----------------------- ------- --
---------- - -------
------------ - ----------
-------------- - ---------- -
----- ---- - ------------ - --
----- ---------- - --- -------------
----------------- - --------- ----- - -
----- --- - --------------------
-------------------- ------ -- -
----- ------------ - --------------------- -------- -
---- ---
- --
--------------------------- ------------- ------------------------------- --
- --
--
------------------------- ---- --
--
--------------
- --
------ -----
- --
-
-该插件使用了 CKEditor5 图片上传插件的 UI 模块，添加了一个上传图片的按钮和事件监听，实现插入图片功能。
总结
@ckeditor/ckeditor5-essentials 是一个优秀的 npm 包，提供了常用的富文本编辑器功能的基础插件，还可以通过插件系统扩展编辑器的功能。学习使用 CKEditor5 插件系统，可以帮助我们更好地使用该富文本编辑器，以及快速地实现其他编辑器插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3208873b0ab45f74a8bd39