将图像插入 TextArea

Question

我需要包含图像的文本区域。

我试过了 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 是正确的方法。有一种方法可以从 contenteditable divs 中清除格式，如下所述：

Remove formatting from a contentEditable div

正如那里的评论所述，您可能会发现自己会立即回到文本区域，但这取决于您希望删除样式的程度。

将图像插入 TextArea

Insert image into TextArea

html

css

textarea

image