Добавление собственной кнопки в визуальный редактор Битрикса

Кнопки понадобились для выделения определённых частей текста зелёным и красным фоном. Это достигается путём оборачивания строки в теги <span class="sum_pos">текст</span> и <span class="sum_neg">текст</span> соответственно.

Добавленные кнопки в редакторе выглядят вот так:

Шаг 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);
			}
		}
	});

});

Готово