As a complex widget, Rich Text Editor consists of many stand-alone Webix views with their own API. You can redefine inner views and also you can work with the specific Rich Text Editor settings.
You can use the following settings to provide the basic configuration of the widget:
value (string) - sets the content to be displayed in the editor on its initialization. The value is set using the HTML format, which is the default format. If you want to set the value using another format (text), use the built-in setValue() method instead
upload (string) - the link to the URL of the Upload service used for uploading and storing images inserted into the text. This property has to be specified if you want for the image insertion functionality to work correctly. It is not defined by default
layoutMode (string) - the mode of displaying editor layout. There are two available layout modes: "classic" and "document".
fullscreen (boolean) - defines whether the editor is displayed in the fullscreen mode, false by default
menubar (boolean, object, array) - defines whether the default menubar is shown or specifies the menubar configuration, false by default
toolbar (boolean, object, array) - defines whether the default toolbar is shown or specifies the toolbar configuration,
true by default (provides the initial set of controls)
compact (boolean) - defines whether the editor is rendered in the compact mode
compactWidth (number) - defines the width at which the widget is switched to the compact mode, 700 by default
webix.ui({
view: "editor",
value: "<p>Hello World!</p>",
layoutMode: "document",
menubar: true,
upload: "https://docs.webix.com/richtext-backend/images"
});
Related sample: Rich Text Editor: Basic Configuration
By default, Rich Text Editor is initialized with the initial set of toolbar buttons. You can redefine the configuration of the toolbar in one of the ways described below. Check the full code of Toolbar buttons and button groups configuration.
To use the default toolbar buttons, specify an array that contains the names of the necessary buttons as a value of the toolbar property. For example:
webix.ui({
type: "space",
cols: [
{
view: "editor",
toolbar: ["bold", "italic", "strike", "separator", "link"],
},
],
});
Related sample: Rich Text Editor: Simplified Toolbar
To specify a custom toolbar configuration, set the toolbar property as an array that can contain both strings with the default button names and objects with custom buttons' configurations. For example:
webix.ui({
view: "editor",
toolbar: [
"bold",
"italic",
"separator",
{
view: "button",
width: 100,
label: "Button",
click: () => {
webix.message("Some action");
},
},
],
});
Related sample: Rich Text Editor: Custom Control in Toolbar
You can provide groups of toolbar buttons by specifying them as properties of the toolbar object in the following way:
For example:
webix.ui({
view: "editor",
toolbar: {
// the default "history" group of buttons is enabled
history: true,
// certain buttons are specified for the "align" group
align: ["align-left", "align-center", "align-right"],
// a custom group is set as a mix of a default and a custom buttons
"custom-group": [
"clear",
{
view: "button",
width: 100,
value: "Button",
click: () => webix.message("action"),
}
]
}
});
By default, the menubar is disabled in the Rich Text Editor widget. You can enable the default menubar or redefine the configuration of the menubar in one of the ways provided below. Check the full code of Menu items and button groups configuration.
To use the default set of menu options, specify the menubar property and set its value to true.
webix.ui({
view: "editor",
value: "<p>Hello World!</p>",
menubar: true,
upload: "https://docs.webix.com/richtext-backend/images"
});
Related sample: Rich Text Editor: Menubar
You can set a custom menubar configuration by specifying the menubar either as an array or as an object with both the default and custom options. Note:
onMenuItemClick eventThis way allows specifying the menubar with both the default and custom options and/or sub-options.
The menu options can be set as strings (for existing options) or objects. When set as objects, they may contain the following properties:
For example:
webix.ui({
view: "editor",
value: "<p>Some text</p>",
menubar: [
// sets the default "File" menu option
"file",
// sets the default "Format" menu option
{
id: "format"
},
// sets the default "Edit" menu option with certain default sub-options
{
id: "edit",
data: [
{ id: "undo" }, { id: "redo" }
]
},
// sets the default "View" menu option with a default and a custom sub-options
{
id: "view",
data: [
{ id: "mode" },
{ id: "view-option", value: "View option" }
]
},
// sets a custom menu option with two sub-options
{
id: "option",
value: "Some option",
data: [
{ id: "option-1", value: "Option 1" },
{ id: "option-2", value: "Option 2" }
]
}
],
on: {
onMenuItemClick(id) {
webix.message(id);
}
},
upload: "https://docs.webix.com/richtext-backend/images"
});
This approach also allows specifying default and custom options and/or sub-options in the menubar, but in a bit different way. Each menu option is set as a key:value pair, where:
webix.ui({
view: "editor",
value: "<p>Some text</p>",
menubar: {
// sets the default "File" menu option
file: true,
// sets the default "Edit" menu option with certain default sub-options
edit: {
data: [
{ id: "undo" }, { id: "redo" }
]
},
// sets the default "View" menu option with a default and a custom sub-options
view: {
data: [
{ id: "mode" },
{ id: "view-option", value: "View option" }
]
},
// sets a custom menu option with two sub-options
option: {
value: "Some option",
data: [
{ id: "option-1", value: "Option 1" },
{ id: "option-2", value: "Option 2" },
],
},
},
on: {
onMenuItemClick(id) {
webix.message(id);
}
},
upload: "https://docs.webix.com/richtext-backend/images"
});
Related sample: Rich Text Editor: Custom Options in Menubar
The layoutMode, fullscreen, menubar and toolbar properties are also accessible as reactive via the widget state. They store global app state and let developers track its changes. Any change of a reactive property is immediately reflected in the widget.
Apart from these properties there are several others:
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:
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:
paintMode (object) - the object with the current state of the paint mode. Contains the following fields:
{ 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 offYou can get the current state of the widget with the help of the getState() method:
webix.ui({
view: "editor",
id: "editor",
value: "<p>Some text</p>"
});
const state = $$("editor").getState();
/*
{
activeStyles: {bold: true, tag: "p"},
editImage: null,
fullscreen: false,
layoutMode: "classic",
menubar: false,
paintMode: {
enabled: true,
continuous: true
},
toolbar: true,
selectedImage: null
}
*/
You can use the $observe handler to listen to changes and provide custom handlers for them:
const state = $$("editor").getState();
state.$observe("layoutMode", v => webix.message(`Layout mode: ${v}`));
state.layoutMode = "document";
Related sample: Rich Text Editor: State Observer
In the sample above, the current state is accessed via JetApp instance which is available in the onInit event handler.
Back to top