将图像插入TextArea

我需要包含图像的textarea。将图像插入TextArea

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

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

我该如何使用textarea来实现它？

2016-05-31 demo

你可以在2列容器中做一个文本区域，左边是文本区域，右边是图像，然后有一个更宽的文本区域，它占据下面的两列。然后在提交数据时只需连接两个文本字段。 $（“＃txtarea1”）。val（）+。$（“＃txtarea2”）。val（）; –

你不能。 Textareas只能包含....文本。不是图像。 – j08691

[HTML：有没有什么方法可以在textarea中显示图像？]（http://stackoverflow.com/questions/3793090/html-is-there-any-way-to-show-images-in-一，textarea的） –

我相信CONTENTEDITABLE DIV是正道走。没有为消毒从这里已经描述CONTENTEDITABLE的div格式化的方法：

Remove formatting from a contentEditable div

为注释有规定，你可能会发现自己未来的权利回到一个textarea尽管这取决于你想多远一起去删除样式。

来源

2016-05-31 14:13:45

使用图像作为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>

来源

2016-05-31 14:07:49

将图像插入TextArea

回答

相关问题