我试图实现一个插件,将__firstName__
类型的明文占位符转换为诸如<placeholder key="__firstName__"></placeholder>
之类的型号,反之亦然。
我遵循了实施直列小部件的教程,这确实有助于开始。
我得到了upcast
部分的工作,该部分可以解析文本,将其拆分并创建文本和占位符元素。所以:
<p>Hi __firstName__,</p>
变为:
<$root>
<paragraph>
"Hi "
<placeholder key="__firstName__">
</placeholder>
","
</paragraph>
</$root>
我现在正在努力使dataDowncast
零件工作。我只对dataDowncast
进行了这些更改,返回文本而不是内部文本的元素:
conversion.for('dataDowncast').elementToElement({
model: 'placeholder',
view: (modelItem, viewWriter) => {
var key = modelItem.getAttribute('key');
return viewWriter.createText(key);
}
});
我现在面临两个问题。
1。:dataDowncast
导致这样做:
<p>Hi _,_firstName__</p>
占位符之后的所有内容似乎都转移到左侧,换句话说似乎完全忽略了占位符(-1)。elementToElement
是否意味着除了文本而不是元素?还是我只需要以某种方式告知作者文字的长度?
2。:如果模型中有两个以上的占位符:
<$root>
<paragraph>
<placeholder key="__firstName__">
</placeholder>
<placeholder key="__lastName__">
</placeholder>
<placeholder key="__salutation__">
</placeholder>
</paragraph>
</$root>
dataDowncast
提出了此错误:
Uncaught TypeError: Cannot read property 'name' of undefined
at Mapper.getModelLength (mapper.js:428)
at Mapper._findPositionIn (mapper.js:493)
at Mapper.on (mapper.js:94)
at Mapper.fire (emittermixin.js:211)
at Mapper.toViewPosition (mapper.js:277)
at DowncastDispatcher.modelViewSplitOnInsert (converters.js:214)
at DowncastDispatcher.fire (emittermixin.js:211)
at DowncastDispatcher._testAndFire (downcastdispatcher.js:473)
at DowncastDispatcher.convertInsert (downcastdispatcher.js:184)
at DataController.toView (datacontroller.js:207)
这可能是一个结果错误。
依赖项使用:
"@ckeditor/ckeditor5-editor-inline": "12.0.0",
"@ckeditor/ckeditor5-widget": "11.0.0",
无插件活动。
elementToElement()
是否意味着除了文本而不是元素?
所有3个elementToElement()
帮助者(双向,向上和降落)都期望在两端(在模型中和视图中)您都有元素。他们将一个元素转换为另一个元素。
通常,有4种基本类型的转换器:
- 在模型和视图元素之间,
- 在模型属性和视图元素之间(必须为
AttributeElement
), - 在模型和查看属性之间,
- 从模型标记到视图突出显示或元素。
可以为更大的视图结构编写自定义转换器(当模型中的单个事物代表更大的视图时),但这适用于视图的不可编辑的部分(例如,窗口窗口的主体)。在内容的可编辑部分中,视图中的所有内容都必须很好地映射到模型中的某些内容,因为视图中的每个位置都必须映射到模型中的某个位置。反之亦然。
在您的情况下,问题在于,当您将模型元素转换为视图文本时,该模型元素不会映射到视图中的任何内容。这会破坏一系列事情 - 从位置映射到其他一些代码,这些代码也可以映射元素。
从理论上讲,可能可以覆盖位置和元素在这里映射的方式。Ckeditor 5的Mapper
为此提供了一些机制(查看事件),但我不会这样。它需要非常深入的知识和测试(即使我不确定它需要多少工作😅)。
因此,请遵循占位符指南,其中模型元素被转换为视图元素,反之亦然。