Как реализовать добавление изображение между текстом в постах
Делаю блог. Есть админка, посты можно как создавать так и редактировать. Структура в панеле редактирования сейчас такая
- заголовок ( input[text] )
- Главное изображение ( input[file] )
- текст ( textarea )
- метки
Текст пишу в textarea и сохраняю в бд ( полный html ).
Как реализовать добавление изображений в текст типо так:
- текст
- изображение
- изображение
- текст
Изображения создаю и храню ссылку в бд.
Ответы (1 шт):
Можно очень по-всякому.
1) Подыскать готовое решение редактора. Может быть очень тяжелым и слишком накрученным. Но выбор тут велик
2) Заменить текстэриа блоком с атрибутом contenteditable. Там из коробки есть специальный метод полнофункционального редактирования контента (почитайте про execCommand()), он же, в свою очередь, включает в себя тип 'insertimage'. Можно добавлять в блок изображения по url-адресу. Примерно так:
<div id='editor' contentEditable />
document.execCommand('insertimage', false, 'http://site.com/anyimage.jpg')
Кстати, если вторым аргументом указывать true, то браузер должен будет предоставить специальную кнопку в contenteditable-блоке для интеграции изображений.
Этот метод нужно больше калибровать - кроме того, contentEditable-блоки надо защищать от атак (в блок по умолчанию, разумеется, можно вставить любой тег, хоть даже script)
3) Реализовать ваш редактор блочно: как статьи в вк. Скажем, есть textarea, а после него кнопка, которой можно добавитьь после него блок с изображением. Тут надо кодить больше всего, зато получится точно красивей (и безопасней)