Пожалею коллег из Битрикса, так как все равно разобрался с этим, но тоже прилично скушало время.
[spoiler]
Итак собственно, что надо сделать? Нужно добавить тег в визуальный редактор. Давайте посмотрим на примере двойного тега <CLOSED>, который бы обзначал некую закрытую область на странице. Как это обработать на странице тема другого поста, а здесь нам надо придти вот к такому:
В init.php добавляем такой код:
Он отвечает за то, чтобы отдать виз.редактору нашу JS-ку. JS-файл ложим в /bitrix/admin/htmleditor2/closed_content.js
Вот содержимое файла по шагам.
1. Вставляем кнопку первого тега на панель:
2. Потом вторую:
3. Рисуем кнопки для лайт-версии (например, в админке в форме редактирования элемента ИБ) и в фул-версии (например, в режиме редактирования на сайте):
4. Парсер контента на поиск наших тегов:
Отвечает за визуальное отображение в теле редактора.
5. Обратный парсер контента:
Отвечает за отображение тега closed в режиме кода.
Вот и вся наука.
Картинки:
closed_c1.jpg
closed_c2.jpg
closed_c1_vis.jpg
closed_c2_vis.jpg
Собственно не отказался бы увидеть от такой же иллюстрации работы с модальными окнами
[spoiler]
Итак собственно, что надо сделать? Нужно добавить тег в визуальный редактор. Давайте посмотрим на примере двойного тега <CLOSED>, который бы обзначал некую закрытую область на странице. Как это обработать на странице тема другого поста, а здесь нам надо придти вот к такому:
В init.php добавляем такой код:
AddEventHandler("fileman", "OnBeforeHTMLEditorScriptsGet", "OnBeforeHTMLEditorScriptsGetHandler"); function OnBeforeHTMLEditorScriptsGetHandler($editorName, $arEditorParams) { return Array( "JS" => Array('closed_content.js') ); } |
Он отвечает за то, чтобы отдать виз.редактору нашу JS-ку. JS-файл ложим в /bitrix/admin/htmleditor2/closed_content.js
Вот содержимое файла по шагам.
1. Вставляем кнопку первого тега на панель:
arButtons['closed_content_1'] = ['BXButton', { id: 'closed_content_1', codeEditorMode: false, src: '/images/closed_c1.jpg', name: 'Начать закрытый контент', handler: function() { this.bNotFocus = true; this.pMainObj.insertHTML( '<img src="/images/closed_c1_vis.jpg" __bxtagname="begin_closed_c" __bxcontainer="" />' ); window.bBitrixTabs = true; } } ]; |
2. Потом вторую:
arButtons['closed_content_2'] = ['BXButton', { id: 'closed_content_2', codeEditorMode: false, src: '/images/closed_c2.jpg', name: 'Закончить закрытый контент', handler: function() { this.bNotFocus = true; this.pMainObj.insertHTML( '<img src="/images/closed_c2_vis.jpg" __bxtagname="end_closed_c" __bxcontainer="" />' ); window.bBitrixTabs = true; } } ]; |
3. Рисуем кнопки для лайт-версии (например, в админке в форме редактирования элемента ИБ) и в фул-версии (например, в режиме редактирования на сайте):
if(!window.lightMode) { oBXEditorUtils.appendButton('closed_content_1', arButtons['closed_content_1'], 'standart'); oBXEditorUtils.appendButton('closed_content_2', arButtons['closed_content_2'], 'standart'); } else { for(var bxi=0, bxl=arGlobalToolbar.length; bxi<bxl; bxi++) { if (arGlobalToolbar[bxi +1] == 'line_end') break; } arGlobalToolbar = arGlobalToolbar.slice(0, bxi).concat([arButtons['closed_content_1'], arButtons['closed_content_2']], arGlobalToolbar.slice(bxi + 1)); } |
4. Парсер контента на поиск наших тегов:
function MyContentParser(str) { window.bBitrixTabs = false; str = str.replace(/<closed>/ig, function(str){ window.bBitrixTabs = true; return '<img src="/images/closed_c1_vis.jpg" __bxtagname="begin_closed_c" __bxcontainer="" />'; }); str = str.replace(/<\/closed>/ig, function(str) { return '<img src="/images/closed_c2_vis.jpg" __bxtagname="end_closed_c" __bxcontainer="" />'; } ); return str; } oBXEditorUtils.addContentParser(MyContentParser); |
Отвечает за визуальное отображение в теле редактора.
5. Обратный парсер контента:
function MyUnParser(node) { if (node.arAttributes["__bxtagname"] == 'begin_closed_c') return '<closed>'; else if (node.arAttributes["__bxtagname"] == 'end_closed_c') return '</closed>'; return false; } oBXEditorUtils.addUnParser(MyUnParser); |
Отвечает за отображение тега closed в режиме кода.
Вот и вся наука.
Картинки:
closed_c1.jpg
closed_c2.jpg
closed_c1_vis.jpg
closed_c2_vis.jpg
Собственно не отказался бы увидеть от такой же иллюстрации работы с модальными окнами