将图片插入TextArea

Question

我需要包含图片的textarea。

我已尝试contenteditable div：http://jsfiddle.net/n8WJ2/29/

但是有问题，我可以插入任何文字（我的意思是文字，有一些风格）。我只想要文字，白色风格。

如何仅使用textarea实现它？

Answer 1

将图片用作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>

Answer 2

我相信一个可疑的div是正确的方法。有一种方法可以从可信任的div中清除格式化，如下所述：

Remove formatting from a contentEditable div

正如评论所述，你可能会发现自己会回到textarea，尽管取决于你想要删除样式的距离。