var images = [];
document.body.querySelectorAll("#text")[0].addEventListener("input",render,false);
function render(){
var div = document.body.querySelectorAll("#preview")[0];
var text = document.body.querySelectorAll("#text")[0].value;
images.map(function(el){
var img = "<img width='100px' src='"+el.data+"' />";
text = text.replace(el.textCode,img);
});
div.innerHTML = text;
}
document.body.querySelectorAll("#text")[0].addEventListener("paste",function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function(event){
images.push(new myimg(event.target.result));
document.body.querySelectorAll("#text")[0].value += images[images.length-1].textCode;
render();
}; // data url!
reader.readAsDataURL(blob);
}
}
});
function myimg(data){
this.data = data;
this.textCode = "{image"+images.length+"}";
}
<textarea id="text" cols="30" rows="10"></textarea>
<div id="preview"></div>
Надо добавить в него автоматическую загрузку на сервер, и скрывать текстовый идентификатор картинки в поле
Сборка персонального компьютера от Artline: умный выбор для современных пользователей