CKEditor5 Observables

在CKEditor5中除了事件系统外，还有另一个重要的系统就是可观测对象,俗称Observable对象。此对象的属性是可观测的，一段对象的属性发生改变，将会触发一个事件，监听此事件的代码片段可以做出一些相应的操作。

 

CK5定义一个可观测对象

import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
import mix from '@ckeditor/ckeditor5-utils/src/mix';

export default class SomeClass {
  constructor(){
      this.set('value',false);
  }
}

mix( SomeClass, ObservableMixin );

然后使用这个类的代码如下：

const someClass = new SomeClass();
someClass.on( 'change:value', ( evt, propertyName, newValue, oldValue ) => {
     console.log(
          `#${ propertyName } has changed from "${ oldValue }" to "${ newValue }"`
     );
 } );
 someClass.value = true;

打印出来的日志信息如下：

可以知道SomeClass对象的value属性从false变成了true，因此我们自己创建了一个自定义可观测对象。

 

可观测对象在UI中的使用

我们首先定义一个Button

import {View} from 'ckeditor5/src/ui';
export default class Button extends View {
    constructor(){
        super();
        this.type = 'button';


        const bind = this.bindTemplate;


        // this.label is observable but undefined.
        this.set( 'label' );


        // this.isOn is observable and false.
        this.set( 'isOn', false );


        // this.isEnabled is observable and true.
        this.set( 'isEnabled', true );
    }
}

然后使用这个Button

const view = new Button();

view.on( 'change:label', ( evt, propertyName, newValue, oldValue ) => {
    console.log(
        `#${ propertyName } has changed from "${ oldValue }" to "${ newValue }"`
    );
} )

view.label = 'Hello world!'; // -> #label has changed from "undefined" to "Hello world!"
view.label = 'Bold'; // -> #label has changed from "Hello world!" to "Bold"

view.type = 'submit';

从日志信息可以看出，button的属性label是可观测的，而type属性是不可观测的。

小知识：这里每次调用set方法来设置可观测属性是比较麻烦的，CK5提供了一下方法来简化使用：

this.set( {
   label: undefined,
   isOn: false,
   isEnabled: true
} );