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

Иван А.
Дарья К.

Предисловие

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

События визуального редактора — GetTopButtons и GetControlsMap И, конечно же, добавить стили.
В данном примере просто возьмём одну из иконок Битрикса.

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

добавление метода OnClick для вызова диалога

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24.03.2023
Как мы заново написали модуль учета рабочего времени сотрудников в среде Битрикс24 для инжинирингового холдинга Задача учета времени работы сотрудников всегда актуальна. Для этой цели разработано много инструментов. Если вы пользуетесь Битрикс24, то наверняка знаете ...
10.02.2023
Импортозамещение наоборот или как мы сделали и продаем Обратный SMS-шлюз для Twilio + Bitrix24 Мы сделали приложение для глобального рынка, научились его продвигать и продавать и вышли на $1000+ дохода в месяц (самим немного смешно, но на оплату Goog...
10.02.2023
Экономим время HRa и нервы ИТ-дира, внедряя HR-платформу в Битрикс24 Меня зовут Антон Колодницкий, в компании ИНТЕРВОЛГА я руковожу разработкой HR-платформы для Битрикс24. Сегодня расскажу, как мы помогли улучшить процесс ад...
10.01.2023
Как мы CRM Битрикс24 с кучей всего интегрировали У нас был сложный сайт с личным кабинетом клиентов, устаревшая, переписанная 1С-ка, десяток маркетинговых сервисов, и телефония на Asterisk. Единств...
03.11.2022
Тюнинг HR процессов в компании Брайт Вэй Компания Брайт Вэй - динамично развивающаяся группа компаний, стратегия которой включает реализацию многих значимых проектов в фармацевтической отрасли Рос...
25.07.2022
Настройка вычисляемых и зависимых полей в Salesforce и Битрикс24 Вычисляемые поля в CRM CRM в коммерческом отделе — инструмент, упрощающий работу в компании. Но, как и все инструменты, его также можно и нужно настраивать. ...

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

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

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

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

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

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

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

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