Модернизация 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 минут чтения курса и всё у Вас получится.

Надеемся, что данная статья окажется Вам полезной.

Возврат к списку