CKEditor 生态系统文档
Search
主页/CKEditor 5/功能

指南斜杠命令

斜杠命令功能允许您通过直接在编辑器中输入命令名称或别名来执行预定义命令。当您输入斜杠（/）时，建议的命令将显示在它旁边的面板中。您也可以在 / 后输入短语以过滤面板中的结果，并轻松找到所需的命令。

此高级功能是 生产力包 的一部分。生产力包包含在我们商业许可证中。如果您有有效的 CKEditor 5 许可证，请联系您的客户经理以查看您的资格。即使某些旧版许可证处于活动状态，也不符合独家生产力包的资格。联系我们 获取更多详细信息。

您也可以注册 CKEditor 高级功能 30 天免费试用 以测试此功能。

# 演示

输入 / 字符以调用带有预定义命令的面板。然后，通过在斜杠后输入更多字符来过滤结果列表，例如：/list。斜杠命令还可以应用在编辑器中定义的模板或样式。

CKEditor 5 中的斜杠命令

集成：模板和样式

斜杠命令开箱即用地与模板和样式功能集成。

  • 检查哪些样式和模板可用。
  • 在编辑器中输入斜杠（/）字符。
  • 在面板中找到您选择的样式或模板。

此演示展示了有限的功能集。访问 功能丰富的编辑器示例 以查看更多实际操作。

# 安装

⚠️ 新的导入路径

从 42.0.0 版本 开始，我们更改了导入路径的格式。本指南使用新的、更短的格式。如果您使用的是旧版本的 CKEditor 5，请参考 旧版设置中的包 指南。

斜杠命令功能在幕后使用 提及功能，因此请确保您也 安装它。

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

import { ClassicEditor, Mention } from 'ckeditor5';
import { SlashCommand } from 'ckeditor5-premium-features';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ SlashCommand, Mention, /* ... */ ],

        // Provide the licence key (see explanation below)
        licenseKey: '<YOUR_LICENSE_KEY>',

        // ...
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 激活功能

要使用此高级功能，您需要使用正确的凭据激活它。有关详细信息，请参考 许可证密钥和激活 指南。

# 配置

有关更多技术细节，请查看 插件配置参考。

虽然斜杠命令功能基于 提及 功能，但它不需要任何额外的配置即可工作。特别是，/ 标记以及 默认斜杠命令 列表将自动配置，这些命令将立即生效（只要它们在编辑器中启用）。

但是，如果您想修改此列表，可以通过配置轻松地 添加 或 删除 命令。还可以 限制面板中显示的命令数量。

# 添加斜杠命令

可以添加在编辑器中注册的命令和执行自定义逻辑的命令。您应该为自定义命令使用的参数是 slashCommand.extraCommands。

# 编辑器命令

要将编辑器命令添加为斜杠命令，除了 id 和 title 之外，您还需要提供 commandName 参数。以下示例展示了如何添加 bold 斜杠命令

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        slashCommand: {
            extraCommands: [
                {
                    id: 'bold',
                    title: 'Bold',
                    commandName: 'bold',
                    // ...
                },
                // ...
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 代理命令

要添加代理命令（执行自定义逻辑的命令），除了 id 和 title 之外，您还需要为 execute 参数提供一个回调函数。如果您没有为代理命令提供 execute 参数，编辑器将在用户尝试执行它时抛出错误。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        slashCommand: {
            extraCommands: [
                {
                    id: 'alert',
                    title: 'Alert',
                    execute: editor => { console.log( 'Custom logic was executed.' ) }
                    // ...
                },
                // More extra commands.
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 删除斜杠命令

要从默认斜杠命令列表中删除命令，请将其名称添加到已删除命令的数组中 (slashCommand.removeCommands)。该命令只会从 默认斜杠命令 列表中删除，而不是从编辑器中删除。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        slashCommand: {
            removeCommands: [ 'heading', 'paragraph', /* ... */ ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 限制显示的命令列表

默认情况下，所有可用的斜杠命令都显示在面板中。如果您想限制向用户显示的命令数量，请使用 slashCommand.dropdownLimit 参数。它将确定显示的项目数量。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        slashCommand: {
            dropdownLimit: 4
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 单个斜杠命令配置

有关更多技术细节，请查看 斜杠命令配置参考。

单个斜杠命令条目中还有一些可选参数，您在配置自己的命令时可能会发现它们很有用

  • aliases – 用于扩展面板中的命令过滤。
  • description – 如果标题不够描述性，则很有用。
  • icon – 用于直观地自定义自己的命令。
  • isEnabled – 用于提供自定义逻辑并决定何时在面板中显示命令。

以下是如何使用它们的示例

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        slashCommand: {
            extraCommands: [
                {
                    id: 'bold',
                    title: 'Bold',
                    execute: editor => { /* Custom logic. */ },
                    aliases: [ 'strong' ],
                    description: 'Style the text in bold.',
                    icon: customIcon,
                    isEnabled: editor => { /* Custom logic. */ }
                },
                // ...
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 排序和过滤

默认情况下，斜杠命令按标题字母顺序排序。当用户开始过滤时，顺序会发生变化。与 id 匹配的斜杠命令首先显示，然后按 title 排序，然后按 aliases 排序，最后按 description 排序。

# 与其他功能的集成

斜杠命令与 模板 和 样式 功能集成。这意味着所有模板和样式也可以使用相应的斜杠命令应用。

您可能想查看 CKEditor 5 的以下类似生产力功能

  • 自动格式化 – 使您能够快速对正在编写的文本内容进行格式化。
  • 自动文本转换 – 支持自动将 (tm) 等片段转换为 ™ 以及将 "foo" 转换为 “foo”。