CKeditor5 -插件-小部件状态
我正在为CK编辑器5编写一个插件。在第4版中，我添加了如下HTML：
<span data-id="my-special-value" class="my-widget">My label</span>
我需要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.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
}) );我真的可以t find out how to manage this. This code tries to add:我的标签but now it still adds:我的标签
正如您将看到的，它实际上添加了：<span class="my-widget" test="test">My label</span>，因为dataDowncast代码，但是如何从insertContent代码部分获得我的状态？
回答 1
Stack Overflow用户
发布于 2019-03-07 09:26:06
以下是几条简短的建议：
- 这是不正确的：
allowWhere: [ '$block', '$text']。不能有一个元素表现得像块和文本。你需要选择一个-它要么是内嵌的，要么是块的。 - 看到您使用
<span>，我想“内联”是一个更好的选择。在CKEditor 5 v12.0.0 (几天前发布)中，我们引入了对内联小部件的支持。请查看实现内联小部件指南，它涵盖了您需要了解的几件事--特别是模式。 - 在上播转换器中有
view.class。这是不正确的-只有view.classes。此外，如果要匹配多个类，则需要使用数组。见upcasthelpers-UpcastHelpers.html#function-elementToElement和matcher-MatcherPattern.html - 在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部件可以是一个回调，返回一个模型元素。它可以访问视图元素，这样就可以读取所需的属性。
您还可以分别使用UpcastHelpers#elementToElement()和UpcastHelpers#attributeToAttribute()进行相同的操作。
https://stackoverflow.com/questions/55024472
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号