将对话框数据传递给CKEditor小部件模板

Question

我创建了一个CKEditor小部件和一个带有几个字段的关联对话框。

我想直接将这些字段的值放入小部件的生成模板中。我似乎不明白这是怎么回事。

对话框字段：

{
id: 'message',
type: 'textarea',
label: 'Message',
'default': '',
setup: function( widget ) {
this.setValue( widget.data.message );
},
commit: function( widget ) {
widget.setData( 'message', this.getValue() );
}
}

插件模板：

init: function( editor ) {
CKEDITOR.dialog.add( 'note', this.path + 'dialogs/note.js' );
editor.widgets.add( 'note', {
button: 'Create a note',
dialog: 'note',
template:
'<div class="admonition note">' +
'<p class="first admonition-title">Title</p>' +
'<p class="last">Message</p>' +
'</div>',
....

Answer 1

由于小部件模板是不可变的，我能够通过直接操作DOM来实现我想要的。

Widget API可以帮助我们使用parts、init、edit、data以及方法setData和setHtml。

CKEDITOR.plugins.add('note',{
...
requires: 'widget,dialog',
init: function(editor) {
const html =
'<div class="note">' +
'<p class="note-title">Note</p>' +
'<p class="note-message">Message</p>' +
'</div>';
const path = this.path;
CKEDITOR.dialog.add('note',path + 'dialogs/note.js' );
editor.widgets.add( 'note', {
template: html,
parts: {
note: 'div.note',
message: 'p.note-message'
},
upcast: function(element) {
return element.name === 'div' && element.hasClass( 'note' );
},
init: function () {
// called when loading the widget
this.setData('message', this.parts.message.getHtml());
},
edit: function() {
// called when opening the dialog
const message = this.parts.message.getHtml();
if (message !== this.data.message) {
this.setData('message', message);
}
},
data: function() {
// called when you save the dialog
this.parts.message.setHtml(this.data.message);
}
});
}
}