HTML编辑器

<button onclick="weight()">加粗</button>
<input type="color" id="e" onchange="changeColor()" />
<input type="file" id ="f" onchange="addPicture()" />
<br/> <br/>
<div contenteditable id="d1" style="width:900px;height:500px;border:1px solid red;overflow:auto;">

</div>

<script>
function weight(){
var range = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
span.style.fontWeight = 900;
range.surroundContents(span);
}

function changeColor(){
var range = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
span.style.color = e.value;
range.surroundContents(span);
}

function addPicture(){
var range = window.getSelection().getRangeAt(0);
var picture = document.createElement("img");
var fileReader = new FileReader();
fileReader.readAsDataURL(f.files[0]);
fileReader.onload = function(){
picture.src = this.result;
range.insertNode(picture);
}
}
</script>