Предисловие

Битрикс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: как сэкономить на деловых поездкахЕсли сотрудники часто ездят в командировки, а бюджет на них исчисляется суммой с 6-7 нулями, то можно прилично экономить, автоматизировав процесс в Битрикс24 ...
«Как раньше» больше не работает — B2B-система продаж сейчасВ этой статье хотим поговорить с чем сейчас сталкивается оптовый бизнес (множеством вызовов и изменений, которые требуют адаптации, а также оптимизации процессо...
ИНТЕРВОЛГА — лучшее агентство года по внедрению CRMИНТЕРВОЛГА вновь стала победителем премии RUWARD, учрежденной одним из ключевых рейтинговых агентств на digital-рынке и первой в России AMaaS-платформой. 25 ...
Как учить разработке на Битрикс: наши 20 лет опытаВ статье рассказываем о нашей концепции обучения разработчиков, представляем обновленную Академию Битрикса и рассказываем о влиянии на результат матрицы компете...
Холдинговая структура компании в CRM Битрикс24: все сделки группы на одной странице Если вы используете Битрикс24 для продаж нескольким компаниям объединенным в холдинг, то можно сделать так, чтобы видеть иерархию продаж на уровне всей гру...
Функция b2b-платформы — отправка рекламаций в CRMОптовые покупатели — ключевой сегмент экономики торгово-производственного предприятия, и их удовлетворённость напрямую влияет на успех бизнеса. Новый функционал...
Мы работаем по одному из двух форматов:
  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).
ИНТЕРВОЛГА предоставляет:
  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.
Ключевые услуги:
  • нагруженный интернет-магазин;
  • личный кабинет;
  • оптовые продажи — B2B-платформа;
  • маркетплейс;
  • технический аудит сайта;
  • Битрикс24 — корпоративные HR-порталы;
  • Битрикс24 — построение CRM-системы;
  • Битрикс24 — личные кабинеты сотрудников;
  • Битрикс24 — аудит портала;
  • 1С — интеграция с другими системами;
  • 1С — доработка системы;
  • маркетинг — комплексное интернет-продвижение;
  • маркетинг — продвижение для B2B.
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем