代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="lauwcy">
<title>编辑器</title>
<style>
article{
border: solid 1px silver;
box-shadow: inset 0 0 5px silver;
padding: 10px;
min-height: 15rem;
overflow: auto;
resize: vertical;
}
button{
margin: 5px 0;
padding: 5px 5px;
background-color: silver;
border: 1px solid silver;
}
</style>
</head>
<body>
<button data-cmd="formatBlock" data-value="H1">h1</button>
<button data-cmd="formatBlock" data-value="H2">h2</button>
<button data-cmd="formatBlock" data-value="H3">h3</button>
<button data-cmd="formatBlock" data-value="H4">h4</button>
<button data-cmd="formatBlock" data-value="P">P</button>
<button data-cmd="foreColor" data-value="red">red</button>
<button data-cmd="backColor" data-value="yellow">yellow</button>
<button data-cmd="bold" data-value="">Bold</button>
<article contentEditable="true"></article>
<script>
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
var btn = btns[i]
btn.onclick = function(ev) {
var cmd = ev.target.dataset.cmd
var value = ev.target.dataset.value
switch (cmd){
case 'formatBlock':
document.execCommand(cmd, false, '<' + value + '>')
break;
default:
document.execCommand('styleWithCSS', false, true)
document.execCommand(cmd, false, value)
break;
}
}
}
</script>
</body>
</html>
效果如下：
