Опишу как решалась данная задача в части добавления кнопки и открытия модального окна для загрузки изображений в модуле . Код приведенный в статье можно найти в файлах данного решения.
1. Вначале необходимо подключить наш js скрипт при загрузке визуального редактора. Регистрируем наш обработчик в файле модуля install.php
function InstallDB($arParams = array())
{
RegisterModuleDependences('fileman', 'OnBeforeHTMLEditorScriptRuns', '.self::MODULE_ID.', 'CSotbitHtmlEditorAddition', 'OnIncludeHTMLEditorScriptRuns');
return true;
} |
2. В подключаемом методе реализуем регистрацию своего расширения для добавления кнопки в визуальный редактор и инициализируем его
Class sotbit_htmleditoraddition extends CModule
{
public function OnIncludeHTMLEditorScriptRuns()
{
/*Регистрируем расширение, с подключением основного скрипта и подключением языкового файла*/
CJSCore::RegisterExt('sotbit_htmleditor_additional', array(
/*Путь до скрипта расширения*/
'js' => '/bitrix/tools/'.self::MODULE_ID.'/js/script.js',
/*Путь до языкового файла*/
'lang' => '/bitrix/modules/'.self::MODULE_ID.'/lang/'.LANGUAGE_ID.'/install/tools/'.self::MODULE_ID.'/js/script.php',
));
//Инициализируем наше расширение
CJSCore::Init(array('sotbit_htmleditor_additional'));
}
} |
3. В файле подключаемого скрипта script.js реализуем вывод кнопки с вызовом модального окна и его описанием.
BX.addCustomEvent('OnEditorInitedBefore', function(editor)
{
/*Объект визуального редатора*/
var _this=this;
var _class = 'sotbit_htmleditor';
/*Описание кнопки добавляемой в визуальный редактор*/
this.AddButton({
iconClassName: 'bxhtmled-button-sotbit-add-img',
/*Путь до иконки кнопки*/
src: '/bitrix/tools/sotbit.htmleditoraddition/images/sotbit_add_img_icon.png',
id: 'sotbit-add-img',
/*Названия кнопки из языкового файла*/
name: BX.message('SOTBIT_HTML_EDITOR_MODAL_IMAGES_TITLE'),
/*Событие по нажатию на кнопку*/
handler:function(e){
/*Описание модального окна */
var SotbitDialogAddImg = new BX.CDialog({
/*Заголовок модального окна из языкового файла*/
title: BX.message('SOTBIT_HTML_EDITOR_MODAL_IMAGES_TITLE'),
/*Путь до файла контента отображаемого в модальном окне*/
content_url: '/bitrix/tools/sotbit.htmleditoraddition/include/ajax/loadImg.php',
/*Запрос к файлу с контентом модального окна*/
content_post: 'ajax=yes&action=openWindow,
min_width:400,
min_height:400,
/*Описание кнопок модального окна*/
buttons: [
/*Описание кнопки загрузку изображений в визуальный редактор*/
{
/*Заголовок кнопки из языкового файла*/
title: BX.message('SOTBIT_HTML_EDITOR_MODAL_IMAGES_BTN_LOADIMG'),
name: 'loadImg',
id: 'loadImg',
/*Действие по нажатию на кнопку*/
action: function () {
/*Действие выполняемое по нажатию данной кнопки в части обработки изображений можно найти в данном файле script.js модуля */
/*Получение контента визуального редактора*/
var content = _this.GetContent();
/*После обработки content и получения нового контента (content_new), устанавливаем новый контент в визуальный редактор*/
_this.SetContent(content_new, true);
_this.ReInitIframe();
/*Закрытие модального окна*/
_thisBtn.parentWindow.Close();
},
/*Вывод кнопки отмены в модальном окне*/
BX.CDialog.prototype.btnCancel,
]
});
/*Вызов модального окна описанного выше*/
SotbitDialogAddImg.Show();
}
});
});
|
В итоге в визуальном редакторе выводится кнопка:
по нажатию на которую выводится модальное окно:
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
