Как создать встроенный виджет с textInput на панели инструментов - PullRequest
Новая
       11

Как создать встроенный виджет с textInput на панели инструментов

0 голосов
/ 14 февраля 2020

Я хочу создать виджет в математическом виджете CKEditor5, который позволяет вводить код KaTeX, а затем использовать библиотеку KaTeX для визуализации этого кода в симпатичном формате математических формул внутри редактора. В частности, этот плагин будет иметь следующее:

1) Вставляет встроенный тег в документ, который будет понижен в редакторе в качестве визуализированной математической формулы KaTeX. (Достаточно просто, описано в учебнике по встроенным виджетам )

2) Когда тег выбран, я хочу иметь текстовую область на главной панели инструментов ckeditor для редактирования кода katex. Когда вы меняете код во входных данных, формула в редакторе должна быть перерисована. Если тег не выбран, текстовое поле должно быть скрыто.

Я не вижу примеров кода, который даже добавляет inputTextView на панель инструментов, не говоря уже о том, когда выбран конкретный элемент.

Основываясь на основных принципах, я попытался просто обновить строку editor.ui.componentFactory.add( 'placeholder' ...) в placeholderui. js из вышеприведенного руководства, например, чтобы добавить текстовый ввод в панель инструментов и журнал консоли. его значение при изменении: 

editor.ui.componentFactory.add( 'editKatex', locale => {
      const inputView = new InputTextView( locale );

      this.listenTo( inputView, 'change', (evt, name, value, oldvalue) => {
          console.log(value)
      } );

      return inputView;
  } );

Я добавил этот элемент на главную панель инструментов в ckeditor. js config.

1) Как показать этот вход только когда элемент сфокусирован?

2) Как связать значение этого ввода с выбранным элементом?

Я видел несколько примеров контекстных меню виджетов на панели инструментов таблицы и панель инструментов изображения . Однако, похоже, что они используют контекстный баллон, а не основную панель инструментов.

===

ОБНОВЛЕНИЕ

Исходя из альтернативного изображения с панели инструментов изображения, я используя команду для отслеживания значения выбранных виджетов katex: 

// input created

editor.ui.componentFactory.add( 'editKatex', locale => {
      const inputView = new InputTextView( locale );

      inputView.set( {
        label: 'Edit selected KaTeX formula',
        tooltip: true,
        id: 'editKatexInput'
      })

      // Execute the command when the input changes
      this.listenTo( inputView, 'input', (evtInfo, inputEvent) => {
          editor.execute( 'editKatexFormula', { newValue: inputEvent.target.value } );
      } );

      return inputView;
  } );

// command

export class EditKatexFormulaCommand extends Command {

  refresh() {
    const element = this.editor.model.document.selection.getSelectedElement();
    const editKatexInput = this.editor.ui.view.toolbar.items.find((item) => {return item.id === 'editKatexInput'})

    this.isEnabled = isKatex( element );

    // this correctly sets the inputs value to the selected widget
    if ( isKatex( element ) && element.hasAttribute( 'formula' ) ) {
        this.value = element.getAttribute( 'formula' );
        editKatexInput.set('value', this.value)
    }
    // this correctly clears the input when no katex widget is selected
    else {
        this.value = false;
        editKatexInput.set('value', '')
    }

    console.log('command value', this.value)
}

execute( options ) {
    const model = this.editor.model;
    const katexElement = model.document.selection.getSelectedElement();

    model.change( writer => {
        // this doesn't seem to actually update the inline widget value
        writer.setAttribute( 'formula', options.newValue, katexElement );
        // for testing: this correctly inserts the input value after the selected widget
        writer.insertText( options.newValue, katexElement, 'after' );
    } );
}

}

...