前言
在前端开发中，文本编辑器是一个必要的工具。CKEditor 是一款功能强大的文本编辑器，支持各种自定义配置和插件。而 @ckeditor/ckeditor5-editor-classic 这个 npm 包则提供了 CKEditor 5 的经典版本。
本文将详细介绍如何使用 @ckeditor/ckeditor5-editor-classic 这个 npm 包，并附带代码示例。
安装
使用 npm 安装该包：
npm install @ckeditor/ckeditor5-editor-classic
初始化
在需要使用编辑器的 HTML 页面上，创建一个空的 div 容器：
<div id="editor"></div>
在 JavaScript 中，使用下面的代码进行初始化：
-- -------------------- ---- -------
------ ------------- ---- -------------------------------------------------------
------ ---------- ---- ------------------------------------------------
------ ---- ---- --------------------------------------------
-------------
------------------------------------------ -
-------- ------------ ------
-------- ---------
------------ ------ ---- --------
--
------------ -- -
---------------------
---解释一下上面这段初始化代码：
首先，使用 ES6 的 import 语法引入 ClassicEditor、Essentials 和 Bold 这三个插件。这三个插件分别提供了编辑器的核心功能、加粗文本样式以及必要的样式和布局配置。
然后，使用
ClassicEditor.create()方法创建一个编辑器实例，并传入两个参数：第一个参数是一个 DOM 元素以及其选择器，指定编辑器要放在哪个元素中。
第二个参数是配置选项，包括要使用的插件、要显示的工具栏，以及一个占位符时编辑器为空时要显示的文本。
最后，使用
.catch()方法处理可能发生的错误。
插件
CKEditor 5 提供了大量的插件可供使用，可以用于改进编辑器的外观、样式、选项或行为。某些插件是默认开启的，有些则需要手动添加。
例如，可以使用下面的代码添加 Underline 插件：
-- -------------------- ---- -------
------ --------- ---- -------------------------------------------------
-------------
------------------------------------------ -
-------- ------------ ----- -----------
-------- -------- -------------
------------ ------ ---- --------
--
------------ -- -
---------------------
---也可以通过以下方式启用默认的插件：
-- -------------------- ---- -------
-------------
------------------------------------------ -
-- -------- --- -- --------
-- -------- ----------- --------- ----- ------- ----------- --------- ----------- -------- ------ ------------- ----------- ------------- ------------ ------- ----- ----- ----------- ---------- ---------------- ------ --------------
-------- ----------- ---- ------- --------- -------
--
------------ -- -
---------------------
---事件
CKEditor 5 中可以使用 editor.addEventListener() 方法绑定各种事件。以下是一些可能会用到的事件：
change: 编辑器内容变化时触发。blur: 编辑器失去焦点时触发。focus: 编辑器获得焦点时触发。init: 编辑器初始化完成时触发。
例如，在编辑器内容变化时，可以在控制台输出当前内容的 HTML：
-- -------------------- ---- -------
-------------
------------------------------------------ -
-------- ------------ ------
-------- ---------
------------ ------ ---- --------
--
------------ -- -
--------------------------------------- -- -- -
------------------------------
---
--
------------ -- -
---------------------
---自定义插件
如果没有现成的插件满足需求，则可以编写自定义插件。可以通过下面的代码引入一个自定义插件：
-- -------------------- ---- -------
------ -------- ---- --------------
-------------
------------------------------------------ -
-------- -----------
-------- --------------
------------ ------ ---- --------
--
------------ -- -
---------------------
---其中，MyPlugin 指的是定义在 my-plugin.js 中的自定义插件。下面是一个自定义插件的示例代码：
-- -------------------- ---- -------
------ ------ ---- --------------------------------------
------ ------- ----- -------- ------- ------ -
------ --- ---------- -
------ - ---------- ---- --
-
------ -
----- ------ - ------------
----- - - ---------
------------------------------------------- ------ -- -
----- ------ - ---------------------------------
----------- - ---------
------------------ - --- --------
-------------------------------- -- -- -
-------------------------- -- -
----- ------- - ----------------------------------
---------------------- ----------------------------------------------------
---
---
------ -------
---
-
-这个插件包含一个按钮，点击该按钮会将一个段落插入到光标所在的位置。在使用自定义插件时，记得将其添加到 requires 数组中。
结语
到此为止，您已经了解了如何使用 @ckeditor/ckeditor5-editor-classic 这个 npm 包。希望这篇文章对您有所帮助，同时也建议您进一步学习 CKEditor 5 相关的知识，以便更好地使用其提供的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3208873b0ab45f74a8bd38