Вставить изображение в TextArea

Question

Мне нужна текстовая область, которая содержит изображение.

Я попытался contenteditable DIV: http://jsfiddle.net/n8WJ2/29/

Но есть проблема, что я могу вставить любой текст (я имею в виду текст, который имеет несколько стилей). Я просто хочу текст, стили whitout.

Как это реализовать, используя только textarea?

Answer 1

Я считаю, что contenteditable ДИВ правильный путь идти. Существует способ дезинфицировать форматирование из contenteditable дивы, как уже описано здесь:

Remove formatting from a 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>