CODEWITHSUNDEEP
htmlimagetextareathumbnailsphoto
Adam Halasz
Adam Halasz

Reputation: 58301

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

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.

Upvotes: 34

Views: 78857

Answers (6)

Size
Size

Reputation: 31

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>

enter image description here

Upvotes: 1

MetropolisCZ
MetropolisCZ

Reputation: 605

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.

Upvotes: 0

Hussein
Hussein

Reputation: 42818

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>

Upvotes: 74

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146460

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:

Upvotes: 11

thomasmalt
thomasmalt

Reputation: 1752

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

Upvotes: 2

yangqi
yangqi

Reputation: 683

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

Upvotes: 1

Related Questions