Тектовый редактор с возможность вставки изображений

Тектовый редактор с возможность вставки изображений

by twobomb three

HTML

Скопируйте картнкку или сделайте скриншот ( кнопка PrintScreen) нажмите на textarea и нажмите ctr+v<br>
<textarea  id="text" cols="30" rows="10"></textarea>
<div id="preview"></div>

JavaScript

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+"}";
}