Bild in TextArea einfügen

Question

Ich brauche Textarea, die Bild enthält.

Ich habe versucht, contenteditable div: http://jsfiddle.net/n8WJ2/29/

Aber es gibt Problem, dass ich jeden Text einfügen (I Text bedeutet, dass einige Arten hat). Ich will nur Text, ohne Stile.

Wie kann ich es mit nur textarea implementieren?

Answer 1

Ich glaube, ein contenteditable div ist der richtige Weg gehen. Es gibt ein Verfahren zur Formatierung von contenteditable divs desinfizierenden hier wie bereits beschrieben:

Remove formatting from a contentEditable div

als Kommentar dort angegeben, können Sie sich gleich wieder auf einen Textbereich finden kommen allerdings je nachdem, wie weit Sie mit hinwollen Stile entfernen

Answer 2

Verwenden Sie das Bild als 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> 
 

Wenn Text nicht um das Bild zu überlagern möchten:

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