命令

# 命令用途

现在我们已经完成了数据转换，让我们注册一个 highlight 命令。命令封装了可以由其他插件或用户界面执行的逻辑，例如通过点击编辑器工具栏中的按钮。

# 注册命令

让我们在 Highlight 函数下面创建一个新的 HighlightCommand 类，并在 src/plugin.js 中添加必要的导入。

import { Command } from 'ckeditor5';

class HighlightCommand extends Command {
    refresh() {
        // Handle state.
    }

    execute() {
        // Command logic.
    }
}

然后在 Highlight 函数的底部，添加以下代码来注册命令

editor.commands.add( 'highlight', new HighlightCommand( editor ) );

我们的命令类有两个方法

• refresh()，用于处理状态。
• execute()，用于处理逻辑。

# 命令状态

我们的插件只允许文本高亮，所以当编辑器中只选择了一个图像或表格时，我们应该禁用该命令。我们还希望在调用该命令并且所选文本已被高亮时删除高亮。

为此，我们需要一个状态来指示编辑器中的选择是否可以高亮，以及它们是否已被高亮。

命令状态由 refresh() 方法管理。此方法在模型更新时被调用，确保状态被刷新并始终是最新的。

让我们实现 refresh() 方法来更新两个命令属性

• isEnabled，指示当前选择是否允许高亮，
• value，指示选择是否已被高亮。

refresh() {
    const { document, schema } = this.editor.model;

    // Check if selection is already highlighted.
    this.value = document.selection.getAttribute( 'highlight' );

    // Check if command is allowed on current selection.
    this.isEnabled = schema.checkAttributeInSelection( document.selection, 'highlight' );
}

# 命令逻辑

现在我们有了必要的状态，我们可以添加用于更新模型的逻辑。

让我们像这样更新 execute() 方法

execute() {
    const model = this.editor.model;
    const selection = model.document.selection;
    const newValue = !this.value;

    model.change( ( writer ) => {
        if ( !selection.isCollapsed ) {
            const ranges = model.schema.getValidRanges( selection.getRanges(), 'highlight' );

            for ( const range of ranges ) {
                if ( newValue ) {
                    writer.setAttribute( 'highlight', newValue, range );
                } else {
                    writer.removeAttribute( 'highlight', range );
                }
            }
        }

        if ( newValue ) {
            return writer.setSelectionAttribute( 'highlight', true );
        }

        return writer.removeSelectionAttribute( 'highlight' );
    } );
}

对模型的所有更改都是使用 模型写入器 完成的。它的实例在传递给 model.change() 方法的回调中可用，因此我们将使用它。

在回调中，我们首先检查选择是否已折叠。与可以跨越多个字母、元素甚至块的标准选择不同，折叠的选择的范围为零，这意味着它在相同的位置开始和结束。换句话说，折叠的选择只是一个光标。

如果我们处理的是标准（非折叠）选择，我们将检查所有可以使用 highlight 属性的范围，循环遍历它们，并根据当前状态添加或删除此属性。

如果选择已折叠，我们将根据当前状态添加或删除属性。

# 测试更改

让我们测试我们的更改。在浏览器中，选择编辑器中的一些文本。然后打开控制台并运行以下代码

editor.execute( 'highlight' );

如果一切顺利，您选择的文本应该在编辑器中高亮显示。

在 CKEditor 检查器中，打开 Commands 选项卡以查看所有可用命令。highlight 命令也应该列出。

# 下一步

如果您想了解有关命令的更多信息，请参阅 命令 文档。

否则，请转到下一章，您将 了解有关更新模型 UI 的更多信息。