Plugins CKeditor5-插件-小部件-状态

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

我的标签

我需要PHP中的数据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.registerpluginSlug{ isBlock:false， 是的， allowContentOf:“$block”， allowWhere:['$block'，'$text']， }; //从编辑器中检索数据。 editor.conversion.for'dataDowncast'。添加DowncastlementToElement{ 型号：插头， 视图：modelItem，writer=>{ const element=writer.createContainerElement'span'，{class:'widget form element wysiwyg'，test:test}； 返回元素； } } ; //将编辑器内容呈现给用户进行编辑。 editingDowncast的editor.conversion.for'editingDowncast'。将downcastelement添加到元素{ 型号：插头， 视图：modelItem，writer=>{ const element=writer.createContainerElement'span'，{class:'widget form element wysiwyg'，test:test}； const widget=toWidget元素，writer，{label:'Target label'}； 返回控件； } } ; //将数据加载到编辑器。 editor.conversion.for'upcast'。添加upcastlementToElement{ 视图：{ 名称：“span”， 类：“窗口小部件表单元素所见即所得” }, 型号：插头 } ; 我真的不知道该怎么办。此代码尝试添加： 我的标签 但现在它仍然补充道： 我的标签

正如您将看到的，它实际上增加了： 我的标签

---

因为dataDowncast代码，但是如何从insertContent代码部分获取我的状态？

一些快速建议：

这是不正确的：allowWhere:['$block'，'$text']。不能让单个元素的行为类似于块和文本。您需要选择一个–它可以是内联的，也可以是块的。 看到您使用内联，我想内联是一个更好的选择。在几天前发布的ckeditor5v12.0.0中，我们引入了对内联小部件的支持。查看包含您需要了解的几件事情的，特别是模式。 在向上转换转换器中，有view.class。这是不正确的–只有view.class。另外，如果要匹配多个类，则需要使用数组。看到和 在CKEditor v12.0.0中，downcastElementToElement和upcastElementToElement方法被移动到文档中的其他位置。阅读更多信息。 最后，如何向上转换数据id并将其存储在模型中的解决方案是，向上转换转换器需要在模型元素上设置它。请从以下位置查看此示例：

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

---

您也可以使用，然后单独使用来完成相同的操作。

感谢您提供了这款很棒的awnser。我还没注意到新版本。我必须加上allowAttributes，然后它就成了一个符咒！

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