Категории статей
Модернизация iblock.element.add.form: картинки в тексте.
27.03.2017
В процессе реализации проектов с внутренними кабинетами, возникает необходимость в разделах, содержащих формы ввода новых элементов или редактирования текущих элементов информационных блоков. Но тут не всё так гладко как хотелось бы.
В стандартном наборе всех редакций CMS 1С-Битрикс существует стандартный компонент iblock.element.add.form . Как-раз этот компонент, из набора стандартных, позволяет из публичной части добавить новый элемент в инфоблок.
Для многих разработчиков становится большим сюрпризом,что начиная с 12й версии CMS 1C-Битрикс нет возможности в HTML-редакторе вставить медиа-контент в текст анонсного и в текст детального описания элемента. На самом деле это не совсем так. Но, если у Вас есть возможность вставлять картинки прямо в текст, то дальше можно не читать :)
И так, приступим.
1. Вы должны выбрать, что важнее: "возможность вставки картинки в текст, но чуть откатиться назад в версии html-редактора" или "красивый html-редактор, но без возможности вставлять картинки в текст"? Да. Битрикс он таков.
Если выбрали функциональность html-редактора, то Вам уважение и идём дальше.
2. Делаем копию шаблона .default компонента iblock.element.add.form и даём новое имя шаблона, например, myform.
3. Идём в новый шаблон myform и открываем на редактирование файл template.php
4. Займёмся экзекуцией шаблона компонента iblock.element.add.form
Находим следующие строки(некоторые значения могут отличаться):
$LHE = new CHTMLEditor;
$LHE->Show(array(
'name' => "PROPERTY[".$propertyID."][0]",
'id' => preg_replace("/[^a-z0-9]/i", '', "PROPERTY[".$propertyID."][0]"),
'inputName' => "PROPERTY[".$propertyID."][0]",
'content' => $arResult["ELEMENT"][$propertyID],
'width' => '100%',
'minBodyWidth' => 350,
'normalBodyWidth' => 555,
'height' => '200',
'bAllowPhp' => false,
'limitPhpAccess' => false,
'autoResize' => true,
'autoResizeOffset' => 40,
'useFileDialogs' => false,
'saveOnBlur' => true,
'showTaskbars' => false,
'showNodeNavi' => false,
'askBeforeUnloadPage' => true,
'bbCode' => false,
'siteId' => SITE_ID,
'controlsMap' => array(
array('id' => 'Bold', 'compact' => true, 'sort' => 80),
array('id' => 'Italic', 'compact' => true, 'sort' => 90),
array('id' => 'Underline', 'compact' => true, 'sort' => 100),
array('id' => 'Strikeout', 'compact' => true, 'sort' => 110),
array('id' => 'RemoveFormat', 'compact' => true, 'sort' => 120),
array('id' => 'Color', 'compact' => true, 'sort' => 130),
array('id' => 'FontSelector', 'compact' => false, 'sort' => 135),
array('id' => 'FontSize', 'compact' => false, 'sort' => 140),
array('separator' => true, 'compact' => false, 'sort' => 145),
array('id' => 'OrderedList', 'compact' => true, 'sort' => 150),
array('id' => 'UnorderedList', 'compact' => true, 'sort' => 160),
array('id' => 'AlignList', 'compact' => false, 'sort' => 190),
array('separator' => true, 'compact' => false, 'sort' => 200),
array('id' => 'InsertLink', 'compact' => true, 'sort' => 210),
array('id' => 'InsertImage', 'compact' => false, 'sort' => 220),
array('id' => 'InsertVideo', 'compact' => true, 'sort' => 230),
array('id' => 'InsertTable', 'compact' => false, 'sort' => 250),
array('separator' => true, 'compact' => false, 'sort' => 290),
array('id' => 'Fullscreen', 'compact' => false, 'sort' => 310),
array('id' => 'More', 'compact' => true, 'sort' => 400)
),
));
И комментируем всё это. Да-да. Именно комментируем многострочным /* */ Не пугайтесь раньше времени.
5. Выше или ниже закомментированного блока вставляем следующий кусок кода:
$LHE = new CLightHTMLEditor;
$LHE->Show(array(
'id' => preg_replace("/[^a-z0-9]/i", '', "PROPERTY[".$propertyID."][0]"),
'width' => '100%',
'height' => '200',
'inputName' => "PROPERTY[".$propertyID."][0]",
'content' => $arResult["ELEMENT"][$propertyID],
'bResizable' => true,
'bAutoResize' => true,
'autoResizeOffset' => 40,
'bUseFileDialogs' => false,
'bFloatingToolbar' => false,
'bArisingToolbar' => false,
'toolbarConfig' => array(
'Bold', 'Italic', 'Underline', 'RemoveFormat',
'CreateLink', 'DeleteLink', 'Image', 'Video',
'BackColor', 'ForeColor',
'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull',
'InsertOrderedList', 'InsertUnorderedList', 'Outdent', 'Indent',
'StyleList', 'HeaderList',
'FontList', 'FontSizeList',
),
));
6. Сохраняем проделанные изменения. Смотрим результат в браузере.
Что тут произошло?
В Битриксе существуют 2 вида HTML-редакторов: собственно "HTML-редактор" и "Упрощённый HTML-редактор". В стандартном шаблоне компонента iblock.element.add.form используется просто "HTML-редактор". Мы его заменили на "Упрощённый HTML-редактор".
"HTML-редактор" - красиво выглядит, неплохо стилизован, более грамотно написан с технической точки зрения, но в нём отсутствует возможность добавления картинок/видео/аудио в текст анонсного описания и детального описания. Вернее, их можно добавить если они находятся на другом ресурсе и доступны из интернета. А вот если Вам нужно разместить картинку, которая лежит на локальном компьютере, то это увы не получится.
"Упрощённый HTML-редактор" - выглядит скромнее, технически реализован скромнее, но прекрасно работает и даёт возможность загрузить картинки/видео/аудио и другие типы документов с локального компьютера прямо во внутрь анонсного и детального описаний элементов.
Тут не будет описываться на что нужно нажать чтобы добавить картинку в документ, так как это стандартные процедуры, подобные всем офисным программам и всем другим html-редакторам.
Однако, считаем Важным отметить, что добавление картинки в текст происходит через медиабиблиотеку, что есть логично. Для тех, кто не знает что это такое и как с этим работать на официальном сайте битрикса есть учебный курс по работе с "медиабиблиотекой". Прямая ссылка на него: ОТКРЫТЬ.
Если Вы не работали с медиабиблиотекой, то ничего страшного нет. Ровно 15-20 минут чтения курса и всё у Вас получится.
Надеемся, что данная статья окажется Вам полезной.
В стандартном наборе всех редакций CMS 1С-Битрикс существует стандартный компонент iblock.element.add.form . Как-раз этот компонент, из набора стандартных, позволяет из публичной части добавить новый элемент в инфоблок.
Для многих разработчиков становится большим сюрпризом,что начиная с 12й версии CMS 1C-Битрикс нет возможности в HTML-редакторе вставить медиа-контент в текст анонсного и в текст детального описания элемента. На самом деле это не совсем так. Но, если у Вас есть возможность вставлять картинки прямо в текст, то дальше можно не читать :)
И так, приступим.
1. Вы должны выбрать, что важнее: "возможность вставки картинки в текст, но чуть откатиться назад в версии html-редактора" или "красивый html-редактор, но без возможности вставлять картинки в текст"? Да. Битрикс он таков.
Если выбрали функциональность html-редактора, то Вам уважение и идём дальше.
2. Делаем копию шаблона .default компонента iblock.element.add.form и даём новое имя шаблона, например, myform.
3. Идём в новый шаблон myform и открываем на редактирование файл template.php
4. Займёмся экзекуцией шаблона компонента iblock.element.add.form
Находим следующие строки(некоторые значения могут отличаться):
$LHE = new CHTMLEditor;
$LHE->Show(array(
'name' => "PROPERTY[".$propertyID."][0]",
'id' => preg_replace("/[^a-z0-9]/i", '', "PROPERTY[".$propertyID."][0]"),
'inputName' => "PROPERTY[".$propertyID."][0]",
'content' => $arResult["ELEMENT"][$propertyID],
'width' => '100%',
'minBodyWidth' => 350,
'normalBodyWidth' => 555,
'height' => '200',
'bAllowPhp' => false,
'limitPhpAccess' => false,
'autoResize' => true,
'autoResizeOffset' => 40,
'useFileDialogs' => false,
'saveOnBlur' => true,
'showTaskbars' => false,
'showNodeNavi' => false,
'askBeforeUnloadPage' => true,
'bbCode' => false,
'siteId' => SITE_ID,
'controlsMap' => array(
array('id' => 'Bold', 'compact' => true, 'sort' => 80),
array('id' => 'Italic', 'compact' => true, 'sort' => 90),
array('id' => 'Underline', 'compact' => true, 'sort' => 100),
array('id' => 'Strikeout', 'compact' => true, 'sort' => 110),
array('id' => 'RemoveFormat', 'compact' => true, 'sort' => 120),
array('id' => 'Color', 'compact' => true, 'sort' => 130),
array('id' => 'FontSelector', 'compact' => false, 'sort' => 135),
array('id' => 'FontSize', 'compact' => false, 'sort' => 140),
array('separator' => true, 'compact' => false, 'sort' => 145),
array('id' => 'OrderedList', 'compact' => true, 'sort' => 150),
array('id' => 'UnorderedList', 'compact' => true, 'sort' => 160),
array('id' => 'AlignList', 'compact' => false, 'sort' => 190),
array('separator' => true, 'compact' => false, 'sort' => 200),
array('id' => 'InsertLink', 'compact' => true, 'sort' => 210),
array('id' => 'InsertImage', 'compact' => false, 'sort' => 220),
array('id' => 'InsertVideo', 'compact' => true, 'sort' => 230),
array('id' => 'InsertTable', 'compact' => false, 'sort' => 250),
array('separator' => true, 'compact' => false, 'sort' => 290),
array('id' => 'Fullscreen', 'compact' => false, 'sort' => 310),
array('id' => 'More', 'compact' => true, 'sort' => 400)
),
));
И комментируем всё это. Да-да. Именно комментируем многострочным /* */ Не пугайтесь раньше времени.
5. Выше или ниже закомментированного блока вставляем следующий кусок кода:
$LHE = new CLightHTMLEditor;
$LHE->Show(array(
'id' => preg_replace("/[^a-z0-9]/i", '', "PROPERTY[".$propertyID."][0]"),
'width' => '100%',
'height' => '200',
'inputName' => "PROPERTY[".$propertyID."][0]",
'content' => $arResult["ELEMENT"][$propertyID],
'bResizable' => true,
'bAutoResize' => true,
'autoResizeOffset' => 40,
'bUseFileDialogs' => false,
'bFloatingToolbar' => false,
'bArisingToolbar' => false,
'toolbarConfig' => array(
'Bold', 'Italic', 'Underline', 'RemoveFormat',
'CreateLink', 'DeleteLink', 'Image', 'Video',
'BackColor', 'ForeColor',
'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull',
'InsertOrderedList', 'InsertUnorderedList', 'Outdent', 'Indent',
'StyleList', 'HeaderList',
'FontList', 'FontSizeList',
),
));
6. Сохраняем проделанные изменения. Смотрим результат в браузере.
Что тут произошло?
В Битриксе существуют 2 вида HTML-редакторов: собственно "HTML-редактор" и "Упрощённый HTML-редактор". В стандартном шаблоне компонента iblock.element.add.form используется просто "HTML-редактор". Мы его заменили на "Упрощённый HTML-редактор".
"HTML-редактор" - красиво выглядит, неплохо стилизован, более грамотно написан с технической точки зрения, но в нём отсутствует возможность добавления картинок/видео/аудио в текст анонсного описания и детального описания. Вернее, их можно добавить если они находятся на другом ресурсе и доступны из интернета. А вот если Вам нужно разместить картинку, которая лежит на локальном компьютере, то это увы не получится.
"Упрощённый HTML-редактор" - выглядит скромнее, технически реализован скромнее, но прекрасно работает и даёт возможность загрузить картинки/видео/аудио и другие типы документов с локального компьютера прямо во внутрь анонсного и детального описаний элементов.
Тут не будет описываться на что нужно нажать чтобы добавить картинку в документ, так как это стандартные процедуры, подобные всем офисным программам и всем другим html-редакторам.
Однако, считаем Важным отметить, что добавление картинки в текст происходит через медиабиблиотеку, что есть логично. Для тех, кто не знает что это такое и как с этим работать на официальном сайте битрикса есть учебный курс по работе с "медиабиблиотекой". Прямая ссылка на него: ОТКРЫТЬ.
Если Вы не работали с медиабиблиотекой, то ничего страшного нет. Ровно 15-20 минут чтения курса и всё у Вас получится.
Надеемся, что данная статья окажется Вам полезной.