Добавление собственной кнопки в визуальный редактор Битрикса
14 июля 2021
Кнопки понадобились для выделения определённых частей текста зелёным и красным фоном. Это достигается путём оборачивания строки в теги <span class="sum_pos">текст</span> и <span class="sum_neg">текст</span> соответственно.
Добавленные кнопки в редакторе выглядят вот так:
Код вызывается перед запуском скриптов визуального редактора и выполняет подключение самописного JS-файла /js/admin/visual_editor_add_buttons.js. Вы можете указывать свой собственный файл, не обязательно что бы он назывался таким же именем.
Готово
Добавленные кнопки в редакторе выглядят вот так:

Шаг 1. init.php
В файл /bitrix/php_interface/init.php или /local/php_interface/init.php (смотря где у вас находится основной файл) нужно добавить следующий код:/* Событие срабатывает перед запуском скриптов визуального редактора */
AddEventHandler("fileman", "OnBeforeHTMLEditorScriptRuns", "vb_OnBeforeHTMLEditorScriptRuns");
function vb_OnBeforeHTMLEditorScriptRuns()
{
GLOBAL $APPLICATION;
//Скрипт, добавляющий новые кнопки в визуальный редактор
$APPLICATION->AddHeadScript('/js/admin/visual_editor_add_buttons.js');
}
Код вызывается перед запуском скриптов визуального редактора и выполняет подключение самописного JS-файла /js/admin/visual_editor_add_buttons.js. Вы можете указывать свой собственный файл, не обязательно что бы он назывался таким же именем.
Шаг 2. visual_editor_add_buttons.js
В созданный файл /js/admin/visual_editor_add_buttons.js добавляем следующий код:BX.addCustomEvent('OnEditorInitedBefore', function(editor){
/* Кнопка "Зелёный фон" */
this.AddButton({
compact: true, /* расположить на передней панели */
toolbarSort: 201, /* сортировка */
iconClassName: 'vb_btn_sum_pos',
src: '/images/admin/visual_editor/vb_btn_sum_pos.png',
id: 'vb_btn_sum_pos',
name: 'Положительное значение',
/* Нажатие на кнопку */
handler: function(e){
var range = editor.selection.GetRange();
if(typeof(range)!='undefined' && range!='')
{
var
html_applier = {},
el_tag = 'span',
el_class = 'sum_pos';
html_applier[el_tag + ':' + el_class] = new editor.HTMLStyler(editor, [el_tag], '', el_class, true);
range = html_applier[el_tag + ':' + el_class].ToggleRange(range);
editor.selection.SetSelection(range);
}
}
});
/* Кнопка "Красный фон" */
this.AddButton({
compact: true, /* расположить на передней панели */
toolbarSort: 202, /* сортировка */
iconClassName: 'vb_btn_sum_neg',
src: '/images/admin/visual_editor/vb_btn_sum_neg.png',
id: 'vb_btn_sum_neg',
name: 'Негативное значение',
/* Нажатие на кнопку */
handler: function(e){
var range = editor.selection.GetRange();
if(typeof(range)!='undefined' && range!='')
{
var
html_applier = {},
el_tag = 'span',
el_class = 'sum_neg';
html_applier[el_tag + ':' + el_class] = new editor.HTMLStyler(editor, [el_tag], '', el_class, true);
range = html_applier[el_tag + ':' + el_class].ToggleRange(range);
editor.selection.SetSelection(range);
}
}
});
});
Готово