CKEditor 5 插件：带有输入、textara 和复选框的弹出窗口

Question

我已经创建了一个 CKEditor 4 插件（在 TYPO3 CMS 内），编辑者可以使用它向 A 标签添加数据属性。 我现在想将此插件迁移到版本 5，似乎这里几乎所有内容都发生了变化。 我已经玩过一些文档了 https://ckeditor.com/docs/ckeditor5/latest/framework/guides/plugins/abbreviation-plugin/abbreviation-plugin-level-2.html

尽管如此，我现在知道如何添加输入字段、文本区域、复选框和一些文本（请参见下面的屏幕截图）。 有谁有一些代码或插件，我可以研究如何创建自己的弹出窗口？

我当前的试用，适用于 view.js 文件中的两个简单输入字段：

import {UI} from "@typo3/ckeditor5-bundle.js";

export default class Email4LinkView extends UI.View {
constructor(locale) {
super(locale);

this.titleInputView = this._createInput('Title');
this.descriptionInputView = this._createInput('Description');
this.saveButtonView = this._createButton(
  'Save',
  '<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.25 12.321 7.27 6.491c.143.127.321.19.499.19.206 0 .41-.084.559-.249l11.23-12.501c.129-.143.192-.321.192-.5 0-.419-.338-.75-.749-.75-.206 0-.411.084-.559.249l-10.731 11.945-6.711-5.994c-.144-.127-.322-.19-.5-.19-.417 0-.75.336-.75.749 0 .206.084.412.25.56" fill-rule="nonzero"/></svg>',
  'ck-button-save'
);
this.saveButtonView.type = 'submit';
this.cancelButtonView = this._createButton(
  'Cancel',
  '<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"/></svg>',
  'ck-button-cancel'
);

this.cancelButtonView.delegate('execute').to(this, 'cancel');

this.childViews = this.createCollection([
  this.titleInputView,
  this.descriptionInputView,
  this.saveButtonView,
  this.cancelButtonView
]);

this.setTemplate({
  tag: 'form',
  attributes: {
    class: ['ck', 'ck-email4link-form'],
    tabindex: '-1'
  },
  children: this.childViews,
});
}

render() {
super.render();

UI.submitHandler({
  view: this
});
}

focus() {
// this.childViews.first.focus();
}

_createInput(label) {
const labeledInput = new UI.LabeledFieldView(this.locale, UI.createLabeledInputText);
labeledInput.label = label;
return labeledInput;
}

_createButton(label, icon, className) {
const button = new UI.ButtonView();
button.set({
  label,
  icon,
  tooltip: true,
  class: className
});
return button;
}
}

旧版本截图：

Answer 1

复选框示例位于：cke5 commit