Добавление своей кнопки в визуальный редактор Битрикс24

• Предисловие
• Создание кнопки
• Создание диалога
• Почему дорабатывать Битрикс24 лучше с нами?

Предисловие

Битрикс24 – универсальный портал с большим количеством инструментов для решения задач компании. Есть функции Битрикса, которые работают во всей системе и они активно используются пользователями, например, создание событий в календаре, выбор пользователей или визуальный редактор.

Что делать если возможностей стандартного инструмента недостаточно для повседневных задач или пользователи тратят много времени для их решения? Можно доработать стандартную функцию, если у вас коробочная версия Битрикс24. Решение также подойдет для 1С-Битрикс: Управление сайтом.

В качестве примера такой доработки рассмотрим добавление своей кнопки в визуальный редактор.

При создании новостей, постов в живую ленту и комментариев к ним, пользователи Битрикс24 ежедневно пользуются визуальным редактором. Возможности редактора позволяют форматировать текст, добавлять в текст изображения, таблицы, видеоролики и пр.

Стандартный визуальный редактор: Используется в административной и публичной части, в режиме правки, в форме написания постов в живой ленте и комментариев к ним.

Иногда стандартного функционала недостаточно или он неудобен — решением может быть добавление своей кнопки в визуальный редактор. Доработка визуального редактора возможна в коробочной версии Битрикс24.

Пример: Контент менеджер публикует новости на портале. Одна новость может содержать несколько изображений, иногда десятки.

В стандартном визуальном редакторе добавление изображений в текст выполняется только по одному, менеджеру придется повторить процедуру выбора для каждого изображения. Проблема: Контент-менеджер тратит много времени на создание одной новости и недоволен от выполнения рутинных задач. Продуктивность падает, полезного контента публикуется меньше.

Решение: добавление своей кнопки, загружающей сразу несколько изображений в текст новости. Контент-менеджер выбирает все изображения разом, дополняет статью текстом — новости публикуются быстрее, сотрудник доволен удобным инструментом.

Что еще можно встроить в визуальный редактор: функционал кнопки может быть почти любым и спроектирован под потребности клиента. Например, можно встроить кнопку голосового набора текста. Вы наговариваете пост, а Битрикс24 перерабатывает слова в текстовое сообщение.

Важная особенность нашего решения — кнопка добавится во все визуальные редакторы.

Ниже мы приведем технические подробности реализации добавления своей кнопки. Эта часть статьи может быть интересна для разработчиков Битрикс24.

Создание кнопки

Допустим, мы хотим добавить свою кнопку, которая будет добавлять в текст набираемого сообщения фразу Hello, World!

Для начала нам потребуется зарегистрировать обработчик события main:OnEpilog (мы же добавляем эту кнопку во все визуальные редакторы?). На этом PHP заканчивается — все остальное мы будем реализовывать на JavaScript.

Своя кнопка — это, по сути, свой класс. Но, так как нам нужно наследоваться от кнопки Битрикса — описывать этот класс мы будем на событии OnEditorBaseControlsDefined.

Для своей кнопки нам нужно указать ее идентификатор и название — остальные аргументы опциональны.
Обратите внимание на BX.extend — именно эта строка заставит визуальный редактор «принять» нашу кнопку.


Мы создали кнопку, теперь нужно вывести ее в визуальном редакторе Битрикса. Для этого нам потребуется подписаться на еще два события визуального редактора — GetTopButtons и GetControlsMap.

И, конечно же, добавить стили.
В данном примере просто возьмём одну из иконок Битрикса.

В данный момент наша кнопка отображается, но ничего не делает — самое время научить ее этому.
В описание кнопки добавим метод OnClick, который будет вызывать диалог для этой кнопки.

Создание диалога

Диалог — окно, которое будет показано при нажатии на нашу кнопку.
Как и кнопка, диалог это отдельный класс, который должен быть создан на том же событии — допустимо разместить его рядом с объявлением класса кнопки.

Также нам необходимо связать ранее созданную кнопку и этот диалог.

Для отображения диалога и управления его контентом нам потребуется описать следующий метод:

В данном случае, в теле диалога будет выведен указанный текст, однако в этом месте допустимо даже подгрузить собственный компонент через AJAX.

Все что нам осталось — описать действия, которые произойдут при нажатии на кнопку «Сохранить».
Пускай в редакторе появляется надпись “Hello, World!”, написанная полужирным шрифтом.

Казалось бы все, но нет.
Потому что из-за ошибки в ядре Битрикса, у нас нет возможности пробросить эту информацию в систему.

Мы можем подсказать Битриксу, что делать, в момент нажатия на кнопку «Сохранить».
Воспользуемся соответствующим событием.

Весь код отлично умещается в один обработчик события.

Но, конечно же, никто не мешает вам декомпозировать это на классы, выделять JS-расширения и делать красиво.

Почему дорабатывать Битрикс24 лучше с нами?

ИНТЕРВОЛГА обладает всеми партнерскими компетенциями для доработки коробочной версии Битрикс24. Наша компания — опытный веб-интегратор, который имеет опыт решения самых разных задач.

Мы предлагаем высокое качество кода и быструю разработку.

Оставьте заявку через форму ниже, если у вас есть задачи для доработки Битрикс24.