[英]CKeditor5 - plugin - widget - state
I am (re)writing a plugin for CK editor 5. In version 4 i added HTML like this: 我正在(重新)为CK编辑器5编写一个插件。在版本4中,我添加了如下HTML:
<span data-id="my-special-value" class="my-widget">My label</span>
I need the data-id value in PHP to do my stuff. 我需要PHP中的data-id值来完成我的工作。 But i can not figure out how to accomplish this in CKeditor 5.
但是我不知道如何在CKeditor 5中完成此操作。
CKeditor 5 works differently. CKeditor 5的工作原理有所不同。 It is very beautiful, but i still can`t find out how to add a widget like this with additional state (the data-id attribute).
它非常漂亮,但是我仍然找不到如何添加具有这样的状态(data-id属性)的小部件。
I tried: 我试过了:
const viewFragment = editor.data.processor.toView(html);
const modelFragment = editor.data.toModel(viewFragment);
editor.model.insertContent( modelFragment );
My very basic conversioncode: 我非常基本的转换代码:
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
}) );
I really can`t find out how to manage this. 我真的找不到解决办法。 This code tries to add:
<span data-id="my-special-value" class="my-widget">My label</span>
but now it still adds: <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>
<span data-id="my-special-value" class="my-widget">My label</span>
<span class="my-widget">My label</span>
As you will see, it actually adds: <span class="my-widget" test="test">My label</span>
because of the dataDowncast code, but how to get my state from the insertContent code part? 正如您将看到的,由于dataDowncast代码,它实际上添加了:
<span class="my-widget" test="test">My label</span>
,但是如何从insertContent代码部分获取我的状态?
A couple of quick advices: 几个快速的建议:
allowWhere: [ '$block', '$text']
. allowWhere: [ '$block', '$text']
。 You can't have a single element behaving like a block and like a text. <span>
I guess "inline" is a better choice. <span>
我想“内联”是一个更好的选择。 In CKEditor 5 v12.0.0 (released a couple of days ago) we introduced support for inline widgets. view.class
. view.class
转换器中,您具有view.class
。 This is incorrect – there's only view.classes
. view.classes
。 Plus, if you want to match against multiple classes you need to use an array. downcastElementToElement()
and upcastElementToElement()
methods were moved to a different place in the document. downcastElementToElement()
和upcastElementToElement()
方法已移动到文档中的其他位置。 Read more in the migration guide . Finally, the solution to how to upcast data-id
and store in the model is that the upcast converter needs to set it on the model element. 最后,如何上载
data-id
并将其存储在模型中的解决方案是上载转换器需要在模型元素上进行设置。 Check out this example from UpcastHelpers#elementToElement()
: 从
UpcastHelpers#elementToElement()
查看以下示例:
editor.conversion.for( 'upcast' ).elementToElement( {
view: {
name: 'p',
classes: 'heading'
},
model: ( viewElement, modelWriter ) => {
return modelWriter.createElement( 'heading', { level: viewElement.getAttribute( 'data-level' ) } );
}
} );
As you can see, the model
part can be a callback returning a model element. 如您所见,
model
部分可以是返回模型元素的回调。 It has access to the view element so you can read the attributes you need. 它可以访问view元素,因此您可以读取所需的属性。
You can also do the same thing using UpcastHelpers#elementToElement()
and then UpcastHelpers#attributeToAttribute()
separately. 您还可以分别使用
UpcastHelpers#elementToElement()
和UpcastHelpers#attributeToAttribute()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.