Возможность размещения текстового онлайн-редактора на странице, без сомнения, нужная и полезная вещь. Библиотека Webix предлагает простое решение этой задачи, требующее лишь нескольких строк кода.
В настоящее время Webix поддерживает такие популярные редакторы, как Mercury, NicEdit, Tinymce, CodeMirror и CKEditor.
Инициализация текстового редактора
Для того, чтобы встроить любой из этих редакторов в веб-страницу, вам нужно подключить не только файлы Webix, но также и специальный JavaScript файл, который можно скачать из открытого репозитория вспомогательных компонентов Webix. Он подключит выбранный редактор к вашему приложению, а также загрузит дополнительные библиотеки и файлы, необходимые для него.
Чтобы добавить нужный JS файл в ваш документ, нужно указать относительный путь к нему на вашем компьютере. Например, для встраивания Mercury TextEditor, скачайте файл “mercury.js” и подключите его следующим образом:
Следующий код инициализирует текстовый редактор на странице. Прежде всего, нужно задать относительный путь к каталогу, откуда будут автоматически загружаться дополнительные библиотеки:
webix.codebase = "./";
//and the constructor
webix.ui({
id:"editor",
view:"mercury-editor", //or nic-editor, etc..
value:"some text"
});
Конструкторы для всех редакторов практически одинаковы. Единственным отличием является имя виджета (view) — mercury-editor, nic-editor, tinymce-editor, codemirror-editor, ckeditor.
Свойста редактора, задаваемые в конструкторе:
- id – задает уникальное ID компонента;
- value – устанавливает исходный текст редактора, который может включать элементы HTML разметки;
- mode – задается для текстового редактора Codemirror – устанавливает режим редактирования (синтаксическую подсветку) для выбранного языка программирования.
Итак, мы получили текстовый редактор на странице. Увидеть результат можно в онлайн-демо.
Работа с текстовыми редакторами
Библиотека Webix предлагает общие методы для выше упомянутых текстовых редакторов, которые позволяют устанавливать и получать значения редакторов через соответствующие компоненты Webix. В то же время, вы можете получить объект самого редактора и работать с ним, используя его специфичный API, описанный на соответствующем сайте.
К примеру, чтобы вернуть текущее значение редактора, вам нужно применить к редактору метод getValue(), обращаясь к нему по его ID:
Подводим итоги
Как видите, использовать текстовые редакторы с Webix легко, так как не требуется длинного сложного кода, что позволяет экономить ваше время и усилия. Вы можете найти подробную информацию об интеграции Webix c текстовыми редакторами в статье документации.
