特殊字符

特殊字符功能使您可以插入数学运算符、货币符号、标点符号、图形符号（如箭头或项目符号）或通常无法从键盘访问的 Unicode 字母（如变音符或其他变音符号）。该功能还支持表情符号。

# 演示

使用以下编辑器中的特殊字符工具栏按钮 打开一个 可配置 面板，其中包含一个可选择特殊字符的表格。

# 安装

在 安装编辑器 后，将该功能添加到您的插件列表和工具栏配置中

// Core plugin provides the API for the management of special characters and their categories.
// The other provide a basic set of special characters.
import { ClassicEditor, SpecialCharacters, SpecialCharactersEssentials } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ SpecialCharacters, SpecialCharactersEssentials, /* ... */ ],
        toolbar: [ 'specialCharacters', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置

默认情况下，已定义了一些特殊字符类别。您可以通过添加新类别、扩展现有类别或完全删除它们来轻松自定义 WYSIWYG 编辑器安装中可用的特殊字符。

# 添加新类别

可以使用 SpecialCharacters#addItems() 函数定义一个新的特殊字符类别。

例如，以下插件将“表情符号”类别添加到特殊字符下拉菜单。

import { ClassicEditor, SpecialCharacters, SpecialCharactersEssentials } from 'ckeditor5';

function SpecialCharactersEmoji( editor ) {
    editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', [
        { title: 'smiley face', character: '😊' },
        { title: 'rocket', character: '🚀' },
        { title: 'wind blowing face', character: '🌬️' },
        { title: 'floppy disk', character: '💾' },
        { title: 'heart', character: '❤️' }
    ], { label: 'Emoticons' } );
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [
            SpecialCharacters, SpecialCharactersEssentials, SpecialCharactersEmoji,
            // More plugins.
            // ...
        ],
        toolbar: [ 'specialCharacters', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

将上述插件添加到编辑器配置后，新类别将出现在特殊字符下拉菜单中。

以下是一个基于上面示例的演示。使用特殊字符工具栏按钮 ，然后从下拉菜单中选择“表情符号”。这将使您能够将表情符号插入内容中。

# 向现有类别添加字符

通过使用 SpecialCharacters#addItems() 函数，您还可以向现有类别添加新的特殊字符。

import { ClassicEditor, SpecialCharacters, SpecialCharactersEssentials } from 'ckeditor5';

function SpecialCharactersExtended( editor ) {
    editor.plugins.get( 'SpecialCharacters' ).addItems( 'Mathematical', [
        { title: 'alpha', character: 'α' },
        { title: 'beta', character: 'β' },
        { title: 'gamma', character: 'γ' }
    ] );
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [
            SpecialCharacters, SpecialCharactersEssentials, SpecialCharactersExtended,

            // More plugins.
            // ...
        ],
        toolbar: [ 'specialCharacters', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

以下是一个基于上面示例的演示。使用特殊字符工具栏按钮 ，然后从下拉菜单中选择“数学”。您将看到该类别现在包含由上面配置引入的附加希腊字母。

# 删除类别

特殊字符功能将每个类别作为单独的插件公开。虽然 SpecialCharactersEssentials 插件可用于方便地包含所有类别，但您可以通过添加包含特定类别的单个插件来自定义类别列表。

默认情况下，@ckeditor/ckeditor5-special-characters 包提供以下类别分组的特殊字符。

• SpecialCharactersArrows – 箭头特殊字符。
• SpecialCharactersCurrency – 货币特殊字符。
• SpecialCharactersLatin – 拉丁文特殊字符。
• SpecialCharactersMathematical – 数学特殊字符。
• SpecialCharactersText – 文本特殊字符。
• SpecialCharactersEssentials – 结合了上面列出的插件。

例如，您可以通过选择 SpecialCharactersMathematical 和 SpecialCharactersCurrency 插件来将类别限制为“数学”和“货币”。

import { ClassicEditor, SpecialCharacters, SpecialCharactersCurrency, SpecialCharactersMathematical } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [
            SpecialCharacters, SpecialCharactersCurrency, SpecialCharactersMathematical,

            // More plugins.
            // ...
        ],
        toolbar: [ 'specialCharacters', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

下面您可以看到一个基于上面示例的演示。单击特殊字符工具栏按钮 后，您会发现与本页上的其他编辑器相比，它包含的类别更少。

# 类别排序

UI 中类别的顺序由它们注册的顺序决定。但是，根据您使用编辑器的上下文，您可能希望更改此顺序，以便更容易访问常用字符。

可以使用 order 数组自定义类别顺序。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ SpecialCharacters, SpecialCharactersEssentials, ... ],
        specialCharacters: {
            order: [
                'Text',
                'Latin',
                'Mathematical',
                'Currency',
                'Arrows'
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 通用 API

SpecialCharacters 插件注册 UI 按钮组件 ('specialCharacters')。

# 贡献

该功能的源代码可在 GitHub 上的 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-special-characters 中找到。