イメージをテキストエリアに挿入

Question

イメージが含まれているtextareaが必要です。

私はcontenteditableのdiv試してみた：http://jsfiddle.net/n8WJ2/29/

をしかし、私は、任意のテキストを挿入することができないという問題は、（私はいくつかのスタイルを持っているテキストを、意味）があります。私はちょうどテキスト、ホワイトスタイルをしたい。

textareaを使用して実装するにはどうすればよいですか？

Answer 1

私はのcontentEditableのdivが正しい方法であると考えてい行く。既にここで説明するのcontentEditableのdivから書式を消毒するための方法があります：

Remove formatting from a contentEditable div

コメントが述べたように、あなた自身があなたが行きたいどこまでにもよるがテキストエリアにすぐに戻ってくるかもしれませんスタイルを削除します。

Answer 2

イメージを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> 
 

テキストが画像をオーバーレイしたくない場合は、次の

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