CKEditor 5 是一款非常流行的富文本编辑器，它可以帮助我们在网页应用中实现富文本编辑的功能。而 @ckeditor/ckeditor5-code-block 就是 CKEditor 5 中的一个 npm 包，它可以添加代码块的支持，方便我们在网页中编辑代码。
本文将介绍 @ckeditor/ckeditor5-code-block 的使用方法，包括安装、配置、调用和扩展等内容。
安装
要使用 @ckeditor/ckeditor5-code-block，我们首先需要在项目的根目录下使用 npm 安装它：
$ npm install --save @ckeditor/ckeditor5-code-block
配置
安装完 @ckeditor/ckeditor5-code-block 后，我们需要在 CKEditor 5 的配置中添加代码块的支持。可以在 CKEditor 5 的官方文档中找到完整的配置方法，这里只介绍如何添加代码块的支持。
-- -------------------- ---- -------
------ ------------- ---- -------------------------------------------------------
------ --------------- ---- -----------------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - --------------- --
-------- - ---------- ---- ------- --------- ---- ----------- -
- -
------- ----- -- -
-------------- ----- --
- --在上面的代码中，我们使用了 @ckeditor/ckeditor5-editor-classic 和 @ckeditor/ckeditor5-code-block 两个 npm 包，其中 @ckeditor/ckeditor5-editor-classic 提供了经典的 CKEditor 5 编辑器，@ckeditor/ckeditor5-code-block 提供了代码块的支持。
在 create 方法的第二个参数中，我们将 CodeBlockPlugin 添加到 plugins 数组中，以启用代码块的支持。在 toolbar 中，我们添加了一个名为 CodeBlock 的控件，以便用户可以方便地插入代码块。
调用
添加了代码块的支持后，用户在编辑器中插入一个代码块就很简单了。只需要点击 CodeBlock 控件，就会弹出一个对话框，在对话框中输入代码内容即可。
下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- - ---- -------------
------- ---------------------------------------------------------------------------
-------
------
--------- -----------------------
--------
------ ------------- ---- -------------------------------------------------------
------ --------------- ---- -----------------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - --------------- --
-------- - ---------- ---- ------- --------- ---- ----------- -
- -
------- ----- -- -
-------------- ----- --
- --
---------
-------
-------扩展
如果默认的代码块插件功能不能满足我们的需求，我们可以通过扩展插件来添加更多功能。下面是一个简单的示例，演示了如何将代码块的语言切换为 Python：
-- -------------------- ---- -------
------ ------ ---- --------------------------------------
------ ------- ----- --------------------- ------- ------ -
------ --- ------------ -
------ ------------------
-
------ -
--------------------------------------- ------ -- -
----- ---------- - ----------- ---------------------------------------------- ----- - --
--- - ----- --------- -- ---------- - -
-- - ----------------------- --------------- - --- -------- - -
-------------------- -------- -------------- --------- --
-
-
- --
-
-在上面的代码中，我们创建了一个名为 CodeBlockPythonPlugin 的插件，并将 Python 语言设置为代码块的默认语言。在 init 方法中，我们遍历文档中的所有代码块，如果代码块的语言是 Python，就将其 class 属性设置为 lang-python。
要在配置中启用这个插件，只需要将 CodeBlockPlugin 替换为 CodeBlockPythonPlugin：
-- -------------------- ---- -------
-- ---
------ --------------------- ---- ---------------------
-------------
-------- ----------------------- --------- -- -
-------- - --------------------- --
-------- - ---------- ---- ------- --------- ---- ----------- -
- -
------- ----- -- -
-------------- ----- --
- --结论
@ckeditor/ckeditor5-code-block 是 CKEditor 5 中的一个非常有用的插件，它可以帮助我们在网页应用中实现代码块编辑的功能。通过本文的介绍，你应该能够了解如何安装、配置、调用和扩展 @ckeditor/ckeditor5-code-block 的功能。希望这篇文章对你有所帮助，让你能够写出更好的网页应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3209b43b0ab45f74a8bd45