CKEditor5——视图添加

时间:2022-06-01 17:38:00

上一节我们介绍了在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);
CKEditor5——视图添加

可以看出,只有一个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部分。最后得出来的结果就是:

CKEditor5——视图添加

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

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

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

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