diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index 6a2173e9..6e860d4c 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -3,9 +3,25 @@ ## toc ## Introduction -The editor fires a few different events that you can hook into. There are three ways to register event listeners: +The editor fires a few different events that you can hook into. Let’s have a look at all the available events first: -## Option 1: Configuration +## List of available events + +| Event | Description | +| --------------- | --------------------------------- | +| beforeCreate | Before the view is created. | +| create | The editor is ready. | +| update | The content has changed. | +| selectionUpdate | The selection has changed. | +| transaction | The editor state has changed. | +| focus | The editor is focused. | +| blur | The editor isn’t focused anymore. | +| destroy | The editor is being destroyed. | + +## Register event listeners +There are three ways to register event listeners. + +### Option 1: Configuration You can define your event listeners on a new editor instance right-away: ```js @@ -37,10 +53,10 @@ const editor = new Editor({ }) ``` -## Option 2: Binding +### Option 2: Binding Or you can register your event listeners on a running editor instance: -### Bind event listeners +#### Bind event listeners ```js editor.on('beforeCreate', ({ editor }) => { // Before the view is created. @@ -75,7 +91,7 @@ editor.on('destroy', () => { } ``` -### Unbind event listeners +#### Unbind event listeners If you need to unbind those event listeners at some point, you should register your event listeners with `.on()` and unbind them with `.off()` then. ```js @@ -90,7 +106,7 @@ editor.on('update', onUpdate) editor.off('update', onUpdate) ``` -## Option 3: Extensions +### Option 3: Extensions Moving your event listeners to custom extensions (or nodes, or marks) is also possible. Here’s how that would look like: ```js