将图像插入文本区域答案

【问题标题】：Insert image into TextArea将图像插入文本区域
【发布时间】：2016-09-29 14:20:56
【问题描述】：

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

我试过 contenteditable div : http://jsfiddle.net/n8WJ2/29/

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

如何仅使用 textarea 来实现它？

【问题讨论】：

您可以在 2 列容器中创建一个文本区域，其中文本区域在左侧，图像在右侧，然后有一个额外的更宽的文本区域占据它下面的两列。然后在提交数据时将两个文本字段连接起来。 $("#txtarea1").val() + .$("#txtarea2").val();
你不能。 Textareas 只能包含....文本。不是图片。
HTML : Is there any way to show images in a textarea?的可能重复

标签： html css image textarea

【解决方案1】：

我相信内容可编辑的 div 是正确的方法。有一种方法可以清除 contenteditable div 中的格式，如这里已经描述的：

Remove formatting from a contentEditable div

正如那里的评论所说，您可能会发现自己马上回到文本区域，但这取决于您想要删除样式的程度。

【讨论】：

【解决方案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>

【讨论】：