Поскольку Rich Text Editor - это комплексный виджет, он состоит из отдельных Webix компонентов с их собственным API. Эти компоненты можно переопределить или же работать с отдельными настройками Rich Text Editor.
Чтобы настроить общую конфигурацию виджета, используйте следующие свойства:
value (string) - задает контент, который отображается при инициализации редактора. value задается с использованием формата HTML, который является форматом по умолчанию. Если вы хотите задать значение в другом формате, используйте встроенный метод setValue()
upload (string) - ссылка на URL сервиса Upload, используемая для загрузки и хранения картинок, вставленных в текст. Это свойство необходимо задать, если вы хотите, чтобы функционал вставки картинок работал корректно. Это свойство не задается по умолчанию
layoutMode (string) - режим отображения редактора. Доступны два режима: "classic" и "document".
fullscreen (boolean) - определяет, отображается ли редактор в полноэкранном режиме, по умолчанию false
menubar (boolean, object, array) - определяет, отображается ли дефолтное меню, или задает конфигурацию меню, по умолчанию false
contextMenu (boolean, array) - определяет, отображается ли дефолтное контекстное меню, или задает конфигурацию контекстного меню, по умолчанию false
toolbar (boolean, object, array) - определяет, отображается ли дефолтный тулбар, или задает конфигурацию тулбара, по умолчанию true (задает начальный набор контролов)
compact (boolean) - определяет, отображается ли редактор в компактном режиме
compactWidth (number) - определяет ширину, при которой виджет переключается в компактный режим, по умолчанию 700
datatype (string) - определяет формат начального значения Rich Text Editor, а также определяет дефолтный формат, который будет использоваться для вызовов методов getValue() и setValue()
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
По умолчанию, Rich Text Editor инициализируется с начальным набором кнопок на тулбаре. Вы можете переопределить конфигурацию тулбара одним из следующих способов, описанных ниже. Полный код кнопок тулбара и настроек для групп кнопок.
Чтобы использовать дефолтные кнопки тулбара, задайте в качестве значения свойства toolbar массив, который содержит названия нужных кнопок. Например:
webix.ui({
type: "space",
cols: [
{
view: "editor",
toolbar: ["bold", "italic", "strike", "separator", "link"],
},
],
});
Related sample: Rich Text Editor: Simplified Toolbar
Чтобы задать кастомную конфигурацию тулбара, задайте свойство toolbar как массив, который может содержать как строки с дефолтными названиями кнопок, так и объекты с кастомными конфигурациями кнопок. Например:
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
Вы можете установить группы кнопок тулбара, задав их в качестве свойств объекта toolbar следующим образом:
Например:
webix.ui({
view: "editor",
toolbar: {
// установлена дефолтная группа кнопок "history"
history: true,
// для группы "align" заданы определенные кнопки
align: ["align-left", "align-center", "align-right"],
// в кастомной группе заданы как дефолтные, так и кастомные кнопки
"custom-group": [
"clear",
{
view: "button",
width: 100,
value: "Button",
click: () => webix.message("action"),
}
]
}
});
По умолчанию, меню не отображается в виджете Rich Text Editor. Вы можете включить дефолтное меню, или переопределить его конфигурацию одним из следующих способов, описанных ниже. Полный код элементов меню и конфигурации групп кнопок.
Чтобы использовать дефолтный набор опций меню, задайте свойство menubar и установите его значение в 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
Вы можете задать кастомную конфигурацию меню, установив свойство menubar как массив, либо как объект, которые содержат как дефолтные, так и кастомные настройки. Обратите внимание:
onMenuItemClickЭтот способ позволяет задать меню как с дефолтными, так и с кастомными настройками и/или под-опциями.
Опции меню могут быть заданы строками (для существующих опций) или объектами. Когда опции заданы объектами, они могут содержать следующие свойства:
Например:
webix.ui({
view: "editor",
value: "<p>Some text</p>",
menubar: [
// задает дефолтную опцию меню "File"
"file",
// задает дефолтную опцию меню "Format"
{
id: "format"
},
// задает дефолтную опцию меню "Edit" с определенными дефолтными под-опциями
{
id: "edit",
data: [
{ id: "undo" }, { id: "redo" }
]
},
// задает дефолтную опцию меню "View" с дефолтной и кастомной под-опциями
{
id: "view",
data: [
{ id: "mode" },
{ id: "view-option", value: "View option" }
]
},
// задает кастомную опцию меню с двумя под-опциями
{
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"
});
Данный подход также позволяет задать меню как с дефолтными, так и с кастомными настройками и/или под-опциями. Каждая опция меню задается как пара key:value, где:
webix.ui({
view: "editor",
value: "<p>Some text</p>",
menubar: {
// задает дефолтную опцию меню "File"
file: true,
// задает дефолтную опцию меню "Edit" с определенными дефолтными под-опциями
edit: {
data: [
{ id: "undo" }, { id: "redo" }
]
},
// задает дефолтную опцию меню "View" с дефолтной и кастомной под-опциями
view: {
data: [
{ id: "mode" },
{ id: "view-option", value: "View option" }
]
},
// задает кастомную опцию меню с двумя под-опциями
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
По умолчанию, контекстное меню не отображается в виджете Rich Text Editor. Вы можете включить дефолтное контекстное меню или переопределить его конфигурацию. Полный код конфигурации контекстного меню.
Чтобы добавить дефолтное контекстное меню в Rich Text Editor, установите значение свойства contextMenu в true.
webix.ui({
view: "editor",
value: "<p>Some text</p>",
contextMenu: true,
upload: "https://docs.webix.com/editor-backend/images"
});
Дефолтное контекстное меню включает следующие группы опций: "clipboard", "format" и "insert".
Вы можете задать кастомную конфигурацию контекстного меню, чтобы отобразить дефолтные, кастомизированные и кастомные опции, используя свойство contextMenu как массив. Обратите внимание:
onContextMenuItemClick Опции могут быть заданы как строки (id существующих опций) или как объекты. Если опции заданы как объекты, они могут содержать следующие свойства:
Например:
webix.ui({
view: "editor",
value: "<p>Some text</p>",
contextMenu: [
// дефолтные опции контекстного меню
"bold",
"italic",
{ $template: "Separator" },
// опции, которые есть в Editor меню, с другими лейблами
{
id: "docx",
value: "Export to DOCX",
icon: "rti-document"
},
{
id: "print",
value: "Print",
icon: "rti-print"
},
// кастомная опция, которая может быть обработана в onContextMenuItemClick
{
id: "print-selection",
value: "Print selection",
icon: "rti-print"
},
],
on: {
onContextMenuItemClick(id) {
webix.message(id);
}
},
upload: "https://docs.webix.com/richtext-backend/images"
});
Свойства layoutMode, fullscreen, menubar, toolbar и contextMenu также доступны как реактивные через состояние виджета. Они хранят глобальное состояние приложения, и позволяют разработчикам отслеживать его изменения. Любые изменения реактивных свойств незамедлительно отражаются в интерфейсе. Также у Rich Text Editor есть и другие свойства:
activeStyles (object) - хранит стили, которые используются под текущей позицией курсора. Дефолтное значение - {}
selectedImage (null, object) - объект выделенной картинки, по умолчанию null. Содержит следующие поля:
editImage (null, object) - хранит настройки картинок, пока редактор открыт. Дефолтное значение - null. Объект редактирования картинки может содержать следующие опции:
paintMode (object) - объект с текущим состоянием режима "формат по образцу". Содержит следующие поля:
{ enabled: true, continuous: false } - включен обычный режим "формат по образцу"{ enabled: false, continuous: true } - функция многократного применения включена, режим "формат по образцу" выключен{ enabled: true, continuous: true } - функция многократного применения и режим "формат по образцу" включены{ enabled: false, continuous: false } - режим "формат по образцу" выключенЧтобы получить состояние объекта, вызовите метод getState():
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
}
*/
Следить за изменениями реактивных свойств можно с помощью обработчика $observe:
const state = $$("editor").getState();
state.$observe("layoutMode", v => webix.message(`Layout mode: ${v}`));
state.layoutMode = "document";
Related sample: Rich Text Editor: State Observer
В примере выше, текущий state доступен через экземпляр JetApp, который, в свою очередь, доступен в обработчике onInit.
Наверх