时间戳

首页 > 解决方案 > 如何实现与纯文本占位符一起使用的占位符插件？

ckeditor5 - 如何实现与纯文本占位符一起使用的占位符插件？

问题描述

我正在尝试实现一个插件，它将纯文本占位符类型__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",

没有激活的插件。

标签： ckeditor5

解决方案

elementToElement()甚至意味着除了文本而不是元素吗？

所有 3 个elementToElement()助手（双向、向上和向下）都期望在两端（在模型和视图中）都有元素。他们将一种元素转换为另一种元素。

一般来说，有 4 种基本类型的转换器：

  • 在模型和视图元素之间，
  • 在模型属性和视图元素之间（必须是AttributeElement这样），
  • 在模型和视图属性之间，
  • 从模型标记到视图突出显示或元素。

可以为更大的视图结构块编写自定义转换器（当更大的视图块由模型中的单个事物表示时），但这适用于视图的不可编辑部分（例如小部件的主体）。在内容的可编辑部分，视图中的所有内容都必须很好地映射到模型中的某些内容，因为视图中的每个位置都必须映射到模型中的某个位置。反之亦然。

在您的情况下，问题是当您将模型元素转换为视图文本时，该模型元素未映射到视图中的任何内容。这破坏了一系列事情——从位置映射到其他一些期望它们也可以映射元素的代码。

从理论上讲，可能可以覆盖位置和元素在此处的映射方式。CKEditor 5Mapper提供了一些机制（查看事件），但我不会这样做。它需要非常深入的知识和测试（即使我不确定它需要多少工作）。

因此，请遵循占位符指南，将模型元素转换为视图元素，反之亦然。

推荐阅读