CKEditor5——视图添加

上一节我们介绍了在CK5中UI组件的一些基本使用，今天我们继续UI部分的学习，如何添加一个UI视图到CK5？

CK5视图结构

首先，我们贴上代码：

EditorUIView
   ├── "top" collection
   │    └── ToolbarView
   │        └── "items" collection
   │            ├── DropdownView
   │            │    ├── But<comment-start name="ee7e5b9596b47a9c314cb1c10e82cf6a7:5bdc5"></comment-start>tonVi<comment-end name="ee7e5b9596b47a9c314cb1c10e82cf6a7:5bdc5"></comment-end>ew
   │            │    └── PanelView
   │            ├── Button<comment-start name="ec300c097f3a00a6eef885a8ecee23d87:f2d02"></comment-start>View<comment-end name="ec300c097f3a00a6eef885a8ecee23d87:f2d02"></comment-end>A
   │            ├── ButtonViewB
   │            └── ...
   ├── "main" collection
   │    └── InlineEditableUIView
   └── "body" collection
        ├── BalloonPanelView
        │    └── "content" collection
        │        └── ToolbarView
        ├── BalloonPanelView
        │    └── "content" collection
        │        └── ...
        └── ...

从上面我们可以看出，CK5的UI中包括三部分，第一部分叫做top，第二部分叫做main，第三部分叫做body。不同累心的CKEditor组合上面不同部分。比如：

BoxedEditorUiView就包含了top和main,而BalloonEditorUiView就只包含main

下面是我使用的BalloonEditorUiView中打印出来的UI

console.log('BoxedEditorUiView:',editor.ui.view);

<figure class="image"></figure>可以看出，只有一个body属性，可见只有一个视图区域。在仔细查看一下：

可以看出这部分有四个view，我这里介绍最后一个view是怎么添加进去的？

代码如下：

const parent = new ParentView(locale);
    // parent.render();
    // document.body.appendChild( parent.element );
    // parent.childA.placeholder = '88888';

    const toolbar = new ToolbarView(locale);
    const buttonFoo = new ButtonView(locale);
    const buttonBar = new ButtonView(locale);
    const button = new DecorateButton();

    buttonFoo.set( {
        label: 'Foo',
        withText: true
    } );

    buttonBar.set( {
        label: 'Bar',
        withText: true
    } );

    toolbar.items.add( buttonFoo );
    toolbar.items.add( buttonBar );
    toolbar.items.add(parent);
    toolbar.items.add(button);
    buttonFoo.delegate( 'execute' ).to( toolbar );
    buttonBar.delegate( 'execute' ).to( toolbar );

    toolbar.on( 'execute', evt => {
        console.log( `The "${ evt.source.label }" button was clicked!` );
    } );
    // toolbar.render();
    console.log('BoxedEditorUiView:',editor.ui.view);
    editor.ui.view.body.add(toolbar);

这里我定义了四个button，有两个是框架提供的，有两个是我自己定义的。然后把他们添加到ToolbatView，最后把ToolbarView添加到视图的body部分。最后得出来的结果就是：

<figure class="image"></figure>最下面的toolbar就是我新增的一个View视图。同时我也添加了一些事件，把两个button的事件代理到toolbar。

在实际的应用中，我们一般都是将这些事件代理到命令，通过命令来完成一些基本功能。

我们以后会用一个例子来说明此问题。

今天的学习就到这里。欢迎交流。