CKEditor5：当气球中按下按钮时如何更新模型？

Question

我正在创建一个稍微复杂的“简单框”插件（我已将其重命名为“标注”），用户可以在其中“对齐”左浮动、全宽或右浮动的框。我想在气球中呈现用户对齐按钮，类似于您从图像插件中获得的按钮。使用按钮应该控制外部元素上的 CSS 类。

我已经足够远了，我可以使用 3 个对齐按钮渲染气球：

但是，我不知道如何对按下的按钮做出“反应”。我有气球 UI 的代码：

export default class CalloutBalloonView extends View {
  constructor( locale ) {
    super( locale );

    this.leftAlignView = this._createButton('left', 'Left Align', icons.objectLeft);
    this.fullView = this._createButton('full', 'Full Width', icons.objectFullWidth);
    this.rightAlignView = this._createButton('right', 'Right Align', icons.objectRight);

    this.childViews = this.createCollection( [
      this.leftAlignView,
      this.fullView,
      this.rightAlignView
    ] );

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

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

  _createButton( name, label, icon) {
    const button = new ButtonView();

    button.set( {
      label,
      icon,
      tooltip: true,
      class: 'testing'
    } );

    return button;
  }
}

这是插件的主要 UI 代码：

export default class CalloutUI extends Plugin {
  static get requires() {
    return [ ContextualBalloon ];
  }

  init() {
    const editor = this.editor;

    // Create balloon.
    this.balloonView = this._createBalloonView();
    this._balloon = this.editor.plugins.get( ContextualBalloon );

    // This will register the callout toolbar button.
    editor.ui.componentFactory.add('callout', (locale) => {
      const command = editor.commands.get('insertCallout');
      const buttonView = new ButtonView(locale);

      // Create the toolbar button.
      buttonView.set({
        label: editor.t('Callout'),
        icon,
        tooltip: true,
      });

      // Bind the state of the button to the command.
      buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');

      // Execute the command when the button is clicked (executed).
      this.listenTo(buttonView, 'execute', () => {
        editor.execute('insertCallout');
        this._showBalloon()
      });

      return buttonView;
    });
  }
  _getBalloonPositionData() {
    const view = this.editor.editing.view;
    const viewDocument = view.document;
    let target = null;

    // Set a target position by converting view selection range to DOM.
    target = () => view.domConverter.viewRangeToDom(
      viewDocument.selection.getFirstRange()
    );

    return {
      target
    };
  }

  _createBalloonView() {
    const editor = this.editor;
    const balloonView = new CalloutBalloonView( editor.locale );

    this.listenTo( balloonView, 'submit', () => {
      const title = formView.titleInputView.fieldView.element.value;
      const abbr = formView.abbrInputView.fieldView.element.value;
    } );

    return balloonView;
  }

  _showBalloon() {
    this._balloon.add( {
      view: this.balloonView,
      position: this._getBalloonPositionData()
    } );

    //this.balloonView.focus();
  }
}

我是否需要监听每个按钮视图中的 "isOn" 事件，然后以某种方式操作模型以更改顶级标注上的“位置”属性？我尝试查看 CKEditor 核心提供的图像插件中的示例，但它并没有以相同的方式创建气球 UI，我发现很难遵循。

Answer 1

是的，您需要向按钮添加一些监听器。

我假设当您选择框时会显示气球。您可以尝试使用

Alignment

命令来对齐所选内容。

在监听器中调用此命令

editor.execute( 'alignment', { value: 'center' } );

这里是

SupportedOptions

代表

value