CKEditor5 UI——UI组件

CK5提供了一个标准UI库,这个库是由@ckeditor/ckeditor5-ui实现的。

我们首先需要理解的是CK5的UI组件都是用模板来构建的,因此,我们首先明白什么是模板?UI组件在CK中又称为视图,视图是模板通过渲染后得到的。

视图

首先,我们定义一个视图:

import {View} from 'ckeditor5/src/ui';
export default class InputView extends View {
    constructor(locale) {
        super(locale);


        const bind = this.bindTemplate;


        // 定义两个可观测属性,因为InputView 继承自View,
        // View属于Observable,所以可以直接定义
        this.set({
            isEnabled: false,
            placeholder: ''
        });


        this.setTemplate({
            tag : 'input',
            attributes: {
                class: [
                    'foo',
                    bind.if('isEnabled','ck-enabled')
                ],


                placeholder: bind.to('placeholder'),
                type: 'text'
            },
            on: {
                keydown: bind.to('input')
            }
        });
    }


    setValue(newValue){
        this.element.value = newValue;
    }
}

然后我们定义一个包含以上视图的父视图

import {View} from 'ckeditor5/src/ui';
import InputView from './inputview';
export default class ParentView extends View {
    constructor(locale) {
        super(locale);
        const childA = new InputView();
        const childB = new InputView();


        this.setTemplate({
            tag: 'div',
            children: [
                childA,
                childB
            ]
        });
    }
}

最后在一个UI组件中调用

const parent = new ParentView(locale);
parent.render();
document.body.appendChild( parent.element );

最后我们可以在页面看到两个输入框,如下图所示

我们可以看到视图对应的html如上所示,注意,这部分不属于ck的编辑视图区,这点一定要注意。

我们首先来分析代码,在我们的模板中又一个placeholder属性,但是在生成的标签中却没有这属性,为啥呢,怎么样才能让这个属性数显呢?

怎么样才能修改input输入框的值?

第一步,我在ParentView中显然不能修改子视图的值,因此我需要将这两个视图导出来。

const childA = new InputView();
this.childA = childA;
childA.isEnabled = true;
const childB = new InputView();
this.childB = childB;

并且增加两个方法:

getChildA() {
    return this.childA;
}
getChildB() {
    return this.childB;
}

然后我在调用代码出增加:

parent.childA.setValue(8888888);
parent.childA.placeholder = '88888';

可以看到,我这里把A视图的相关的值已经修改,因此,大家应该能理解怎么构建视图了吧。

这里还有一点需要注意的是,如果子视图还没有渲染的时候,这个时候调用setValue()方法,这个时候会报错:

我们依旧用代码说明,在ParentView的构造函数中增加一行代码:

const childA = new InputView();
childA.setValue(8888);  //增加的代码

因为视图还没有渲染,所以设置值是无效的,那么如果我增加一个渲染方法呢?

const childA = new InputView();
childA.render();
childA.setValue(8888);

这个时候就能获得正确的值了。

因此,我们总结出来一条:

视图的方法必须在渲染后才能调用。

最后一个问题,怎么样监听input的输入事件,我的理解是可以通过on或者listenTo方法,我们还是用代码来说明:

如果在InputView视图中

this.on('input',(evt,data)=>{
        console.log('data:',data)
});

如果是在ParentView视图中

this.listenTo(childA,'input',(evt,data)=>{
        console.log(evt);
        console.log('parentView:',data);
});


this.listenTo(childB,'input',(evt,data)=>{
        console.log(evt);
        console.log('parentView:',data);
});

当我输入一些值的时候,

回调函数会执行

好了,今天的知识就是这么多了,欢迎交流和讨论。

 

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

相关推荐

CKEditor5正确添加插件的方法

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

应该知道Vue UI组件(2018年)

Element这是饿了么前端团队开源桌面端的Vue UI组件。Github star 24k+。Github地址:https://github.com/ElemeFE/element中文文档:http://element-cn.eleme.io/#/zh-CNVux国内开源的专注于移动设备端的UI组件,基于Vue和微信的WeUI开发。Github star&

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

[译]Android UI设计与样式——dp和sp

朋友们,最近我一直在做一些Android UI设计和样式的培训课程。 我想和更多观众分享。 这是我的第一个android ui设计和样式教程。 我将在这个主题上写更多的内容。 那么现在开始吧...DP, SP & Pixels作为Android开发人员,我们始终希望我们的UI设计与设备无关。