ckeditor5/core：context、plugincollection和Collection

Provides a common, higher-level environment for solutions that use multiple Editor editors
or plugins that work outside the editor. Use it instead of Editor.create Editor.create()
in advanced application integrations.

Config

ckeditor5-utils下Config是一种类似于lodash get效果的类，可以通过get(obj, 'a.b.c')或set(obj, 'a.b.c', 123)来获取或设置对象obj={a : { b: {c: 1}}}，用来封装或操作配置。如：

let config = new Config( {
    creator: 'inline',
    language: 'pl',
    resize: {
        minHeight: 300,
        maxHeight: 800,
        icon: {
            path: 'xyz'
        }
    },
    toolbar: 'top',
    options: {
        foo: [
            { bar: 'b' },
            { bar: 'a' },
            { bar: 'z' }
        ]
    }
// 
expect( config.get( 'creator' ) ).to.equal( 'inline' );
config.set( {
    option1: 1,
    option2: {
        subOption21: 21
    }
} );
expect( config.get( 'option1' ) ).to.equal( 1 );
expect( config.get( 'option2.subOption21' ) ).to.equal( 21 );

Context

Provides a common, higher-level environment for solutions that use multiple editors or plugins that work outside the editor.
All configuration options passed to a context will be used as default options for editor instances initialized in that context.
Context plugins passed to a context instance will be shared among all editor instances initialized in this context. These will be the same plugin instances for all the editors.

  • 例1
// Creates and initializes a new context instance.
        const commonConfig = { ... }; // Configuration for all the plugins and editors.
        const editorPlugins = [ ... ]; // Regular plugins here.
        Context
            .create( {
                // Only context plugins here.
                plugins: [ ... ],
                // Configure the language for all the editors (it cannot be overwritten).
                language: { ... },
                // Configuration for context plugins.
                comments: { ... },
                ...
                // Default configuration for editor plugins.
                toolbar: { ... },
                image: { ... },
                ...
            } )
            .then( context => {
                const promises = [];
                promises.push( ClassicEditor.create(
                    document.getElementById( 'editor1' ),
                    {
                        editorPlugins,
                        context
                    }
                ) );
                promises.push( ClassicEditor.create(
                    document.getElementById( 'editor2' ),
                    {
                        editorPlugins,
                        context,
                        toolbar: { ... } // You can overwrite the configuration of the context.
                    }
                ) );
                return Promise.all( promises );
            } );
  • 例2，通过builtinPlugins设置内置插件
// An array of plugins built into the `Context` class.
// It is used in CKEditor 5 builds featuring `Context` to provide a list of context plugins which are later automatically initialized during the context initialization.
// They will be automatically initialized by `Context` unless `config.plugins` is passed.
        // Build some context plugins into the Context class first.
        Context.builtinPlugins = [ FooPlugin, BarPlugin ];
        // Normally, you need to define config.plugins, but since Context.builtinPlugins was
        // defined, now you can call create() without any configuration.
        Context
            .create()
            .then( context => {
                context.plugins.get( FooPlugin ); // -> An instance of the Foo plugin.
                context.plugins.get( BarPlugin ); // -> An instance of the Bar plugin.
            } );
  • 例3，通过defaultConfig设置默认配置
Context.defaultConfig = {
    foo: 1,
    bar: 2
};
Context
    .create()
    .then( context => {
        context.config.get( 'foo' ); // -> 1
        context.config.get( 'bar' ); // -> 2
    } );
// The default options can be overridden by the configuration passed to create().
Context
    .create( { bar: 3 } )
    .then( context => {
        context.config.get( 'foo' ); // -> 1
        context.config.get( 'bar' ); // -> 3
    } );

new Context(config)实例化过程

  • 通过传参config和defaultConfig（参见例3）给Config类生成实例赋给this.config
  • 以plugins为key，builtinPlugins（参见例2）为value，更新this.config
  • this.plugins = new PluginCollection( this, availablePlugins );，PluginCollection实例化过程如下：
    PluginCollection实例化过程
  • 通过Locale生成对象赋给this.locale（详见ckeditor5/locale：国际化方案）：
this.locale = new Locale( {
            uiLanguage: typeof languageConfig === 'string' ? languageConfig : languageConfig.ui,
            contentLanguage: this.config.get( 'language.content' )
} );
this.t = this.locale.t;
  • this.editors = new Collection();，Collection用于对editor实例进行诸如新增、删除和查找等管理工作。
    基本使用示例
const collection = new Collection( [ { id: 'John' }, { id: 'Mike' } ] );
console.log( collection.get( 0 ) ); // -> { id: 'John' }
console.log( collection.get( 1 ) ); // -> { id: 'Mike' }
console.log( collection.get( 'Mike' ) ); // -> { id: 'Mike' }
// Or 
const collection = new Collection();
collection.add( { id: 'John' } );
console.log( collection.get( 0 ) ); // -> { id: 'John' }
// Or  you can always pass a configuration object as the last argument of the constructor:
const emptyCollection = new Collection( { idProperty: 'name' } );
emptyCollection.add( { name: 'John' } );
console.log( collection.get( 'John' ) ); // -> { name: 'John' }
const nonEmptyCollection = new Collection( [ { name: 'John' } ], { idProperty: 'name' } );
nonEmptyCollection.add( { name: 'George' } );
console.log( collection.get( 'George' ) ); // -> { name: 'George' }
console.log( collection.get( 'John' ) ); // -> { name: 'John' }

bindTo、as和using

// Binds and synchronizes the collection with another one.
// The binding can be a simple factory:
        class FactoryClass {
            constructor( data ) {
                this.label = data.label;
            }
        }
        const source = new Collection( { idProperty: 'label' } );
        const target = new Collection();
        target.bindTo( source ).as( FactoryClass );
        source.add( { label: 'foo' } );
        source.add( { label: 'bar' } );
        console.log( target.length ); // 2
        console.log( target.get( 1 ).label ); // 'bar'
        source.remove( 0 );
        console.log( target.length ); // 1
        console.log( target.get( 0 ).label ); // 'bar'
// or the factory driven by a custom callback:
        class FooClass {
            constructor( data ) {
                this.label = data.label;
            }
        }
        class BarClass {
            constructor( data ) {
                this.label = data.label;
            }
        }
        const source = new Collection( { idProperty: 'label' } );
        const target = new Collection();
        target.bindTo( source ).using( ( item ) => {
            if ( item.label == 'foo' ) {
                return new FooClass( item );
            } else {
                return new BarClass( item );
            }
        } );
        source.add( { label: 'foo' } );
        source.add( { label: 'bar' } );
        console.log( target.length ); // 2
        console.log( target.get( 0 ) instanceof FooClass ); // true
        console.log( target.get( 1 ) instanceof BarClass ); // true
// or the factory out of property name:
        const source = new Collection( { idProperty: 'label' } );
        const target = new Collection();
        target.bindTo( source ).using( 'label' );
        source.add( { label: { value: 'foo' } } );
        source.add( { label: { value: 'bar' } } );
        console.log( target.length ); // 2
        console.log( target.get( 0 ).value ); // 'foo'
        console.log( target.get( 1 ).value ); // 'bar'
// It's possible to skip specified items by returning falsy value:
        const source = new Collection();
        const target = new Collection();
        target.bindTo( source ).using( item => {
            if ( item.hidden ) {
                return null;
            }
            return item;
        } );
        source.add( { hidden: true } );
        source.add( { hidden: false } );
        console.log( source.length ); // 2
        console.log( target.length ); // 1
  • this._contextOwner初始化为null，在_addEditor方法中会对其赋值：
/*
Reference to the editor which created the context.
Null when the context was created outside of the editor.
It is used to destroy the context when removing the editor that has created the context.
*/
this._contextOwner = null;

在editor.js中，会调用Context方法和_addEditor

class Editor {
   constructor(config = {}) {
    this._context = config.context || new Context( { language: config.language } );
    this._context._addEditor( this, !config.context );
  }
}
  • _addEditor
// Adds a reference to the editor which is used with this context.
// This method should only be used by the editor.
_addEditor( editor, isContextOwner ) {
    if ( this._contextOwner ) {
        /**
         * Cannot add multiple editors to the context which is created by the editor.
         *
         * @error context-addeditor-private-context
         */
        throw new CKEditorError( 'context-addeditor-private-context' );
    }
    this.editors.add( editor );
    if ( isContextOwner ) {
        this._contextOwner = editor;
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,924评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,902评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 107,716评论 0赞 239
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,783评论 0赞 203
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,166评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,510评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,784评论 2赞 311
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,476评论 0赞 196
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,196评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,459评论 2赞 243
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,978评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,321评论 2赞 252
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,964评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,046评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,803评论 0赞 193
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,530评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,420评论 2赞 265