一个简单的富文本编辑器

<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\'});