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属性,可见只有一个视图区域。在仔细查看一下:

可以看出这部分有四个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。

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

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

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

版权声明:著作权归作者所有。

相关推荐

newusers命令:批量添加用户

说明newusers命令提供了批量添加或更新用户的功能。它允许从文件或者标准输入读取用户信息,如果用户已存在则更新用户的信息,如果用户不存在则创建新用户。每行定义一个用户的信息,每行的格式需要严格按照/etc/passwd文件定义的格式。格式如下:pw_name:pw_passwd:pw_uid:pw_gid:pw_gecos:pw_dir:pw_shellpw_name:用户名pw_passwd

CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件,按官方文档,先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用:impo

Maven添加Sonar插件配置

在 Maven 本地库中的 settings.xml 配置文件中的节点中添加如下配置(也可以配在pom.xml里):添加以下profile<profiles> <profile> <id>sonar</id> <activation> <activeByDefault>true</

Git添加空目录到仓库

Git是不允许添加空目录到仓库的。一般做法是在空目录里添加一个文件。通常会添加的文件如下:1、添加.gitignore,内容如下:# Ignore everything in this directory * # Except this file !.gitignore 这目的不让git忽略此文件2、添加.gitkee

Xcode 9添加项目的iOS App图标

Xcode 8及之前的版本是可以直接在iTunes Connect上添加App icon。而Xcode 9则是把App icon放置在项目的asset catalog。在Info.plist 添加key CFBundleIconName:<key>CFBundleIconName</key> &