Кастомизация визуального редактора Bitrix

Довольно частая вещь как вставка изображения через визуальный редактор с возможностью увеличения в Bitrix никак не решена.

Можно конечно загрузить 2 варианта изображения (большое и маленькое), в текст вставить изображение превью и указать ссылку на большое. Но хотелось бы автоматизировать этот процесс.

Официальная тех. поддержка отказалась решать эту проблему, а документация не содержала списка событий. Хорошо хоть была возможность перегрузить js класс редактора (Документация). Не понятно было какой из сотен методов мне нужен.

Методом перебора был найден один интересный метод SAttr в котором происходила установка атрибутов абсолютно всех html элементов внутри редактора.
Он принимает внутрь 3 параметра: Объект, Свойство, Значение.

Приведу пример, в котором после загрузки изображения в редактор происходит вставка превью, и устанавливается ссылка на оригинал (Добавлять надо в bitrix/php_interface/init.php):

<?
//событие загрузки визуального редактора
AddEventHandler("fileman", "OnIncludeHTMLEditorScript", "OnIncludeHTMLEditorHandler"); 

//наш обработчик
function OnIncludeHTMLEditorHandler()
{
 ?>
 <script>
        //запоминаем ссылку на родителя
        SAttr_= SAttr;
 SAttr = function (e,a,v) { //элемента, свойство, значение
          //выполняем сначала родителя (устанавливаем свойства)
          this.SAttr_(e,a,v);
          //произошла установка title изображения
          //title может быть установлен при изменении или загрузке изображения
          if(a == 'title' && e.tagName == 'IMG') {
            var src = e.src;

            //формируем новое изображение
            var img = '';
            if(e.hspace > 0) img = img + ' hspace='+e.hspace;
            if(e.vspace> 0) img = img + ' vspace='+e.vspace;
            if(e.border> 0) img = img + ' border='+e.border;
            if(e.align != "") img = img + ' align="'+e.align+'"';
            //if(e.alt!= "") img = img + ' alt="'+e.alt+'"';
            if(e.title!= "") img = img + ' title="'+e.title+'"';

            //вставляем наше измененное изображение
            //я использовал плагин zoomie для jquery, без собственно ресайза изображения
            pObj.pMainObj.insertHTML('<img alt="'+src+'" class="zoomi" width='+e.width+' height='+e.height+' src="'+src+'" '+img+'>');
            
            //удаляем неизмененное изображение
            e.parentNode.removeChild(e);
          }  
 }
 </script>
 <?
}
?>

Пример работы