У меня есть редактируемый контент, где пользователь может добавить картинку и написать текст поверх нее.Чтобы добиться этого, я добавляю еще один редактируемый div с содержимым в редактор и устанавливаю фоновое изображение в соответствии с выбранным изображением и позволяю пользователю свободно вводить текст на нем. Проблема, с которой я сталкиваюсь , заключается в том, что я не могу перетаскивать div в редактируемом контенте, как это было бы возможно в обычном текстовом редакторе.С тегами img проблем нет.Я рассмотрел несколько решений:
- добавление кнопки, которая позволяет программно выбирать элемент div, а затем позволяет пользователю перетаскивать его (он работает первый раз в Firefox, затем перестает работать; он не работает)работа в Chrome)
- преобразование div в img с html2canvas (но есть проблемы с удаленными изображениями, и в этом случае усложняется повторное редактирование текста на изображении)
- самый последний подход, который я пробовал, это добавить кнопку, которая при нажатии позволяет со вторым щелчком вставлять div в позицию каретки (все еще пытаюсь реализовать это, но мне это не очень нравится)
Так что мне интересно, есть ли лучший способ справиться с этим.Может быть, SVG?Как бы вы, ребята, сделали это?
Прикрепленный скриншот:
Красный кружок - это div, который имеет изображение в качестве фона итекст сверху.Синий круг - это элементы управления для перемещения или удаления элемента div.