CKEditor5——视图添加

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

CK5视图结构

首先，我们贴上代码：

EditorUIView
   ├── "top" collection
   │    └── ToolbarView
   │        └── "items" collection
   │            ├── DropdownView
   │            │    ├── ButtonView
   │            │    └── PanelView
   │            ├── ButtonViewA
   │            ├── 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);

可以看出，只有一个body属性，可见只有一个视图区域。在仔细查看一下：

CKEditor5——视图添加

可以看出这部分有四个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部分。最后得出来的结果就是：

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

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

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

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

秒客网

CKEditor5——视图添加

CK5视图结构

相关文章