Как обернуть текст вставленный через визуальный редактор Битрикса в произвольные теги:
Почти все, кто разрабатывает на bitrix, знает, что можно создавать стили для визуального редактора.
Но тут возникает проблема, если стили визуального редактора отличаются от стилей сайта, а контент вставляется в разные части страницы, то нужно как-то однозначно определить место вставки текста из редактора.
Для решения этой проблемы я решил обернуть весь текст из визуального редактора в div с определенным классом и все стили наследовать от него.
Т.е. в файле стилей нам можно будет прописать оформление для всех элементов наследников этого класса. Тогда оформление будет выглядеть одинаково как в самом визуальном редакторе, так и в любой части страницы, т.к. весь код будет обернут в этот div.
Остается только вставлять этот див автоматически в визуальный редактор.
Для этого в init.php добавляем обработчик события подключения визуального редактора и при его инициализации создаем div в который поместим весь контент.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?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> <? } } ?> |
Вместо