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

Иван А.
Дарья К.
Подписаться

Предисловие

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

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

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

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

Стандартный визуальный редактор:
image8.png

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

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

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

image12.png

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

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

image9.png

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

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

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

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

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

image10.png

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

image14.png

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

image2.png

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

image5.png

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

image16.png

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

image13.png

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


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

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

image15.png

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

image3.png

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

image6.png

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

image11.png

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

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

image4.png

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

image1.png

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

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

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

Оставьте заявку через форму ниже, если у вас есть задачи для доработки Битрикс24.
Оцените статью
10.01.2022
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

Статьи по теме

25.07.2022
Настройка вычисляемых и зависимых полей в Salesforce и Битрикс24 Вычисляемые поля в CRM CRM в коммерческом отделе — инструмент, упрощающий работу в компании. Но, как и все инструменты, его также можно и нужно настраивать. ...
14.07.2022
Типы записей Процесса продаж в Salesforce и Направления сделок при переходе на Битрикс24 Редко компании делают что-то одно. Как правило, услуг несколько и этапы в них разные. При этом все эти услуги одновременно или поочередно реализуются одному кл...
07.07.2022
Кейс: Экономия 300 часов HR-службы с помощью Модуля Адаптации сотрудников для Битрикс24Статья о том, как разработка программы для адаптации сотрудников помогла производителю моторных масел и антифризов навести порядок в HR-процессах и добиться эко...
22.06.2022
Salesforce и Битрикс24: сбор и конвертация лидовИмпортозамещение важно для российских компаний, которым нужно заменить иностранное программное обеспечение и сервисы на российские аналоги. В сегменте CRM-сист...
13.05.2022
Обновление модуля ограничения доступа к полям CRM: ограничение доступа в канбане ИНТЕРВОЛГА выпускает готовые решения для Битрикс24, которые расширяют возможности портала за разумные деньги. Сегодня поговорим об обновлении Модуля ограни...
04.02.2022
Кейс: Внутренний портал крупной фармацевтической компании «Цифровой HR» Люди в компаниях не только очень важны, но и очень дороги. В прямом смысле. Дело даже не в заработных платах. Компания со штатом 1-3 тысячи человек тра...

Мы работаем по одному из двух форматов:

  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).

ИНТЕРВОЛГА предоставляет:

  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.

Для доработок и развития мы предлагаем формат 100 часов в месяц. Что можно сделать за это время:

  • новые нетиповые страницы или раздел;
  • 2 отчета с индивидуальными настройками;
  • 3-5 веб-сервисов интеграции;
  • замудренный калькулятор и т.п.

Поддержка «чтобы все работало как часы» стоит 45 тысяч рублей в месяц и описана тут.

Хочешь получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишись на рассылку — спамить не будем