HTML : Is there any way to show images in a textarea?

Question

So I want to show image thumbnails too in the <textarea> along with text. If you know a javascript solution that's perfect too(if possible in vanilla JS).

Like this:

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

As I know and seen in a div or anything what has contentEditable="true" allows image too but, allows many other HTML tags and a lots of things what I don't want :|

I want just text and images.

score 74 · Answer 1 · edited Jan 28 '15 at 17:32

74

Use a div with contentEditable attribute which acts like a textarea. That's how wysiwyg editors are created.

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>

edited Jan 28 '15 at 17:32

k0pernikus

60,309
67
216
347

answered Apr 09 '11 at 19:56

Hussein

42,480
25
113
143

4

The example does really strange things if I try to insert newlines. In Chrome at least. – aroth May 29 '14 at 03:39
@aroth Looks like it's because every newline creates a new `div` element, and every `div` has width, height, and border properties. – KhalilRavanna Mar 17 '15 at 19:53

score 11 · Answer 2 · answered Sep 25 '10 at 09:06

11

I understand you want to edit text and pictures but... why does it have to be inside a textarea? Such control is designed to hold plain text. There're many HTML editors written in JavaScript:

answered Sep 25 '10 at 09:06

Álvaro González

142,137
41
261
360

1

Because I don't want to build a complex editor, as I said I want just `text` and `photos`. – Adam Halasz Sep 25 '10 at 09:20
The user's question was specifically regarding a text-area. – Dustin Oprea Jul 14 '12 at 08:30
4

@DustinOprea - That's impossible. Period. The `` element can only hold plain text, not other nodes. – Álvaro González Jul 15 '12 at 07:33

score 2 · Answer 3 · answered Sep 25 '10 at 08:56

2

The short answer is no, it's not possible, sorry.

answered Sep 25 '10 at 08:56

thomasmalt

1,718
11
15

1

Thanks for you answer @thomasmalt , then what do you suggest how should I do it? – Adam Halasz Sep 25 '10 at 08:58
I'm not sure what you're trying to achieve. Do you want to use textarea with images to display your content to the user, or do you want to use textarea in a form where the user provides text and uploads images? – thomasmalt Sep 25 '10 at 09:47

score 1 · Answer 4 · answered Sep 25 '10 at 08:51

1

you can use css to set an background image for textarea, and js to set the text

answered Sep 25 '10 at 08:51

yangqi

673
6
13

I don't want a background for the textarea, I want to have images inside the textarea. Or do you mean to hack the textarea with a background so it would look like there is an image inside the textarea? If yes then that's not a good idea because there will be multiple images, and can be updated and deleted too. Edited my question to illustrate it. – Adam Halasz Sep 25 '10 at 08:54
As far as I know, you can't use images in a textarea, neither a background-image set with CSS nor an img element. – matsolof Sep 25 '10 at 13:44
I don't know what you wanna do, but you can insert anything but plain text inside the textarea. While you do can use CSS to set a background image for an textarea, if you wanna change it, you can then use javascript to change the background. – yangqi Sep 25 '10 at 16:22

score 0 · Answer 5 · answered Apr 16 '21 at 10:15

0

You can write a script (ideally in PHP) which checks if there is unwanted element (another than <p> or <img>).

Then you can send user back to "form" and let him to fill again or you can delete the whole unwanted tags.

answered Apr 16 '21 at 10:15

MetropolisCZ

567
1
8
20

HTML : Is there any way to show images in a textarea?

5 Answers5

Linked