Events

Events

The editor supports a variety of events that developers may hook into.

Usage

var editor = new wysihtml5.Editor("textarea-id");

// observe
function onChange() { alert("The content of the editor has changed"); };
function onLoad() { alert("Go!"); };
editor.on("change", onChange);
editor.on("load", onLoad);

// unobserve
editor.stopObserving("onChange", onChange);
editor.stopObserving("onLoad", onLoad);

List of supported events:

• load – when the editor is fully loaded
• beforeload – for internal use only
• focus – when the editor (regardless if rich text or source view) receives focus
• focus:composer – when the rich text view receives focus
• focus:textarea – when the source view receives focus
• blur – when the editor (regardless if rich text or source view) gets blurred
• blur:composer – when the rich text view gets blurred
• blur:textarea – when the source view gets blurred
• change – when the value changed (regardless if rich text or source view)
• change:composer – when the value of the rich text view got changed
• change:textarea – when the value of the source view got changed
• paste – when the user pastes or drops content (regardless if rich text or source view)
• paste:composer – when the user pastes or drops content into the rich text view
• paste:textarea – when the user pastes or drops content into the source view
• newword:composer – when the user wrote a new word in the rich text view
• destroy:composer – when the rich text view gets removed
• change_view – when switched between source and rich text view
• show:dialog – when a toolbar dialog is shown
• save:dialog – when save in a toolbar dialog is clicked
• cancel:dialog – when cancel in a toolbar dialog is clicked
• undo:composer – when the user invokes an undo action (CMD + Z or via context menu)
• redo:composer – when the user invokes a redo action (CMD + Y, CMD + SHIFT + Z or via context menu)
• beforecommand:composer – when the user is about to format something via a rich text command
• aftercommand:composer – when the user formatted something via a rich text command

Capturing other events that occur within the Wysihtml editor’s iframe

Using jquery, here’s a way to capture any events you’re interested in:

$('.wysihtml5-sandbox').contents().find('body').on(event,function() {...});        

An example for the keydown event:

$('.wysihtml5-sandbox').contents().find('body').on("keydown",function() {
        console.log("Handler for .keypress() called.");
    });

Note: Make sure that the wysihtml iframe is fully loaded before registering events like this, otherwise results may vary across browsers. One way to ensure that the iframe is fully loaded is to define functions like the above as a callback on the editor’s “load” function.