Поэтапная загрузка изображения с описанием.
monach 29.01.2020 Стол заказов 496 0 комментариев
Добрый день!
Есть кулинарный сайт, при добавлении нового рецепта нужно сделать поэтапное описание способа приготовления с картинками.
В обычном редакторе не устраивает писать, нужно именно чтобы было поле для загрузки картинки, и для краткого описания. Таких полей будет до 15 шт. Появляться будут при нажатии на кнопку.
Вот пример:
При нажатии на кнопку появляется еще одно поле для ввода:
Я частично решил задумку, но проблема в том, что мне нужно загружать картинку в отдельный блок, примерно как выше на скринах.
Значит что я сделал, я взял div добавил в него contenteditable, в итоге получил своеобразный редактор.
Также есть textarea, в который и передается вся информация из DIV.
Вот как выглядит код:
Нужно реализовать добавление картинки как на скрине.
Есть кулинарный сайт, при добавлении нового рецепта нужно сделать поэтапное описание способа приготовления с картинками.
В обычном редакторе не устраивает писать, нужно именно чтобы было поле для загрузки картинки, и для краткого описания. Таких полей будет до 15 шт. Появляться будут при нажатии на кнопку.
Вот пример:
При нажатии на кнопку появляется еще одно поле для ввода:
Я частично решил задумку, но проблема в том, что мне нужно загружать картинку в отдельный блок, примерно как выше на скринах.
Значит что я сделал, я взял div добавил в него contenteditable, в итоге получил своеобразный редактор.
Также есть textarea, в который и передается вся информация из DIV.
Вот как выглядит код:
<div class="editor wysiwygeditor"></div>
<div class="editor wysiwygeditor"></div>
<div class="editor wysiwygeditor"></div>
<div class="editor wysiwygeditor"></div>
<textarea name="xfield[dop-sortstory-instrukt]" id="xf_[dop-sortstory-instrukt]" class="wysiw" required="required"></textarea>
Нужно реализовать добавление картинки как на скрине.