Блог

Интеграция с текстовыми онлайн-редакторами

Возможность размещения текстового онлайн-редактора на странице, без сомнения, нужная и полезная вещь. Библиотека Webix предлагает простое решение этой задачи, требующее лишь нескольких строк кода.
В настоящее время Webix поддерживает такие популярные редакторы, как Mercury, NicEdit, Tinymce, CodeMirror и CKEditor.

 Mercury TextEditor

Инициализация текстового редактора

Для того, чтобы встроить любой из этих редакторов в веб-страницу, вам нужно подключить не только файлы Webix, но также и специальный JavaScript файл, который можно скачать из открытого репозитория вспомогательных компонентов Webix. Он подключит выбранный редактор к вашему приложению, а также загрузит дополнительные библиотеки и файлы, необходимые для него.

Чтобы добавить нужный JS файл в ваш документ, нужно указать относительный путь к нему на вашем компьютере. Например, для встраивания Mercury TextEditor, скачайте файл “mercury.js” и подключите его следующим образом:

<script type="text/javascript" src="./mercury.js"></script>

Следующий код инициализирует текстовый редактор на странице. Прежде всего, нужно задать относительный путь к каталогу, откуда будут автоматически загружаться дополнительные библиотеки:

//path from which extra libraries are autoloaded
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:

$$("editor").getValue(); // returns e.g "some<b> text</b> "

Подводим итоги

Как видите, использовать текстовые редакторы с Webix легко, так как не требуется длинного сложного кода, что позволяет экономить ваше время и усилия. Вы можете найти подробную информацию об интеграции Webix c текстовыми редакторами в статье документации.

Автор
The following two tabs change content below.
Olga Kustova

Olga Kustova

Веб-разработчик, умело сочетающий качественный код и эффективный дизайн. Всегда готова делиться тайным знанием Webix с широкой аудиторией.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit