Свои теги в визуальном редакторе битрикса

Как обернуть текст вставленный через визуальный редактор Битрикса в произвольные теги:
Почти все, кто разрабатывает на bitrix, знает, что можно создавать стили для визуального редактора.
Но тут возникает проблема, если стили визуального редактора отличаются от стилей сайта, а контент вставляется в разные части страницы, то нужно как-то однозначно определить место вставки текста из редактора.

Для решения этой проблемы я решил обернуть весь текст из визуального редактора в div с определенным классом и все стили наследовать от него.
Т.е. в файле стилей нам можно будет прописать оформление для всех элементов наследников этого класса. Тогда оформление будет выглядеть одинаково как в самом визуальном редакторе, так и в любой части страницы, т.к. весь код будет обернут в этот div.
Остается только вставлять этот див автоматически в визуальный редактор.
Для этого в init.php добавляем обработчик события подключения визуального редактора и при его инициализации создаем div в который поместим весь контент.

<?php
//событие подключения визуального редактора
AddEventHandler("fileman", "OnIncludeHTMLEditorScript", array("MyHandlers", "OnIncludeHTMLEditorScript"));


class MyHandlers {

   public static function OnIncludeHTMLEditorScript()
   {
      ?>
      <script type="text/javascript">
      //получаем указатель на полотно визуального редактора
      BXHTMLEditor.prototype.SetView_ = BXHTMLEditor.prototype.SetView;
      BXHTMLEditor.prototype.SetView = function (sType) {
         var result = this.SetView_(sType);
         var html = undefined;
         if(BX.browser.IsIE()) {
            try {
               html = this.pEditorDocument.body;
            } catch (e) {
               //
            }         
         } else {
            try {
               html = this.pEditorWindow.document.body;
            } catch (e) {
              //
            }
         }
         if( sType == "html" && html ) {
            //обертываем в DIV, если его еще нет
            if( html.innerHTML.indexOf('<div class="content">') == -1 ) {
              html.innerHTML = '<div class="content">'+html.innerHTML+'</div>';
            }
         }
         return result;
      };
      </script>
      <?
   }
}
?>

<?php

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

AddEventHandler("fileman", "OnIncludeHTMLEditorScript", array("MyHandlers", "OnIncludeHTMLEditorScript"));

class MyHandlers {

public static function OnIncludeHTMLEditorScript()

{

//получаем указатель на полотно визуального редактора

BXHTMLEditor.prototype.SetView_ = BXHTMLEditor.prototype.SetView;

BXHTMLEditor.prototype.SetView = function (sType) {

var result = this.SetView_(sType);

var html = undefined;

if(BX.browser.IsIE()) {

try {

html = this.pEditorDocument.body;

} catch (e) {

}

} else {

try {

html = this.pEditorWindow.document.body;

} catch (e) {

}

if( sType == "html" && html ) {

//обертываем в DIV, если его еще нет

if( html.innerHTML.indexOf('<div class="content">') == -1 ) {

html.innerHTML = '<div class="content">'+html.innerHTML+'</div>';

}

return result;

};

</script>

}

Вместо

можно написать

Заметки про JQuery, PHP, Битрикс, Modx и другое:)

Свои теги в визуальном редакторе битрикса

Добавить комментарий Отменить ответ