CKEditor 5: Dubbelklik ondersteunen

Een goed voorbeeld hoe je een CKEditor 5 plugin maakt staat in de documentatie. Andere dingen zijn iets meer uitzoekwerk, zoals het ondersteunen van een dubbel-klik op een element in de editor.

In het voorbeeld staat hoe je een plugin maakt die afkortingen ondersteund. In de oude versie was het mogelijk om te dubbelklikken op zo'n afkorting om het te bewerken. 

Allereerst moet je een nieuwe Observer maken die dit event afvangt. Maakt een bestand "DoubleClickObserver.js" in je plugin map bij de rest van de code. Plaats daarin de volgende code.

import {DomEventObserver} from 'ckeditor5/src/engine'

export default class DblClickObserver extends DomEventObserver {
  constructor(view) {
    super(view);
    this.domEventType = 'dblclick';
  }

  onDomEvent(domEvent) {
    this.fire(domEvent.type, domEvent);
  }
}

Dit zorgt er voor dat er wordt geluisterd naar een dubbelklik-event in de editor.

Vervolgens moet je deze Observer koppelen aan je plugin. In de UI class (in het voorbeeld "AcronymsUI") plaats je het volgende in de init() method.

const view = editor.editing.view;
const viewDocument = view.document;
view.addObserver(DblClickObserver);
editor.listenTo(viewDocument, 'dblclick', () => {
  // Do something when double clicking.
  this._showUI();
})

De Observer is nu gekoppeld aan de view van de editor en voert in dit geval de _showUI() method uit.