將圖像插入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

回答

相關問題