UI 组件

CKEditor 5 框架提供了一些 UI 组件，这些组件在开发新用户界面时可能会有所帮助。所有 UI 类都带有 set() 方法，该方法用于设置组件的属性，例如标签、图标、占位符等。

本文列出了所有可用的组件及其变体。如果您想了解实现细节，请查看 UI 库指南。

# 气球

一个带有按钮的气球。

气球面板是一个浮动组件，可以根据上下文出现。它可以固定在特定位置或动态添加到插入符号位置。您可以使用它在编辑器中显示任何 UI。您可以将气球面板创建为 BalloonPanelView 类的实例。

import { BalloonPanelView, ButtonView } from 'ckeditor5';

const balloonButton = new ButtonView();
balloonButton.set( { label: 'Balloon button', withText: true } );
balloonButton.render();

const balloon = new BalloonPanelView();
balloon.render();
balloon.content.add( balloonButton );

const positions = BalloonPanelView.defaultPositions;
balloon.pin( {
    target: document.getElementById( 'balloon' ),
    positions: [ positions.southArrowNorth ]
} );

document.body.append( balloon.element );

两个位置描述了气球的放置。第一个描述了元素和固定气球之间的关系。第二个是气球箭头的方向。它创建了许多可能的气球位置。

northWestArrowSouthWest
northWestArrowSouthMiddleWest
northWestArrowSouth
northWestArrowSouthMiddleEast
northWestArrowSouthEast
northArrowSouthWest
northArrowSouthMiddleWest
northArrowSouth
northArrowSouthMiddleEast
northArrowSouthEast
northEastArrowSouthWest
northEastArrowSouthMiddleWest
northEastArrowSouth
northEastArrowSouthMiddleEast
northEastArrowSouthEast
southWestArrowNorthWest
southWestArrowNorthMiddleWest
southWestArrowNorth
southWestArrowNorthMiddleEast
southWestArrowNorthEast
southArrowNorthWest
southArrowNorthMiddleWest
southArrowNorth
southArrowNorthMiddleEast
southArrowNorthEast
southEastArrowNorthWest
southEastArrowNorthMiddleWest
southEastArrowNorth
southEastArrowNorthMiddleEast
southEastArrowNorthEast
viewportStickyNorth

# 按钮

CKEditor 5 UI 库中有两种基本按钮：标准按钮和开关。您可以使用 ButtonView 类实例化标准按钮。通过修改传递的配置，您可以获得不同的按钮变体和状态。 ButtonLabelView 类是按钮标签的默认实现。它通过 text 属性支持动态文本。

# 动作

要获得一个动作按钮，请添加 ck-button-action 类。

import { ButtonView } from 'ckeditor5';

const actionButton = new ButtonView();

actionButton.set( {
    label: 'Action button',
    withText: true,
    class: 'ck-button-action'
} );
actionButton.render();

document.getElementById( 'button-action' ).append( actionButton.element );

# 圆角

要获得一个圆角按钮，请添加 ck-rounded-corners 类。

import { ButtonView } from 'ckeditor5';

const roundedButton = new ButtonView();

roundedButton.set( {
    label: 'Rounded button',
    withText: true,
    class: 'ck-rounded-corners'
} );
roundedButton.render();

document.getElementById( 'button-rounded' ).append( roundedButton.element );

# 粗体

要获得一个粗体按钮，请添加 ck-button-bold 类。

import { ButtonView } from 'ckeditor5';

const boldButton = new ButtonView();

boldButton.set( {
    label: 'Bold button',
    withText: true,
    class: 'ck-button-bold'
} );
boldButton.render();

document.getElementById( 'button-bold' ).append( boldButton.element );

# 图标

要获得一个带有图标的按钮，请先导入它。然后在按钮上设置 icon 属性。您还可以通过提供图标的完整 XML 字符串为下拉菜单添加自定义图标。还有一些类可以用来适当地设置图标的样式。

import { ButtonView, icons } from 'ckeditor5';

const saveButton = new ButtonView();

saveButton.set( {
    label: 'Save',
    withText: false,
    icon: icons.check,
    class: 'ck-button-save'
} );
saveButton.render();

document.getElementById( 'button-icon' ).append( saveButton.element );

# 按键

要获得一个带有快捷键的按钮，请添加 keystroke 属性。要将快捷键显示在按钮上，请将 withKeystroke 属性设置为 true。如果您还添加了一个标签，它将显示在快捷键旁边。您无需担心不同操作系统上的不同快捷键——快捷键是相对于操作系统的。例如，macOS 将显示 Ctrl+I 快捷键为 ⌘+I.

import { ButtonView } from 'ckeditor5';

const keystrokeButton = new ButtonView();

keystrokeButton.set( {
    label: 'Italic',
    withText: true,
    withKeystroke: true,
    keystroke: 'Ctrl+I'
} );
keystrokeButton.render();

document.getElementById( 'button-keystroke' ).append( keystrokeButton.element );

要获得一个带有工具提示的按钮，请添加 tooltip 属性。您可以使用它在按钮悬停时显示其他信息。如果您将其设置为 true，则会显示一个标签值。

import { ButtonView } from 'ckeditor5';

const tooltipButton = new ButtonView();

tooltipButton.set( {
    label: 'Tooltip button',
    withText: true,
    tooltip: 'The content of the tooltip',
    tooltipPosition: 's'
} );
tooltipButton.render();

document.getElementById( 'button-tooltip' ).append( tooltipButton.element );

默认情况下，工具提示将出现在按钮的下方。但是，您可以使用 tooltipPosition 属性调整其位置。您可以将属性设置为

n – 北
w – 西
s – 南
e – 东
se – 东南
sw – 西南

工具提示需要 TooltipManager 才能正常工作。您需要在创建 CKEditor 时添加它。

ClassicEditor
    .create( document.getElementById( 'ui-editor' ), {
        // Editor configuration.
        //
    } )
    .then( editor => {
        this.tooltipManager = new TooltipManager( editor );
    } )
    .catch( error => {
        // Error handling.
        //
    } );

# 状态

有一些属性可以设置来获得各种按钮状态。

# 启用

按钮默认情况下是启用的，可以点击。您也可以通过添加 isEnabled 属性并将其值设置为 true 来显式设置状态。

import { ButtonView } from 'ckeditor5';

const enabledButton = new ButtonView();

enabledButton.set( {
    label: 'Enabled state',
    withText: true,
    isEnabled: true
} );
enabledButton.render();

document.getElementById( 'button-enabled' ).append( enabledButton.element );

# 禁用

要禁用按钮，请将 isEnabled 属性设置为 false。

import { ButtonView } from 'ckeditor5';

const disabledButton = new ButtonView();

disabledButton.set( {
    label: 'Disabled state',
    withText: true,
    isEnabled: false
} );
disabledButton.render();

document.getElementById( 'button-disabled' ).append( disabledButton.element );

# 开

编辑器中的一些操作可以始终处于活动状态。为了表明它们，您可以将 isOn 属性设置为 true。

import { ButtonView } from 'ckeditor5';

const onButton = new ButtonView();

onButton.set( { label: 'On state', withText: true, isOn: true } );
onButton.render();

document.getElementById( 'button-on' ).append( onButton.element );

# 开关

您需要使用不同的类来实例化开关按钮——SwitchButtonView。要使其正常工作，您还需要使用 on() 方法添加一个事件监听器。每次点击都会触发 isOn 属性的翻转。它负责打开和关闭按钮。

import { SwitchButtonView } from 'ckeditor5';

const switchButton = new SwitchButtonView();

switchButton.set( {
    label: 'Switch button',
    withText: true,
    isOn: false
} );
switchButton.render();
switchButton.on( 'execute', () => { switchButton.isOn = !switchButton.isOn } );

document.getElementById( 'button-switch' ).append( switchButton.element );

下拉菜单包含两个元素：一个按钮和一个面板。按钮展开下拉菜单。下拉面板可以容纳任何 UI 元素。

您可以使用 createDropdown() 辅助方法来创建下拉菜单。默认情况下，它使用 DropdownButtonView 类。您可以用 ButtonView 或 SplitButtonView 类替换它。

# 列表

在下拉菜单中，您可以放置一个列表。为此，您可以使用 addListToDropdown() 辅助函数。此外，您必须在将项目放入下拉菜单之前将它们添加到集合中。

import {
    addListToDropdown,
    Collection,
    createDropdown,
    Locale,
    ViewModel
} from 'ckeditor5';

const locale = new Locale();

const collection = new Collection();
collection.add( {
    type: 'button',
    model: new ViewModel( {
        label: 'Button',
        withText: true
    } )
} );
collection.add( {
    type: 'switchbutton',
    model: new ViewModel( {
        label: 'Switch button',
        withText: true
    } )
} );

const listDropdown = createDropdown( locale );
listDropdown.buttonView.set( {
    label: 'List dropdown',
    withText: true
} );
addListToDropdown( listDropdown, collection );
listDropdown.render();

document.getElementById( 'dropdown-list' ).append( listDropdown.element );

您可以使用 addToolbarToDropdown() 辅助函数将工具栏添加到下拉菜单中。在工具栏中，您可以放置按钮。

import {
    addToolbarToDropdown,
    icons,
    ButtonView,
    createDropdown,
    Locale
} from 'ckeditor5';

const locale = new Locale();

const bold = new ButtonView();
const italic = new ButtonView();

bold.set( { label: 'Bold', withText: false, icon: icons.bold  } );
italic.set( { label: 'Italic', withText: false, icon: icons.italic  } );

const buttons = [ bold, italic ];

const toolbarDropdown = createDropdown( locale );
toolbarDropdown.buttonView.set( {
    label: 'Toolbar dropdown',
    withText: true
} );
addToolbarToDropdown( toolbarDropdown, buttons );
toolbarDropdown.render();

document.getElementById( 'toolbar-button' ).append( toolbarDropdown.element );

最后，您可以将多级菜单添加到下拉菜单中。使用 addMenuToDropdown() 辅助函数来简化此过程。

import {
    addMenuToDropdown,
    createDropdown
} from 'ckeditor5';

const locale = new Locale(); // Can be `editor.locale`.
const body = new BodyCollection(); // Can be `editor.ui.view.body`.

const menuDropdown = createDropdown( locale );

// The menu items definitions.
const definition = [
    {
        id: 'menu_1',
        menu: 'Menu 1',
        children: [
            {
                id: 'menu_1_a',
                label: 'Item A'
            },
            {
                id: 'menu_1_b',
                label: 'Item B'
            }
        ]
    },
    {
        id: 'top_a',
        label: 'Top Item A'
    },
    {
        id: 'top_b',
        label: 'Top Item B'
    }
];

addMenuToDropdown( menuDropdown, body, definition );

menuDropdown.render();

document.getElementById( 'menu-dropdown' ).append( menuDropdown.element );

# 分隔按钮

除了标准按钮之外，您还可以使用分隔按钮来创建下拉菜单。它有两个可点击的部分：一个是用于主要操作，另一个是用于扩展下拉菜单以显示更多选项。

import {
    addToolbarToDropdown,
    ButtonView,
    createDropdown,
    icons,
    SplitButtonViewm,
    Locale
} from 'ckeditor5';

const locale = new Locale();

const bold = new ButtonView();
const italic = new ButtonView();

bold.set( { label: 'Bold', withText: false, icon: icons.bold  } );
italic.set( { label: 'Italic', withText: false, icon: icons.italic  } );

const buttons = [ bold, italic ];

const splitButtonDropdown = createDropdown( locale, SplitButtonView );
addToolbarToDropdown( splitButtonDropdown, buttons);
splitButtonDropdown.buttonView.set ( {
    label: 'Split button dropdown',
    withText: true
} );
splitButtonDropdown.render();

document.getElementById( 'dropdown-split-button' ).append( buttonDropdown.element );

# 状态

下拉菜单使用按钮。因此，状态和属性保持不变。

# 启用

下拉菜单中的按钮默认情况下是启用的，可以点击。您也可以通过添加 isEnabled 属性并将其值设置为 true 来显式设置状态。

import { createDropdown, Locale } from 'ckeditor5';

const locale = new Locale();

const enabledDropdown = createDropdown( locale );
enabledDropdown.buttonView.set( {
    label: 'Enabled state',
    isEnabled: true,
    withText: true
} );
enabledDropdown.render();

document.getElementById( 'dropdown-enabled' ).append( enabledDropdown.element );

# 禁用

要禁用按钮，请将 isEnabled 属性设置为 false。这将阻止下拉菜单展开。

import { createDropdown, Locale } from 'ckeditor5';

const locale = new Locale();

const disabledDropdown = createDropdown( locale );
disabledDropdown.buttonView.set( {
    label: 'Disabled state',
    isEnabled: false,
    withText: true
} );
disabledDropdown.render();

document.getElementById( 'dropdown-disabled' ).append( disabledDropdown.element );

# 对话框

点击工具栏按钮以显示对话框窗口。

对话框窗口是一个可拖动的弹出窗口，您可以将其显示在编辑器内容之上。当用户与编辑区域交互时，它会保持打开状态。您可以使用它来显示任何分离的 UI。对话框由 Dialog 插件提供。

// Necessary imports. Remember to install the packages first.
import {
    ButtonView,
    Dialog,
    View,
    Plugin,
    ClassicEditor,
    Paragraph,
    Essentials,
    Bold,
    Italic
} from 'ckeditor5';

// Create a plugin that brings a button that toggles the visibility of a dialog window.
// Read more about creating the plugins here: https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/framework/architecture/plugins.html.
class MinimalisticDialog extends Plugin {
    // Make sure the "Dialog" plugin is loaded.
    get requires() {
        return [ Dialog ];
    }

    init() {
        // Add a button to the component factory so it is available for the editor.
        this.editor.ui.componentFactory.add( 'showDialog', locale => {
            const buttonView = new ButtonView( locale );

            buttonView.set( {
                label: 'Show a dialog',
                tooltip: true,
                withText: true
            } );

            // Define the button behavior on press.
            buttonView.on( 'execute', () => {
                const dialog = this.editor.plugins.get( 'Dialog' );

                // If the button is turned on, hide the dialog.
                if ( buttonView.isOn ) {
                    dialog.hide();
                    buttonView.isOn = false;

                    return;
                }

                buttonView.isOn = true;

                // Otherwise, show the dialog.
                // Create a view with some simple content. It will be displayed as a dialog's body.
                const textView = new View( locale );

                textView.setTemplate( {
                    tag: 'div',
                    attributes: {
                        style: {
                            padding: 'var(--ck-spacing-large)',
                            whiteSpace: 'initial',
                            width: '100%',
                            maxWidth: '500px'
                        },
                        tabindex: -1
                    },
                    children: [
                        'This is the content of the dialog.',
                        'You can put here text, images, inputs, buttons, etc.'
                    ]
                } );

                // Tell the plugin to display a dialog with the title, content, and one action button.
                dialog.show( {
                    title: 'Dialog with text',
                    content: textView,
                    actionButtons: [
                        {
                            label: 'OK',
                            class: 'ck-button-action',
                            withText: true,
                            onExecute: () => dialog.hide()
                        }
                    ],
                    onHide() { buttonView.isOn = false; }
                } );
            } );

            return buttonView;
        } );
    }
}

// Create an editor instance. Remember to have an element with the `[id="editor"]` attribute in the document.
ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, MinimalisticDialog, Dialog ],
        toolbar: [ 'bold', 'italic', '|', 'showDialog' ]
    } )
    .catch( error => {
        console.error( error.stack );
    } );

请参阅有关对话框系统 API 的指南。

模态是一种特殊的对话框窗口。当它打开时，不允许与编辑器内容交互 - 必须先关闭它。您可以使用模态来强制用户交互或在某些重要情况下打断他们。

要创建模态，请使用 isModal 属性，该属性是 Dialog#show() 方法的可选属性。

// Necessary imports. Remember to install the packages first.
import {
    ButtonView,
    Dialog,
    View,
    Plugin,
    ClassicEditor,
    Paragraph,
    Essentials,
    Bold,
    Italic
} from 'ckeditor5';

// Create a plugin that brings a button which toggles the visibility of a modal window.
// Read more about creating the plugins here: https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/framework/architecture/plugins.html.
class MinimalisticModal extends Plugin {
    // Make sure the "Dialog" plugin is loaded.
    get requires() {
        return [ Dialog ];
    }

    init() {
        // Add a button to the component factory so it is available for the editor.
        this.editor.ui.componentFactory.add( 'showModal', locale => {
            const buttonView = new ButtonView( locale );

            buttonView.set( {
                label: 'Show a modal',
                tooltip: true,
                withText: true
            } );

            // Define the button behavior on press.
            buttonView.on( 'execute', () => {
                const dialog = this.editor.plugins.get( 'Dialog' );

                // If the button is turned on, hide the modal.
                if ( buttonView.isOn ) {
                    dialog.hide();
                    buttonView.isOn = false;

                    return;
                }

                buttonView.isOn = true;

                // Otherwise, show the modal.
                // First, create a view with some simple content. It will be displayed as the dialog's body.
                const textView = new View( locale );

                textView.setTemplate( {
                    tag: 'div',
                    attributes: {
                        style: {
                            padding: 'var(--ck-spacing-large)',
                            whiteSpace: 'initial',
                            width: '100%',
                            maxWidth: '500px'
                        },
                        tabindex: -1
                    },
                    children: [
                        'This is a sample content of the modal.',
                        'You can put here text, images, inputs, buttons, etc.'
                    ]
                } );

                // Tell the plugin to display a modal with the title, content, and one action button.
                dialog.show( {
                    isModal: true,
                    title: 'Modal with text',
                    content: textView,
                    actionButtons: [
                        {
                            label: 'OK',
                            class: 'ck-button-action',
                            withText: true,
                            onExecute: () => dialog.hide()
                        }
                    ],
                    onHide() { buttonView.isOn = false; }
                } );
            } );

            return buttonView;
        } );
    }
}

// Create an editor instance. Remember to have an element with the `[id="editor"]` attribute in the document.
ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, MinimalisticDialog, Dialog ],
        toolbar: [ 'bold', 'italic', '|', 'showModal' ]
    } )
    .catch( error => {
        console.error( error.stack );
    } );

请参阅有关对话框系统 API 的指南。

# 图标

CKEditor 5 库包含一组表示不同编辑器功能的图标。图标是 SVG 文件，并遵循周围文本的样式。您可以使用 IconView 类实例化图标。 content 属性存储图标的 SVG 源代码。

import { icons, IconView } from 'ckeditor5';

const icon = new IconView();

icon.content = icons.bold;
icon.render();

document.getElementById( 'icon-bold' ).append( icon.element );

CKEditor 5 功能使用不同的图标。您可以在其各自的包中找到它们。以下是所有可用图标的列表。

import { icons } from 'ckeditor5';

console.log( icons.bold );
console.log( icons.italic );
console.log( icons.underline );
console.log( icons.code );
console.log( icons.strikethrough );
console.log( icons.subscript );
console.log( icons.superscript );

console.log( icons.browserFiles );

console.log( icons.codeBlock );

console.log( icons.cancel );
console.log( icons.caption );
console.log( icons.check );
console.log( icons.cog );
console.log( icons.eraser );
console.log( icons.lowVision );
console.log( icons.textAlternative );
console.log( icons.image );
console.log( icons.alignBottom );
console.log( icons.alignMiddle );
console.log( icons.alignTop );
console.log( icons.alignLeft );
console.log( icons.alignCenter );
console.log( icons.alignRight );
console.log( icons.alignJustify );
console.log( icons.objectLeft );
console.log( icons.objectCenter );
console.log( icons.objectRight );
console.log( icons.objectFullWidth );
console.log( icons.objectInline );
console.log( icons.objectBlockLeft );
console.log( icons.objectBlockRight );
console.log( icons.objectFullSize );
console.log( icons.objectSizeLarge );
console.log( icons.objectSizeSmall );
console.log( icons.objectSizeMedium );
console.log( icons.pencil );
console.log( icons.pilcrow );
console.log( icons.quote );
console.log( icons.threeVerticalDots );

console.log( icons.fontFamily );
console.log( icons.fontSize );
console.log( icons.fontColor );
console.log( icons.fontBackground );

console.log( icons.heading1 );
console.log( icons.heading2 );
console.log( icons.heading3 );
console.log( icons.heading4 );
console.log( icons.heading5 );
console.log( icons.heading6 );

console.log( icons.indent );
console.log( icons.outdent );

console.log( icons.marker );
console.log( icons.pen );

console.log( icons.html );

console.log( icons.link );
console.log( icons.unlink );

console.log( icons.bulletedList );
console.log( icons.numberedList );
console.log( icons.todoList );

console.log( icons.media );

console.log( icons.pageBreak );

console.log( icons.paragraph );

console.log( icons.removeFormat );

console.log( icons.contentLock );
console.log( icons.contentUnlock );

console.log( icons.selectAll );

console.log( icons.sourceEditing );

console.log( icons.specialCharacters );

console.log( icons.table );
console.log( icons.tableRow );
console.log( icons.tableColumn );
console.log( icons.tableMergeCell );
console.log( icons.tableCellProperties );
console.log( icons.tableProperties );

console.log( icons.nextArrow );
console.log( icons.previousArrow );

console.log( icons.undo );
console.log( icons.redo );

console.log( icons.history );
console.log( icons.loupe );

您也可以通过提供图标的完整 XML 字符串向下拉菜单添加自定义图标

# 输入

CKEditor 5 UI 库包含一些输入元素。通常，它们用在下拉菜单和气球面板中，但您也可以在主工具栏中使用它们。

要创建它们，请使用 LabeledFieldView 类，它接受两个参数

locale 类的实例。
一个辅助函数，具体取决于您要创建的字段类型。

# 文本

要创建文本字段，请将 createLabeledInputText() 辅助函数作为第二个参数传递给 LabeledFieldView 类。

import { createLabeledInputText, LabeledFieldView, Locale } from 'ckeditor5';

const locale = new Locale();

const textInput = new LabeledFieldView( locale, createLabeledInputText );
textInput.set( { label: 'Text input', value: 'Value of the input' } );
textInput.render();

document.getElementById( 'input-text' ).append( textInput.element );

# 数字

要创建数字字段，请将 createLabeledInputNumber() 辅助函数作为第二个参数传递给 LabeledFieldView 类。

import { createLabeledInputNumber, LabeledFieldView, Locale } from 'ckeditor5';

const locale = new Locale();

const numberInput = new LabeledFieldView( locale, createLabeledInputNumber );
numberInput.set( { label: 'Number input', value: 'Value of the input' } );
numberInput.render();

document.getElementById( 'input-number' ).append( numberInput.element );

# 状态

与按钮类似，输入可以启用或禁用。属性名称保持不变。

# 已启用

默认情况下，输入已启用。您也可以通过添加 isEnabled 属性并将其值设置为 true 来显式设置状态。

import { createLabeledInputText, LabeledFieldView, Locale } from 'ckeditor5';

const locale = new Locale();

const enabledInput = new LabeledFieldView( locale, createLabeledInputText );
enabledInput.set( { label: 'Enabled state', isEnabled: true } );
enabledInput.render();

document.getElementById( 'input-enabled' ).append( enabledInput.element );

# 已禁用

要禁用输入，请将 isEnabled 属性设置为 false。它阻止输入获取用户数据。

import { createLabeledInputText, LabeledFieldView, Locale } from 'ckeditor5';

const locale = new Locale();

const disabledInput = new LabeledFieldView( locale, createLabeledInputText );
disabledInput.set( { label: 'Disabled state', isEnabled: false } );
disabledInput.render();

document.getElementById( 'input-disabled' ).append( disabledInput.element );

# 搜索

搜索组件允许您根据指定的查询过滤项目列表。它由几个组件和接口组成

要创建它，请使用主要 SearchTextView 类。
queryView 属性允许用户输入搜索查询。
infoView 属性显示有关搜索结果的附加信息。
filteredView 是一个由搜索查询过滤的视图。请记住为该视图指定 filter() 和 focus() 方法。

一些可以帮助更好地展示结果的子组件和类

SearchResultsView 组件承载过滤后的视图和信息视图。它是 SearchTextView 的子组件。
AutocompleteView 组件在用户开始键入时列出建议的结果，并在失去焦点时隐藏它们。它扩展了 SearchTextView 类。
要对列表项进行分组，您可以使用 ListItemGroupView 类。
要突出显示某些结果（或某些文本），您可以使用 HighlightedTextView 类。

import { ListView, SearchTextView, Locale } from 'ckeditor5';

const locale = new Locale();

const filteredView = new ListView();
filteredView.filter = () => {
    return {
        resultsCount: 1,
        totalItemsCount: 5
    };
};

const searchView = new SearchTextView( locale, {
    filteredView,
    queryView: {
        label: 'Label'
    }
} );

searchView.render();

document.querySelector( '.ui-search' ).append( searchView.element );

查看 AI 助手功能，了解所有 UI 部分如何在更复杂的设置中协同工作。

# 旋转器

您可以使用旋转器来指示某些加载过程。这里只有一个基本属性 - isVisible。顾名思义，它控制组件是否可见。默认值为 false。

import { SpinnerView } from 'ckeditor5';

const spinner = new SpinnerView();

spinner.set( { isVisible: true } );
spinner.render();

document.querySelector( '.ui-spinner' ).append( spinner.element );

# 文本区域

文本区域是一个用于插入长文本块的组件。您可以使用 minRows 属性指定组件的可见高度。如果您不希望组件超出特定高度，请指定 maxRows 属性。文本区域尺寸不需要固定，您可以允许用户使用 resize 选项更改尺寸。默认情况下，该属性设置为 'none'，并且不允许调整大小。

import { TextareaView } from 'ckeditor5';

const textarea = new TextareaView();

textarea.set( {
    minRows: 4,
    maxRows: 10,
    resize: 'horizontal'
} );
textarea.render();

document.querySelector( '.ui-textarea' ).append( textarea.element );

工具栏是其他组件的基础。通常，您会将其他 UI 元素放在其中。它也可以嵌套在气球或下拉菜单中。您可以使用 ToolbarView 类来实例化工具栏。

# 文本

您可以在工具栏中放置不同的 UI 元素。一个简单的文本节点就是一个例子。您可以使用 items 属性将组件添加到工具栏中。

import { ToolbarView, View,	Locale } from 'ckeditor5';

const locale = new Locale();

const text = new View();
text.element = document.createTextNode( 'Toolbar text' );

const toolbarText = new ToolbarView( locale );
toolbarText.items.add( text );
toolbarText.render();

document.getElementById( 'toolbar-text' ).append( toolbarText.element );

# 按钮

您可以在工具栏中放置任何前面列出的按钮。

import { ButtonView, ToolbarView, Locale } from 'ckeditor5';

const locale = new Locale();

const button = new ButtonView();
button.set( { label: 'Button', withText: true } );

const toolbarButton = new ToolbarView( locale );
toolbarButton.items.add( button );
toolbarButton.render();

document.getElementById( 'toolbar-button' ).append( toolbarButton.element );

# 包装

如果您添加了更多项目并且空间有限，则工具栏会自动包装。

import { ButtonView, ToolbarView, Locale } from 'ckeditor5';

const locale = new Locale();

function createButton() {
    const button = new ButtonView();
    button.set( { label: 'Button', withText: true } );
    return button;
}

const buttons = [ createButton(), createButton(), createButton() ];

const toolbarWrap = new ToolbarView( locale );
buttons.forEach( button => toolbarWrap.items.add( button ) );
toolbarWrap.render();
toolbarWrap.element.style.width = '150px';

document.getElementById( 'toolbar-wrap' ).append( toolbarWrap.element );

# 分隔符

您可以使用分隔符来划分工具栏元素，以创建逻辑上连接的组。要实例化分隔符，请使用 ToolbarSeparatorView 类。在所需组件之间添加创建的实例将在视觉上将它们分开。

import { ButtonView, ToolbarSeparatorView, ToolbarView,	Locale } from 'ckeditor5';

const locale = new Locale();

function createButton() {
    const button = new ButtonView();
    button.set( { label: 'Button', withText: true } );
    return button;
}

const separator = new ToolbarSeparatorView();

const items = [ createButton(), separator, createButton() ];

const toolbarSeparator = new ToolbarView( locale );
items.forEach( item => toolbarSeparator.items.add( item ) );
toolbarSeparator.render();

document.getElementById( 'toolbar-separator' ).append( toolbarSeparator.element );

# 多行

默认情况下，工具栏有一行。但是，它可以跨越多行。您可以使用 ToolbarLineBreakView 类实例化换行符。在所需组件之后添加创建的实例将把后面的 UI 元素放置到下一行。

import { ButtonView, ToolbarLineBreakView, ToolbarView, Locale } from 'ckeditor5';

const locale = new Locale();

function createButton() {
    const button = new ButtonView();
    button.set( { label: 'Button', withText: true } );
    return button;
}

const newLine = new ToolbarLineBreakView( locale );

const items = [ createButton(), newLine, createButton() ];

const toolbarMultiRow = new ToolbarView( locale );
items.forEach( item => toolbarMultiRow.items.add( item ) );
toolbarMultiRow.render();

document.getElementById( 'toolbar-multirow' ).append( toolbarMultiRow.element );

# 简洁

工具栏还有一个更小的版本。要获得简洁的工具栏，请将 isCompact 属性设置为 true。

import { ButtonView, ToolbarView, Locale } from 'ckeditor5';

const locale = new Locale();

const button = new ButtonView();
button.set( { label: 'Button', withText: true } );

const toolbarCompact = new ToolbarView( locale );
toolbarCompact.isCompact = true;
toolbarCompact.items.add( button );
toolbarCompact.render();

document.getElementById( 'toolbar-compact' ).append( toolbarCompact.element );

我们每天都在努力使我们的文档保持完整。您是否发现过时信息？是否缺少某些内容？请通过我们的问题跟踪器报告。

随着 42.0.0 版本的发布，我们重新编写了许多文档以反映新的导入路径和功能。感谢您的反馈，帮助我们确保文档的准确性和完整性。

UI 组件

# 气球

# 按钮

# 动作

# 圆角

# 粗体

# 图标

# 按键

# 工具提示

# 状态

# 启用

# 禁用

# 开

# 开关

# 列表

# 菜单

# 分隔按钮

# 状态

# 启用

# 禁用

# 对话框

# 图标

# 输入

# 文本

# 数字

# 状态

# 已启用

# 已禁用

# 搜索

# 旋转器

# 文本区域

# 文本

# 按钮

# 包装

# 分隔符

# 多行

# 简洁

UI 组件

# 气球

# 按钮

# 动作

# 圆角

# 粗体

# 图标

# 按键

# 工具提示

# 状态

# 启用

# 禁用

# 开

# 开关

# 下拉菜单

# 列表

# 工具栏

# 菜单

# 分隔按钮

# 状态

# 启用

# 禁用

# 对话框

# 模态

# 图标

# 输入

# 文本

# 数字

# 状态

# 已启用

# 已禁用

# 搜索

# 旋转器

# 文本区域

# 工具栏

# 文本

# 按钮

# 包装

# 分隔符

# 多行

# 简洁