将图像插入文本区域

Question

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

我已经尝试过

contenteditable

div：http://jsfiddle.net/n8WJ2/29/

但是有一个问题，我可以插入任何文本（我的意思是文本，有一些样式）。我只想要文字，没有样式。

如何仅使用

textarea

来实现它？

Answer 1

我相信 contenteditable div 是正确的选择。有一种方法可以清理 contenteditable div 的格式，如下所述：

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

Answer 3

就我而言，可以将图像作为文本插入。 示例：

✅ 图片后的文字

这种类型的图片比较多，比如📂、📝。我喜欢在某些页面中将它们用作替代大小写： 例如：