HTML: есть ли способ показать изображения в текстовой области? - PullRequest
Новая
       6

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

25 голосов
/ 25 сентября 2010

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

Примерно так: 

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

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

Я хочу только text и images.

Ответы [ 4 ]

56 голосов
/ 09 апреля 2011

Используйте 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>
8 голосов
/ 25 сентября 2010

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

2 голосов
/ 25 сентября 2010

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

1 голос
/ 25 сентября 2010

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

...