CKEditor5 Mapper对象高效获取与构建问询:支持双向转换
嘿,关于CKEditor5里Mapper对象的获取和构建问题,我刚好有不少实践经验,给你梳理下:
CKEditor5 Mapper 对象的获取与双向转换实现
a) 是否可通过DataController(如事件)获取Mapper?
答案是肯定的,但其实不用绕DataController的弯路。CKEditor5的转换系统核心组件Mapper,已经内置在编辑器的conversion对象里,而且本身就支持模型↔视图的双向转换。
如果你非要通过DataController相关事件触发获取,比如在dataReady事件里,可以这么写:
editor.data.on('dataReady', () => { // 获取支持双向转换的内置Mapper实例 const mapper = editor.conversion.mapper; // 直接调用双向转换方法 const modelPosition = mapper.toModelPosition(viewPosition); const viewPosition = mapper.toViewPosition(modelPosition); });
这里要划重点:editor.conversion.mapper本身就是双向的,不需要分别获取模型到视图、视图到模型的两个Mapper,它封装了所有双向转换的方法。
b) 若需自行构建Mapper,最优方式是什么?
除非你有完全脱离编辑器默认转换管道的特殊需求,否则强烈不建议自行构建Mapper——CKEditor5的转换系统耦合性很高,从零构建会出现上下文缺失、转换规则不匹配等问题,还会增加维护成本。
但如果确实需要自定义,最优方式是基于编辑器已有上下文创建,而非从零开始:
// 依托编辑器的模型和视图上下文创建Mapper const mapper = new editor.conversion.Mapper(editor.model, editor.editing.view); // 若有自定义转换规则,通过addMapping关联模型与视图元素 mapper.addMapping('customModelElement', 'customViewElement');
再次提醒:如果你不想修改核心代码,复用编辑器内置的editor.conversion.mapper才是最优解——它已经配置好了所有默认转换规则,直接调用就能实现双向转换,完全不需要改动CKEditor5核心逻辑。
内容的提问来源于stack exchange,提问作者CHItA
相关产品推荐
相关产品推荐

