<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#btns{
772px;
height: 24px;
}
#wrapper{
750px;
margin:0 ;
border: 1px solid #ccc;
min-height: 200px;
padding:10px;
padding-bottom: 30px;
}
button{
float: left;
margin-left: 10px;
background: transparent;
display: inline-block;
outline: none;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
border-radius: .5em;
}
</style>
</head>
<body>
<div id="wrapper" contenteditable=""></div>
<div id="btns">
<button id="bold" class="fa fa-bold">B</button>
<button id="btnA" class="fa fa-unlink">链接</button>
<button id="xieti" class=" fa fa-italic">斜体</button>
<button id="sanchuxian" class="fa fa-strikethrough">删除线</button>
<button id="youxu" class= "fa fa-list-ol">有序数列</button>
<button id="wuxu" class= "fa fa-list">无序数列</button>
<button id="charutu" class="fa fa-file-image-o">图像</button>
<button id = "zt">正文</button>
<ul style="display: none;">
<li style="font-size: 36px; list-style-type: none;" class="li1">一级标题</li>
<li style="font-size: 30px; list-style-type: none;" class="li1"> 二级标题</li>
<li style="font-size: 24px; list-style-type: none;" class="li1" > 三级标题</li>
<li style="font-size: 18px; list-style-type: none;" class="li1"> 四级标题</li>
<li style="font-size: 12px; list-style-type: none;" class="li1"> 五级标题</li>
</ul>
</div>
<script type="text/javascript">
btns = document.getElementsByTagName('button');
btn=btns[0];
var zt = document.getElementById('zt');
var u = document.getElementsByTagName('ul')[0];
btn.onclick = () =>{
document.execCommand('bold',false,null);
}
btnA.onclick=()=>{
document.execCommand('createlink',false,'http://www.baidu.com');
}
xieti.onclick=()=>{
document.execCommand('italic',false,null);
}
sanchuxian.onclick=()=>{
document.execCommand('StrikeThrough',false,null);
}
youxu.onclick=()=>{
document.execCommand('insertorderedlist',false,null);
}
wuxu.onclick=()=>{
document.execCommand('insertunorderedlist',false,null);
}
charutu.onclick=()=>{
document.execCommand('insertimage',false,'D:/HTML/images/images/watch.png');
}
</script>
</body>
</html>