Warning Warning! This is a lower-level API. Lower-level APIs are not recommended for most projects, and may not be available on all plans. See our page on recommended deployment patterns for more information.

Events

This article describes the Events that Question Editor API provides, and details how the to bind function callbacks to these events.

Supported Events

Question Editor API provides methods which provide the ability to bind callback functions to particular events, usually triggered by user actions, or specific events occurring in the Question Editor.

Question Editor events are events raised during the course of a user interacting with the editor, moving between editor states, and modifying content.

To learn more about how to bind to these events, please see the on(), once() and off() methods on our Methods section.

questionEditorApp.on("editor:ready", function(itemIndex) {
    console.log("The editor has fully loaded");
});
        
Event name Description Event data
editor:ready

Triggered when the editor has finished loading all of the Global Layout components (e.g. tile view/editor view). For example, it is triggered when init() or reset() have successfully completed.

Note if you bind editor:ready in the readyListener, the editor:ready event will not be fired on the initial load of the editor. This is because the editor:ready event is fired before the readyListener event.

input:added
Triggered when new input view is added to editor panel. For example Stimulus rich text editor input.
  • input_view - object
    An object that contains:
    • attribute_path: string
    • el: HTMLDomElement
input:removed
Triggered when an input view is removed from editor panel. For example array item Options[5] rich text editor input.
  • input_view - object
    An object that contains:
    • attribute_path: string
    • el: HTMLDomElement
preview:changed
Triggered when the author modifies any widget attributes and the question preview updates.
revisionHistoryState:change

Triggered when current state of Undo/Redo changes. State changes are triggered by the following actions:

  • Clicking the Undo or Redo buttons.
  • Calling undo() or redo() public methods.
  • Changing any UI field (on blur).
Use this event to manage custom button states (i.e. if not using default undo/redo buttons).

This event gets fired twice per state change:

  • The first event fires with both booleans set to false, to indicate both buttons should be disabled (see right).
  • The second event fires with updated states once the first has completed. E.g. after changing a field, canUndo will be true and canRedo will be false (see right).

New snapshots are typically very fast so both events will trigger rapidly, but undo/redo operations can take some time. It is important to listen to these events and prevent or ignore further undo/redo commands until the current operation completes.

Note if you call the public method off() with the argument revisionHistoryState:change, it will disable the default undo and redo buttons.

  • undo_state - object
    An object that contains:
    • canUndo: boolean, indicates whether there is a previous state that QE can be reverted to via the undo() public method.
    • canRedo: boolean, indicates whether there is a newer state that QE can be restored to via redo() public method.
    Sample data:
    (first event): {canUndo: false, canRedo: false}
    Sample data (second event): {canUndo: true, canRedo: false}
widget:changed
Triggered when the editor starts to change states, e.g. when the author chooses a question from the tile view or the setWidget() method is called.
widget:ready

Triggered when the editor panel has finished rendering and can be interacted with. Can occur after setWidget() is called or the author chooses a widget from the tile view.

Note if you pass widget_json via init options, then this event will also be fired, but it will happen before readyListener, as the latter is fired only when everything passed through init options has finished initialising.

  • WidgetReadyEvent - object
    An object that contains:
    • wrapper: A jQuery wrapper for the editor panel DOM element
    • template: string
    • type: string
    • layoutDelegate: object