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

Wysihtml5’s editor event listner (jquery) :

This is a workaround to use jquery default events on the textarea used by wysihtml5.

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