Insert image into TextArea

Question

I need textarea, that contains image.

I've tried contenteditable div : http://jsfiddle.net/n8WJ2/29/

But there is problem, that I can insert any text (I mean text, that has some styles). I just want text, whitout styles.

How can I implement it using just textarea?

You could do one textarea in a 2 column container with the text area on left and image on right and then have an additional wider text area that takes up both columns below it. Then just concatenate the two text fields when submitting the data. $("#txtarea1").val() + .$("#txtarea2").val(); — Dan Weber, May 31 '16 at 14:12
Possible duplicate of [HTML : Is there any way to show images in a textarea?](http://stackoverflow.com/questions/3793090/html-is-there-any-way-to-show-images-in-a-textarea) — Francisco Romero, May 31 '16 at 14:15

Ani Menon · Answer 1 · 2016-06-05T15:33:20.793

Use the image as background-image.

.rgtDiv {
    min-height: 300px;
    border: solid 1px #ccc;
    background-image:url('http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg');
}

<div>
  <div contenteditable="true" class="rgtDiv"></div>
</div>

If don't want text to overlay the image:

.flt_rght {
  float: right;
  height: 200px;
}

.rgtDiv {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  border: solid 1px #ccc;
}

<div>
  <img src='http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg' class="flt_rght" />
  <div contenteditable="true" class="rgtDiv">  </div>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

I believe a contenteditable div is the right way to go. There is a method for sanitizing formatting from contenteditable divs as already described here:

Remove formatting from a contentEditable div

As a comment there stated, you may find yourself coming right back to a textarea though depending on how far you want to go with removing styles.

edited May 23 '17 at 11:58

Community

1
1

answered May 31 '16 at 14:13

Robert Talada

317
1
10

Insert image into TextArea

2 Answers2