<ul class="func">
<li class="bgcolor">
<p>背景色</p>
<input class="color" id="color">
</li>
<li class="lh40">
<p id="bold">加粗</p>
</li>
<li class="lh40">
<p id="copy">复制</p>
</li>
<li>
<p id="createlink" class="lh40">超链接</p>
<div class="layer dn" id="layer" >
<input type="text" id="url"/>
<p id="close">close</p>
</div>
</li>
<li class="lh40">
<p id="delete">删除</p>
</li>
<li>
<p>字体样式</p>
<select name="" id="fontname">
<option value="宋体" selected>宋体</option>
<option value="微软雅黑">微软雅黑</option>
</select>
</li>
<li class="fzcolor">
<p>字体色</p>
<input class="color" id="fontcolor">
</li>
<li>
<p>字体大小</p>
<select name="" id="fontsize">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</li>
<li>
<p>标签</p>
<select name="" id="tag">
<option value="<h1>">h1</option>
<option value="<h2>">h2</option>
<option value="<h3>">h3</option>
<option value="<h4>">h4</option>
<option value="<h5>">h5</option>
<option value="<h6>">h6</option>
</select>
</li>
<li>
<p id="indent">缩进</p>
</li>
<li>
<p id="insertimg" class="lh40">插入图片</p>
<div id="imglayer" class="dn">
<input type="text" id="imgtxt"/>
<p id="imgclose">close</p>
</div>
</li>
<li>
<p id="insertorderedlist" class="lh40">插入ol列表</p>
</li>
<li>
<p id="insertunorderedlist" class="lh40">插入ul列表</p>
</li>
<li>
<p id="insertparagraph" class="lh40">插入段落</p>
</li>
<li>
<p id="italic" class="lh40">斜体</p>
</li>
<li>
<p id="justifycenter" class="lh40">居中</p>
</li>
<li>
<p id="justifyleft" class="lh40">左对齐</p>
</li>
<li>
<p id="selectall" class="lh40 fz12">选择所有文本</p>
</li>
<li>
<p id="underline" class="lh40">下划线</p>
</li>
<li>
<p id="unlink" class="lh40">移除超链接</p>
</li>
</ul>
<iframe src="" frameborder="0" id="frame"></iframe>
css====================
iframe {
width: 600px;
height: 200px;
border: 1px solid red;
}
ul {
width: 600px;
height: 220px;
list-style: none;
}
li {
float: left;
margin-left: 10px;
width: 80px;
height: 40px;
text-align: center;
line-height: 20px;
border: 1px solid red;
position: relative;
cursor: pointer;
}
input {
width: 80px;
height: 20px;
}
p {
width: 100%;
height: 20px;
}
.fz12 {
font-size: 12px;
}
* {
margin: 0;
padding: 0;
}
.dn {
display: none;
}
.bgcolor {
overflow: hidden;
}
.layer {
position: absolute;
z-index: 3;
left: 0;
top: 50px;
}
#indent {
line-height: 40px;
}
.lh40 {
line-height: 40px;
}
select {
width: 100%;
}
#imglayer {
position: absolute;
z-index: 3;
}
js=============================
var frame=document.getElementById('frame');
var doc=frame.contentWindow.document;
frame.contentWindow.document.designMode='on';
/*function part*/
function click(id,json){
var obj=document.getElementById(id);
obj.addEventListener('click', function () {
doc.execCommand(json.name,false,null);
},false);
}
function clickurl(id,fn){
var obj=document.getElementById(id);
obj.addEventListener('click',fn,false)
}
function id(obj){
return document.getElementById(obj);
}
/*insert img*/
clickurl('insertimg', function () {
id('imglayer').classList.remove('dn');
});
clickurl('imgclose', function () {
var url=id('imgtxt').value;
doc.execCommand('insertimage',false,url);
id('imgtxt').value='';
id('imglayer').classList.add('dn');
});
/*wrap texts*/
id('tag').onchange = function () {
var index = this.selectedIndex;
var str = this.options[index].value;
doc.execCommand('formatblock', null, str);
};
/*fontsize*/
id('fontsize').onchange = function () {
var index=this.selectedIndex;
var str=this.options[index].value;
doc.execCommand('FontSize',null,parseInt(str));
};
/*fontcolor*/
id('fontcolor').addEventListener('change', function () {
var colorsel=fontcolor.style.backgroundColor;
doc.execCommand('forecolor', false,colorsel);
},false)
/*bgcolor*/
id('color').addEventListener('change', function () {
var colorsel=color.style.backgroundColor;
doc.execCommand('backcolor', false,colorsel);
}, false);
/*select fontname*/
id('fontname').onchange = function () {
var index=this.selectedIndex;
var str=this.options[index].value;
doc.execCommand('FontName',null,str);
};
/*create link*/
clickurl('createlink', function () {
id('layer').classList.remove('dn');
});
clickurl('close', function () {
var url=id('url').value;
doc.execCommand('createlink',false,url);
id('url').value='';
id('layer').classList.add('dn');
});
/*other easy function*/
click('underline',{'name':'underline'});
click('unlink',{'name':'unlink'});
click('selectall',{'name':'selectall'});
click('justifyleft',{'name':'justifyleft'});
click('justifycenter',{'name':'justifycenter'});
click('italic',{'name':'italic'});
click('insertparagraph',{'name':'insertparagraph'});
click('insertunorderedlist',{'name':'insertunorderedlist'});
click('insertorderedlist',{'name':'insertorderedlist'});
click('italic',{'name':'italic'});
click('indent',{'name':'indent'});
click('delete',{'name':'delete'});
click('bold',{'name':'bold'});
click('copy',{'name':'copy'});