如何实现与纯文本占位符一起使用的占位符插件?
How to implement a placeholder plugin that works with plain text placeholders?
我正在尝试实现一个插件,将 __firstName__
类型的纯文本占位符转换为 <placeholder key="__firstName__"></placeholder>
等模型,反之亦然。
我遵循了 implementing an inline widget 上的教程,这对入门很有帮助。
我得到了 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",
没有激活的插件。
Is the elementToElement()
even meant to except a text instead of an element?
所有 3 个 elementToElement()
助手(双向、向上和向下)都期望在两端(在模型和视图中)都有元素。他们将一种元素转换为另一种元素。
一般来说,转换器有4种基本类型:
- 在模型和视图元素之间,
- 在模型属性和视图元素之间(必须是
AttributeElement
),
- 在模型和视图属性之间,
- 从模型标记到视图突出显示或元素。
可以为更大的视图结构块编写自定义转换器(当更大的视图块由模型中的单个事物表示时)但这适用于视图的不可编辑部分(例如主体)一个小部件)。在内容的可编辑部分,视图中的所有内容都必须很好地映射到模型中的某些内容,因为视图中的每个位置都必须映射到模型中的某个位置。反之亦然。
在您的情况下,问题是当您将模型元素转换为视图文本时,该模型元素未映射到视图中的任何内容。这打破了一系列的事情——从位置映射到其他一些代码片段,这些代码片段也期望它们可以映射元素。
理论上,可以在这里覆盖位置和元素的映射方式。 CKEditor 5 的 Mapper
为此提供了一些机制(查看事件),但我不会这样做。它需要非常深入的知识和测试(即使我不确定它需要多少工作)。
因此,do follow the placeholder guide 其中模型元素转换为视图元素,反之亦然。
我正在尝试实现一个插件,将 __firstName__
类型的纯文本占位符转换为 <placeholder key="__firstName__"></placeholder>
等模型,反之亦然。
我遵循了 implementing an inline widget 上的教程,这对入门很有帮助。
我得到了 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",
没有激活的插件。
Is the
elementToElement()
even meant to except a text instead of an element?
所有 3 个 elementToElement()
助手(双向、向上和向下)都期望在两端(在模型和视图中)都有元素。他们将一种元素转换为另一种元素。
一般来说,转换器有4种基本类型:
- 在模型和视图元素之间,
- 在模型属性和视图元素之间(必须是
AttributeElement
), - 在模型和视图属性之间,
- 从模型标记到视图突出显示或元素。
可以为更大的视图结构块编写自定义转换器(当更大的视图块由模型中的单个事物表示时)但这适用于视图的不可编辑部分(例如主体)一个小部件)。在内容的可编辑部分,视图中的所有内容都必须很好地映射到模型中的某些内容,因为视图中的每个位置都必须映射到模型中的某个位置。反之亦然。
在您的情况下,问题是当您将模型元素转换为视图文本时,该模型元素未映射到视图中的任何内容。这打破了一系列的事情——从位置映射到其他一些代码片段,这些代码片段也期望它们可以映射元素。
理论上,可以在这里覆盖位置和元素的映射方式。 CKEditor 5 的 Mapper
为此提供了一些机制(查看事件),但我不会这样做。它需要非常深入的知识和测试(即使我不确定它需要多少工作)。
因此,do follow the placeholder guide 其中模型元素转换为视图元素,反之亦然。