Как переместить картинку в поле ввода?

Question

[Игорь]

<div contenteditable = "true">
   какойто текст
   какойто текст
   <img class = "this-img" src = "img.jpg"  />
   какойто текст
</div>
<button>На строку выше</button>
<button>На строку ниже</button>

Добрый вечер! Вообщем есть див в котором редактируется текст и вставляются изображения.
Суть вопроса, можно ли как-то поднять или опустить вставленную картинку на строку вверх или вниз, спомощью js/jquery? Если можно подскажите как)

Answer 1

[Андрей]

1. Берете содержимое дива
2. Разбиваете на строки
3. Находите строку с картинкой
4. Ставите её куда вам нужно
5. Записываете обратно в див

вот пример: jsfiddle.net/acpcmzwo/1

Comments

[Игорь]

Спасибо Андрей, как всегда все гениальное просто)

[Игорь]

Здравствуйте Андрей, возникла проблема, если в тексте вручную не добавлять переносы, то переносит неправильно.
Вот я тут набросал jsfiddle.net/2dxw43or/5
Помоги если не сложно)

[Андрей]

Игорь: Можно попробовать узнать где находятся разрывы строк, к примеру, посчитав ширину каждой буквы. Такая задача слишком сложна, и заслуживает отдельного вопроса.

Но вопрос, зачем это надо? Разрывы строк будут отличаться у разных пользователей, в зависимости от браузера и настроек системы. Если вы разобьёте строку «шла саша по<разрыв> шоссе», и вставите картинку в разрыв, то у другого пользователя будет «шла саша<разрыв> по шоссе» или даже «шла<разрыв> саша<разрыв> по<разрыв> шоссе»

[Игорь]

Ясно, это такие заморочки заказчика чтобы перемещать картинку на строку в тексте. Я впринципе с этим особо не стсталкивался, поэтому не знал возможно ли вообще. Думал может как попроще можно реализовать. Может как можно мышкой адекватно перетаскивать, ничего неподскажешь?

[Андрей]

Игорь: Можно, конечно, вот пример: www.tinymce.com

[Игорь]

ну это понятно, только весь редактор не нужен, по сути в диве только текст и каринки могут быть, и вот эту картинку нужно как то перемещать. Стандартными функциями браузера она перемещаеться но как очень не удобно. Ладно все равно спасибо за помощь)

[Андрей]

Игорь: отмечайте ответ решением, раз помог

[Игорь]

Андрей: отмечу обязательно, подожду немного может еще кто чего поможет