Предисловие

Битрикс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: быстро, удобно, без ExcelДелимся особенностями внедрения элементов КЭДО в крупной компании: создаем график отпусков прямо в Б24! Без автоматизации на это уходило не меньше недели, сейча...
B2B-SaaS или B2B-система (платформа+CRM) на вашем сервере: плюс и минусы, что выбрать? Введение Эта статья для коммерческих директоров, руководителей отделов продаж производственных и оптово-торговых компаний, которые ищут инструменты для ро...
CRM для B2B-продаж — зачем оно Вам надо?Для сложных B2B-сделок, которые требуют нескольких этапов переговоров, встреч и презентаций, важен систематизированный подход. Этого не достичь без внедрения в ...
Как внедрить CRM Битрикс24 на промышленном предприятии с миллиардным оборотом и не слить бюджет Мы давно и много внедряем Битрикс24 в работу компаний и заметили интересную тенденцию – на CRM Битрикс24 чаще переходят сервисные компании (ритейл, банки, ...
Переезд как 2 пожара. Как перевести процессы с Salesforce на Битрикс24 за 9 недель Интерес к CRM-системам, подогреваемый историями успеха от разработчиков/вендоров/интеграторов, непрерывно растёт. Их выбор редко случаен. CRM, как нервная ...
Мы работаем по одному из двух форматов:
  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).
ИНТЕРВОЛГА предоставляет:
  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.
Ключевые услуги:
  • нагруженный интернет-магазин;
  • личный кабинет;
  • оптовые продажи — B2B-платформа;
  • маркетплейс;
  • технический аудит сайта;
  • Битрикс24 — корпоративные HR-порталы;
  • Битрикс24 — построение CRM-системы;
  • Битрикс24 — личные кабинеты сотрудников;
  • Битрикс24 — аудит портала;
  • 1С — интеграция с другими системами;
  • 1С — доработка системы;
  • маркетинг — комплексное интернет-продвижение;
  • маркетинг — продвижение для B2B.
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем