Events

A list of main events that can be handled in the editor. Events are registered using the on method of the Events class.

Events Methods

Function	Signature	Description
refresh	refresh(): void	Updates the main event handlers of the editor.
change	change(event: TexditorEventBase): void	Triggers the editor change event with the specified parameters.
destroy	destroy(): void	Destroys the event manager and clears all listeners.

---

Main Public Events

Event	Description	Parameters
onChange	Triggered on any content change.	{ type: string, ... } (TexditorEventBase object)
focus	Triggered at the start of focusing on a block.	{ domEvent: FocusEvent }
focusEnd	Triggered after processing focus on a block.	{ domEvent: FocusEvent }
click	Triggered on a click on a block.	{ domEvent: MouseEvent }
clickEnd	Triggered after processing a click on a block.	{ domEvent: MouseEvent }
blur	Triggered when a block loses focus.	{ domEvent: FocusEvent }
keyup	Triggered on key release on a block.	{ domEvent: KeyboardEvent }
keyupEnd	Triggered after processing key release.	{ domEvent: KeyboardEvent }
documentKeydown	Triggered on key press at the document level (start).	{ domEvent: KeyboardEvent }
documentKeydownEnd	Triggered after processing key press at the document level.	{ domEvent: KeyboardEvent }
documentKeydownBackspace	Triggered on Backspace/Delete key press at the document level.	{ domEvent: KeyboardEvent }
keydown	Triggered at the start of processing a key press on a block.	{ domEvent: KeyboardEvent }
keydownEnterKey	Triggered on Enter key press.	{ domEvent: KeyboardEvent }
keydownEnterKeyEnd	Triggered after processing Enter key press.	{ domEvent: KeyboardEvent }
keydownBackspaceKey	Triggered on Backspace key press.	{ domEvent: KeyboardEvent }
keydownBackspaceKeyEnd	Triggered after processing Backspace key press.	{ domEvent: KeyboardEvent }
keydownEnd	Triggered after processing a key press on a block.	{ domEvent: KeyboardEvent }
undo	Triggered when performing an undo operation (Ctrl+Z).	{ type: 'undo' }
redo	Triggered when performing a redo operation (Ctrl+Shift+Z).	{ type: 'redo' }
onPaste	Triggered at the start of processing a paste.	{ domEvent: ClipboardEvent }
onPasteEnd	Triggered after processing a paste.	{ domEvent: ClipboardEvent }
onDragStart	Triggered at the start of dragging.	{ domEvent: DragEvent }
onDragLeave	Triggered when a dragged element leaves the area.	{ domEvent: DragEvent }
onDragOver	Triggered when a dragged element is over the area.	{ domEvent: DragEvent }
onDrag	Triggered during dragging.	{ domEvent: DragEvent }
onDragEnd	Triggered at the end of dragging.	{ domEvent: DragEvent }
onDrop	Triggered when a dragged element is dropped.	{ domEvent: DragEvent }
onSelectionChange	Triggered at the start of processing a selection change.	{ domEvent: Event }
onSelectionChangeEnd	Triggered after processing a selection change.	{ domEvent: Event }
save	Triggered at the start of the data saving process.	{}
saveEach	Triggered for each block during the saving process.	{ blockElement: BlockElement }
saveEachEnd	Triggered after processing each block during saving.	{ blockElement: BlockElement }
saveEnd	Triggered after completing the process of saving all blocks.	{}

Example of Using Events

import { Texditor } from "texditor";

const editor = new Texditor({
  handle: "my-editor",
  onReady: (evt) => {

  },
  onChange: (evt) => {
    const editorInstance = evt.instance;

    if(evt?.type == 'click') {
       // ...
    }
    console.log(editorInstance.getContent())
  }
});

// Subscribe to content change event
editor.events.on('onChange', (evt) => {
  console.log('Content changed:', evt);
});

// Subscribe to key press event
editor.events.on('keydown', (evt) => {
  console.log('Key pressed:', evt.domEvent);
});

// Subscribe to redo action event
editor.events.on('redo', (evt) => {
  console.log('Action redone');
});