在前端开发中，富文本编辑器是不可或缺的工具之一。而 CKEditor 5 是一个功能强大的富文本编辑器库，可以轻松地将富文本编辑器集成到您的 Web 应用程序中。这里我们将介绍 CKEditor 5 提供的一个强大的字体插件 npm 包 @ckeditor/ckeditor5-font 的使用方法。
安装
首先，我们需要在项目中安装 @ckeditor/ckeditor5-font 包。你可以使用 npm 或者 yarn 进行安装。
npm install --save @ckeditor/ckeditor5-font
或者
yarn add @ckeditor/ckeditor5-font
使用
安装完成后，我们需要引入该包并在我们的富文本编辑器中使用。 引入 @ckeditor/ckeditor5-font 包：
import Font from '@ckeditor/ckeditor5-font/src/font';
然后通过下面的代码将字体插件添加到你的编辑器中：
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Font, ... ],
toolbar: [ 'fontFamily', 'fontSize', ... ]
} )
.then( ... )
.catch( ... );你需要将 Font 插件添加到 plugins 配置项中，并在 toolbar 配置项中添加字体相关的按钮。
配置完毕后，你的富文本编辑器会以如下的形式展现：
配置项
除了上述例子中的 toolbar 中添加的按钮，我们还可以通过代码来自定义配置项。下面是一些你可以添加到你的编辑器中的自定义配置项。
fontFamily
可以设置允许使用的字体。默认情况下，CKEditor 5 将使用浏览器的默认字体。你可以使用 config.fontFamily.supported 来添加自定义字体。
-- -------------------- ---- -------
-------------
-------- ----------------------- --------- -- -
-------- - ----- --- --
-------- - ------------- --- --
-------- -
- ----------- -
---------- -
- ----- -------- ------- ------- ----------- --
- ----- ---------- ------- --------- ------ --
- ----- ------- ------- ------ ----------- --
- ----- --------- ------- -------- ----------- --
- ----- ------ --- ------- ------- ------ --- ------ ------ --
- ----- ---------- ------- --------- ----------- --
- ----- --------- ------- -------- ----------- --
- ----- ----------- ------- ---------- ---------- --
- ----- -------- ----- ------- -------- ---- ---------- -
-
-
--
- -
------ --- -
------- --- --fontSize
可以设置允许使用的字体大小。默认情况下，CKEditor 5 将使用下拉菜单展示默认字体大小。你可以使用 config.fontSize.supported 来添加自定义字体大小。
-- -------------------- ---- -------
-------------
-------- ----------------------- --------- -- -
-------- - ----- --- --
-------- - ----------- --- --
-------- -
- --------- -
---------- ---- --- --- --- --- ---
-
--
- -
------ --- -
------- --- --代码示例
以上是使用 @ckeditor/ckeditor5-font 包的详细教程，在此提供一个完整的代码示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- - ----- ---- --------------
------- --------------------------------------------------
-------
------
----- ---------------- --------------
--------- -------------- -----------------------
------- -------------------------
-------
--------
------ ---- ---- ---------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - ---- --
-------- - ------------- ---------- --
------- -
----------- -
---------- -
- ----- -------- ------- ------- ----------- --
- ----- ---------- ------- --------- ------ --
- ----- ------- ------- ------ ----------- --
- ----- --------- ------- -------- ----------- --
- ----- ------ --- ------- ------- ------ --- ------ ------ --
- ----- ---------- ------- --------- ----------- --
- ----- --------- ------- -------- ----------- --
- ----- ----------- ------- ---------- ---------- --
- ----- -------- ----- ------- -------- ---- ---------- -
-
--
--------- -
---------- ---- --- --- --- --- ---
-
-
- -
------ ------ -- -
------------- - -------
- -
------- ----- -- -
-------------- ----- --
- --
---------
-------
-------以上示例展示了如何完整使用 @ckeditor/ckeditor5-font 包并自定义了一些配置项。你可以根据你的实际需求进行修改和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3209b43b0ab45f74a8bd47