npm 包 @ckeditor/ckeditor5-special-characters 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 @ckeditor/ckeditor5-special-characters 使用教程

在前端开发中，富文本编辑器是必不可少的组件。@ckeditor/ckeditor5-special-characters 是一个可用于 CKEditor5 中识别、插入特殊字符的 npm 包。本文将为大家详细介绍如何使用该 npm 包。

安装

使用 npm 安装 @ckeditor/ckeditor5-special-characters：

--- - ------ --------------------------------------

此外，为确保 @ckeditor/ckeditor5 版本与 @ckeditor/ckeditor5-special-characters 版本兼容，建议将两者一同安装：

--- - ------ ------------------------ --------------------------------------

引入

在 CKEditor5 构建器中，将 @ckeditor/ckeditor5-special-characters 引入：

------ ----------------- ---- ---------------------------------------------------------------

接着，通过 editorConfig.plugins 属性将其添加到 CKEditor5 的配置中：

-------------
    -------- ----------------------- --------- -- -
        -------- - ----------------- --
        -------- - ------------------- -
    - -

使用

特殊字符命令可通过 specialCharacters 值添加到 CKEditor5 工具栏中：

-------- - ------------------- -

单击工具栏中特殊字符图标，将会打开特殊字符窗口。

配置

特殊字符组件可以进行配置。例如，要添加新分类别的特殊字符，以及修改默认特殊字符分类别，将以下配置添加到 CKEditor5 的配置中：

------------------ -
    -- -------------
    ---------------- -------- -- ----------- ----------- --------------- -------------- -------- ----------------

    -- ---------------------
    ------ -
        - ------ ----- -------- ----- --------- ----- ---------------------- --------- ------- --
    -
-

在特殊字符窗口中，将显示前述添加的新特殊字符。如果想将自定义特殊字符分类别放到默认分类之外，需要单击对应分类别的 Title，在打开的面板中勾选“includeOther”。

示例代码

为便于理解，以下是完整的 CKEditor5 配置示例代码：

------ ------------- ---- ------------------------------------
------ ----------------- ---- ---------------------------------------------------------------

-------------
    -------- ----------------------- --------- -- -
        -------- - ----------------- --
        -------- - ------------------- --
        ------------------ -
            -- -------------
            ---------------- -------- -- ----------- ----------- --------------- -------------- -------- ----------------

            -- ---------------------
            ------ -
                - ------ ----- -------- ----- --------- ----- ---------------------- --------- ------- --
            -
        --
    - -
    ------- ----- -- -
        -------------- ----- --
    - --

希望本文对您学习 @ckeditor/ckeditor5-special-characters npm 包的使用有所帮助。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/5f3209b43b0ab45f74a8bd4d