一个简单的富文本编辑器

<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‘});