getState

returns the reactive state object of Rich Text Editor

object getState();

object

state object

Example

// returns the current state of Rich Text Editor
const state = $$("editor").getState();
 
// switches the widget to the "document" mode
state.layoutMode = "document";

Related samples

Rich Text Editor: State Observer

Details

The returned state object contains the following properties and methods:

{
    activeStyles: {/* the applied text formatting */},
    fullscreen: false,
    layoutMode: "classic",
    menubar: false, 
    paintMode: { 
        enabled: true, 
        continuous: true 
    },
    toolbar: true,
    selectedImage: null
}

Properties

activeStyles (object) - stores the styles under the current cursor's position. The default value is {}
selectedImage (null, object) - the object of the selected image, null by default. Contains the following fields:
- id (number, string) - the id of the selected image
- node (object) - the object of the selected image
editImage (null, object) - stores the image options while the editor is open. The default value is null. The image editing object can contain the following options:
- id - the id of the image
- width - the width of the image
- height - the height of the image
- src - the image source path
- alt - an alternate text for the image, if it isn't displayed
paintMode (object) - the object with the current state of the paint mode. Contains the following fields:
- enabled (boolean) - enables/disables the paint mode
- continuous (boolean) - defines whether the continuous paint mode is enabled
  The possible values of the paintMode property are:
  - { enabled: true, continuous: false } - the ordinary paint mode is on
  - { enabled: false, continuous: true } - the continuous mode is on, the paint mode is off
  - { enabled: true, continuous: true } - the continuous paint mode is on
  - { enabled: false, continuous: false } - the paint mode is off

Methods

$observe (function) - a handler to listen to changes in the current state of Rich Text Editor. It takes 2 parameters:
- prop (string) - a reactive property to listen changes of;
- handler (function) - a function to execute when changes are made.
$batch (function)- allows setting several properties at once. Takes the only parameter:
- props (object) - an object containing the pairs of the property name and the value to set.

const state = $$("editor").getState();
state.$observe("layoutMode", v => webix.message(`Layout mode: ${v}`));
state.layoutMode = "document";