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.

Charles

Answer 1

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>

Russell

The example does really strange things if I try to insert newlines. In Chrome at least. – Edelweiss

@Edelweiss Looks like it's because every newline creates a new div element, and every div has width, height, and border properties. – Evelunn

the answer doesn't address his question. Is it possible? if not then please state so then proceed with additional information – Sanatorium

Answer 2

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:

• http://ckeditor.com/
• http://tinymce.moxiecode.com/
• http://www.openwebware.com/
• http://www.unverse.net/whizzywig-cross-browser-html-editor.html
• http://www.htmlarea.com/
• ...

Unalienable

Because I don't want to build a complex editor, as I said I want just text and photos. – Charles

The user's question was specifically regarding a text-area. – Manaker

@DustinOprea - That's impossible. Period. The <textarea> element can only hold plain text, not other nodes. – Idem

Answer 3

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

Theolatheologian

Thanks for you answer @Theolatheologian , then what do you suggest how should I do it? – Charles

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? – Theolatheologian

Answer 4

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

Shiksa

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. – Charles

As far as I know, you can't use images in a textarea, neither a background-image set with CSS nor an img element. – Magdalenemagdalenian

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. – Shiksa

Answer 5

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>

Confraternity

Answer 6

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.

Aeschylus