In this chapter we show you our recommendations to customize your Xeditor configuration in the most save and efficient way.

Events / Listeners

An event can be something the browser does, or something a user does.

Here are some examples of events:

• The document has finished loading
• A button was clicked
• Right click in the document

JavaScript lets you execute code when events are detected.

Most of the basic customizations, like your return or delete handling in the document, can be configured using JavaScript events. In our API documentation you find a list with every event available for each method.

For most of the events there is also a "before" event for logic that should be executed before the event (e.g. hitting return: if you add a listener to the before event you can tell Xeditor to ignore the default logic; if the cursor is in a specific element in which the original logic shouldn't be executed).

Overall this is a very stable way to customize Xeditor, because no source code is changed or overwritten, hence it is pretty save to update if you just used events to customize Xeditor (at least for minor updates).

Example

In the following example a listener is created for the before insert break event. So the original Xeditor core logic (inserting a break by hitting return) only happens if this listener returns true.

onDocumentBeforeInsertBreak: function(editor, document, level, result, eOpts) {
    // get selected element
    var selectionElement = editor.getSelectionManager().getElement();
    if (!selectionElement) {
        return;
    }

    // search for bold element
    var bold = selectionElement.findParentByTypes(false, ['bold']);
    if (bold) {
        editor.getNotificator().info('notification title', 'notification body');
        return false; // aborts Xeditor internal logic
    }
}

What this listener does is that hitting return always behaves as expected, except when the cursor is in a bold element (then nothing happens).

This can be adapted to any kind of element or event.