Question

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

My label

我需要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
}) );

我真的找不到解决方法。此代码尝试添加： My label 但现在它仍然添加： My label

您将看到，它实际上添加了： My label 因为使用了dataDowncast代码，但是如何从insertContent代码部分获取我的状态？

Answer 1

一些快速建议：

这是错误的：allowWhere: [ '$block', '$text']。您不能让单个元素的行为像块和文本一样。您需要选择一个-内联或阻止。
看到您使用，我想“内联”是一个更好的选择。在CKEditor 5 v12.0.0（几天前发布）中，我们引入了对嵌入式小部件的支持。查看implementing inline widget guide，其中涵盖了您需要了解的几件事，尤其是架构。
在上流转换器中，您有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
在CKEditor v12.0.0中，downcastElementToElement()和upcastElementToElement()方法已移动到文档中的其他位置。在the migration guide中了解更多信息。

最后，有关如何向上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()做同样的事情。

CKeditor5-插件-小部件-状态

1 个答案: