CKeditor5-插件-小部件-状态

Question

我正在（重新）为CK编辑器5编写一个插件。在版本4中，我添加了如下HTML：

<span data-id="my-special-value" class="my-widget">My label</span>

我需要PHP中的data-id值来完成我的工作。 但是我不知道如何在CKeditor 5中完成此操作。

CKeditor 5的工作原理有所不同。 它非常漂亮，但是我仍然找不到如何添加具有这样的状态（data-id属性）的小部件。

我试过了：

const viewFragment = editor.data.processor.toView(html);
const modelFragment = editor.data.toModel(viewFragment);
editor.model.insertContent( modelFragment );

我非常基本的转换代码：

model.schema.register(pluginSlug, {
    isBlock: false,
    isObject: true,
    allowContentOf: '$block',
    allowWhere: [ '$block', '$text'],
});

// Retrieving the data from the editor.
editor.conversion.for('dataDowncast').add( downcastElementToElement( {
    model: pluginSlug,
    view: (modelItem, writer) => {
        const element = writer.createContainerElement( 'span', { class: 'widget form-element-wysiwyg', test: "test" });

        return element;
    }
}) );

// Rendering the editor content to the user for editing.
editor.conversion.for('editingDowncast').add( downcastElementToElement( {
    model: pluginSlug,
    view: (modelItem, writer) => {
        const element = writer.createContainerElement('span', { class: 'widget form-element-wysiwyg', test: "test" });
        const widget = toWidget( element, writer, { label: 'Target Label' });

        return widget;
    }
}) );

// Loading the data to the editor.
editor.conversion.for('upcast').add( upcastElementToElement( {
    view: {
        name: 'span',
        class: 'widget form-element-wysiwyg'
    },
    model: pluginSlug
}) );

我真的找不到解决办法。 该代码尝试添加： <span data-id="my-special-value" class="my-widget">My label</span>但现在它仍然添加： <span class="my-widget">My label</span> <span data-id="my-special-value" class="my-widget">My label</span> <span class="my-widget">My label</span>

正如您将看到的，由于dataDowncast代码，它实际上添加了： <span class="my-widget" test="test">My label</span> ，但是如何从insertContent代码部分获取我的状态？

Answer 1

几个快速的建议：

1. 这是不正确的： allowWhere: [ '$block', '$text'] 。 您不能让单个元素的行为像块和文本一样。 您需要选择一个-它是内联的还是块的。
2. 看到您使用<span>我想“内联”是一个更好的选择。 在CKEditor 5 v12.0.0（几天前发布）中，我们引入了对嵌入式小部件的支持。 查看实现内联窗口小部件指南 ，该指南涵盖了您需要了解的几件事，尤其是架构。
3. 在view.class转换器中，您具有view.class 。 这是不正确的–只有view.classes 。 另外，如果要与多个类匹配，则需要使用数组。 参见https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_conversion_upcasthelpers-UpcastHelpers.html#function-elementToElement和https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_matcher-MatcherPattern.html
4. 在CKEditor v12.0.0中， downcastElementToElement()和upcastElementToElement()方法已移动到文档中的其他位置。 在迁移指南中了解更多信息。

最后，如何上载data-id并将其存储在模型中的解决方案是上载转换器需要在模型元素上进行设置。 从UpcastHelpers#elementToElement()查看以下示例：

editor.conversion.for( 'upcast' ).elementToElement( {
    view: {
        name: 'p',
        classes: 'heading'
    },
    model: ( viewElement, modelWriter ) => {
        return modelWriter.createElement( 'heading', { level: viewElement.getAttribute( 'data-level' ) } );
    }
} );

如您所见， model部分可以是返回模型元素的回调。 它可以访问view元素，因此您可以读取所需的属性。

您还可以分别使用UpcastHelpers#elementToElement()和UpcastHelpers#attributeToAttribute() 。