HTML: Есть ли способ показать изображения в текстовом поле?

Итак, я хочу показать image thumbnails тоже в <textarea> вместе с текстом. Если вы знаете решение для JavaScript, которое идеально подходит (если возможно, в vanilla JS).

Вот так:

__________________
|Hello World     |
|  _______       |
|  | Img |       |
|  |     |       |
|  |_____|       |
|Hello again.    |
|  _______       |
|  | Img2|       |
|  |     |       |
|  |_____|       |
|________________|

Как я знаю и видел в div или что-то, что имеет contentEditable="true", позволяет изображение тоже, но позволяет много других тегов HTML и множество вещей, чего я не хочу: |

Я хочу просто text и images.

Ответы

Ответ 1

Используйте атрибут div с атрибутом contentEditable, который действует как текстовое поле. То, как создаются wysiwyg редакторы.

div {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

<div contentEditable="true">Type here. You can insert images too
  <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" />
</div>

Ответ 2

Я понимаю, что вы хотите редактировать текст и фотографии, но... почему это должно быть внутри текстового поля? Такой контроль предназначен для простого текста. В JavaScript много HTML-редакторов:

Ответ 3

вы можете использовать css для установки фонового изображения для textarea, а js - для установки текста

Ответ 4

Короткий ответ - нет, это невозможно, извините.