编辑器 UI

# 界面部分

在本教程的上一章中，我们创建了一个命令来突出显示选定的文本。但是，必须打开控制台并运行命令很麻烦，而且绝对不是编辑器用户想要的。

让我们更新编辑器界面，以便让用户更轻松地使用。

编辑器界面由两部分组成

• 工具栏，包含用于执行各种操作的按钮、下拉菜单和其他元素，
• 编辑视图，用于输入和修改内容。

在本节中，我们将重点介绍更新工具栏。

# 创建新按钮

让我们在 src/plugin.js 文件中导入 ButtonView 构造函数

import { ButtonView } from 'ckeditor5';

然后在 Highlight 方法的底部添加以下代码

editor.ui.componentFactory.add( 'highlight', ( locale ) => {
    const button = new ButtonView( locale );
    const command = editor.commands.get( 'highlight' );
    const t = editor.t;

    button.set( {
        label: t( 'Highlight' ),
        withText: true,
        tooltip: true,
        isToggleable: true
    } );

    button.on( 'execute', () => {
        editor.execute( 'highlight' );
        editor.editing.view.focus();
    } );

    button.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );

    return button;
} );

编辑器的 UI 元素使用 componentFactory 注册，其中第一个参数是元素的名称，第二个参数是返回该元素的回调函数。

在回调函数中，我们执行以下四个步骤

• 创建 按钮 并设置一些属性，其中一个是使用 editor.t() 方法创建的翻译文本。
• 注册一个回调函数，该函数将在按下按钮时执行 highlight 命令并将焦点放回编辑视图。
• 将 isOn 和 isEnabled 按钮属性绑定到 value 和 isEnabled 命令属性。这将确保按钮只有在可以执行命令时才能点击，并且在选择已突出显示时按钮处于活动状态。
• 返回已配置的按钮。

# 注册新按钮

当我们回到浏览器时，我们会发现没有任何变化。我们刚刚创建的按钮不存在。

这是因为要看到按钮，我们需要在编辑器的配置中注册它。为此，请将 'highlight' 字符串（作为第一个参数传递给 editor.ui.componentFactory.add() 方法的名称）添加到 toolbar.items 数组中。

打开 src/main.js 并更新编辑器的配置

const editor = await ClassicEditor.create( element, {
    plugins: [
        Essentials,
        Paragraph,
        Highlight
    ],
    toolbar: {
        items: [
            'undo',
            'redo',
            'highlight' // Add this line.
        ]
    }
} );

刷新页面后，按钮应该就会出现。

# 测试更改

让我们测试一下我们的更改。在浏览器中，选择编辑器中的某些文本，然后点击工具栏中的突出显示按钮。

如果一切顺利，你所选的文本应该会在编辑器中突出显示，并且按钮应该处于活动状态。如果你再次点击按钮，选择应该会被移除，并且按钮应该不再处于活动状态。

# 下一步

恭喜你完成了本教程！

如果你想了解更多关于编辑器 UI 的信息，请查看 UI 库 文档。

否则，请继续下一章，你将 了解有关事件和可观察对象的更多信息，并更好地理解我们用来使按钮响应的 bind(...).to(...) 机制。