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) - the content to be displayed in the editor on its initialization
upload (string) - the link to the URL of the Upload service used for loading and storing images inserted into the text
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, false by default
compactWidth (number) - specifies the width of the editor in the compact mode, 700 by default
webix.ui({
view: "editor",
value: "Hello World",
layoutMode: "document",
menubar: true,
upload: "https://docs.webix.com/richtext-backend/images"
});
Related sample: Rich Text Editor: Basic Configuration
You can set 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"),
}
]
}
});
You can define 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 menu options, specify the menubar property and set as a value an array with objects, where each object is a group of menu items that contains the id of the default menu group.
To render just certain menu options in a group, also specify the data array with the necessary options defined as {id: "name"} objects. For example:
webix.ui({
view: "editor",
value: "some text",
menubar: [
// sets the "file" menu group with certain options
{
id: "file",
data: [{ id: "new" }, { id: "print" }],
},
// sets the "edit" menu group with default options
{
id: "edit",
},
],
upload: "https://docs.webix.com/richtext-backend/images"
});
To provide custom menu items, you should set the menubar property as an object and use as its attribute the menu object with the following properties:
webix.ui({
view: "editor",
value: "some text",
menubar: {
// the default "File" menu item is specified
file: true,
// a custom "Group" menu item with two options is specified
menu: {
value: "Group",
data: [
{ id: "option-1", value: "Option 1" },
{ id: "option-2", value: "Option 2" },
],
},
},
upload: "https://docs.webix.com/richtext-backend/images",
on: {
onMenuItemClick(item) {
webix.message(item);
}
}
});
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: "someText"
});
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