Как добавить кнопку в тулбар нового визуального редактора Битрикс

Как добавить кнопку в тулбар нового визульного редактора БИТРИКС

12 Ноября, 2014, 14:36
Варухин Илья

bitrix, битрикс, записки программиста, javascript, новый визуальный редактор битрикс

При разработке нового модуля для Битрикса, о работе над которым мы обязательно поговорим отдельно, мы обнаружили катастрофическую нехватку информации о работе нового визуального редактора, добавленного с 13 версии системы управления Bitrix, так же известного как Bitrix HTML Editor 3.0

Перед нами стояла простая, на первый взгляд, задача добавить собственную кнопку в тулбар визуального редактора, с собственным обработчиком события и собственной иконкой

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

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

Не буду утомлять вас описанием, взгляните на простой код, который необходимо вставить в JS файл расширения вашего модуля.

Код:

    BX.addCustomEvent('OnEditorInitedBefore',function(toolbar){
        var _this=this;
        this.AddButton({
            iconClassName:'bxhtmled-button-modulename',    
            src:'modulename_icon.png',    
            id:'modulename',    
            title:BX.message('modulename'),    
            handler:function(e){
              alert('Обрабатываем нажатие на кнопку!');

            }
        });
    });