Своя кнопка в визуальном редакторе Битрикс

Своя кнопка в визуальном редакторе Битрикс

1. Вешаем обработчик события OnBeforeHTMLEditorScriptRuns в котором регистрируем свое расширение:

\Bitrix\Main\EventManager::getInstance()->addEventHandler(
    'fileman',
    'OnBeforeHTMLEditorScriptRuns',
    'OnBeforeHTMLEditorScriptRunsHandler'
);

function OnBeforeHTMLEditorScriptRunsHandler()
{
    $path = '/path_to_files';
    \CJSCore::RegisterExt('citfact_html_edit', [
        'js' => [
            $path.'/js/visual_editor.js',
        ],
        'css' => [
            //$path.'/css/citfact_html_edit.css'
        ]
    ]);
    \CJSCore::Init(array('citfact_html_edit'));
}

2. В JS-файле, который мы указали в своем расширении, цепляемся к событию начала формирования редактора и добавляем кнопку:

BX.addCustomEvent('OnEditorInitedBefore', function (editor) {
var _editor = editor;
    /*
    this.AddButton - метод добавления кнопки, принимает:
    iconClassName - класс, который будет висеть на иконке
    src - путь к иконке кнопки
    id - ид тега иконки
    name - всплывашка при наведении на кнопку
    handler - функция - обработчик клика на кнопку, с ним и будем работать.
    */
     this.AddButton({
         iconClassName: 'citfact_html_edit_code',
         src:'/path_to_icon/icon.png',
         id: 'citfact_html_edit_code_btn',
         name: 'Разделитель «Показать еще»',
         handler: function (ev) {
             var htmlCode = '#SHOW_MORE#';
             // вставим код, в то место - _editor.selection.GetRange() - где сейчас курсор
             _editor.InsertHtml(htmlCode, _editor.selection.GetRange());
         }
     });
}); 

Источник