敲碎时间,铸造不朽的个人专栏
上一篇

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);
});

当我输入一些值的时候,

回调函数会执行

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

 

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

X

欢迎加群学习交流

联系我们