<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本编辑器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="main">
    <div id="toolbar">
      <ul>
        <li>
        <a href="javascript:void(0)" onclick="onEffect('Bold')" onmouseover="mouseover('hoea')" onmouseout="mouseout('hoea')" ><img src="images/too/01.png"/></a>
        <a href="javascript:void(0)" style="font-style: italic;"
           onclick="onEffect('italic')"onmouseover="mouseover('hoeb')" onmouseout="mouseout('hoeb')" ><img src="images/too/02.png"/></a>
        <a href="javascript:void(0)" style="text-decoration: underline;"
        onclick="onEffect('underline')"onmouseover="mouseover('hoec')" onmouseout="mouseout('hoec')"><img src="images/too/03.png"/></a>
        <a href="javascript:void(0)"onclick="showcolor('color');"onmouseover="mouseover('hoef')" onmouseout="mouseout('hoef')"><img src="images/too/06.png"/></a>
        <a href="javascript:void(0)"onclick="showcolor('bkcolor');"onmouseover="mouseover('hoeg')" onmouseout="mouseout('hoeg')"><img src="images/too/07.png"/></a>
        <a href="javascript:void(0)"onclick="onEffect('copy');alert('已复制到剪切板');"onmouseover="mouseover('hoeh')" onmouseout="mouseout('hoeh')"><img src="images/too/08.png"/></a>
        <a href="javascript:void(0)"onclick="onEffect('delete')"onmouseover="mouseover('hoei')" onmouseout="mouseout('hoei')"><img src="images/too/09.png"/></a>
        <a href="javascript:void(0)"onclick="onEffect('undo')"onmouseover="mouseover('hoej')" onmouseout="mouseout('hoej')"><img src="images/too/10.png"/></a>
        <a href="javascript:void(0)"onclick="onEffect('removeFormat')"onmouseover="mouseover('hoek')" onmouseout="mouseout('hoek')"><img src="images/too/11.png"/></a>
        <img src="images/too/001.png" alt="" style="float: right; 
        cursor: pointer;width: 30px; margin-right: 15px;" 
        onclick="showFaces(this)"onmouseover="mouseover('hoed')" onmouseout="mouseout('hoed')">
        </li>
        <li style="border-top: 1px dashed #fefefe; padding-top: 4px;">
           <select name="size" style="width:90px; height:25px; 
           margin-left: 10px;   background-color:#E0EEE0;"
           onclick="family(this)">
             <option value="微软雅黑"selected>微软雅黑</option>
             <option value="宋体">宋体</option>
             <option value="幼圆">幼圆</option>
             <option value="楷体">楷体</option>
             <option value="等线">等线</option>
             <option value="方正舒体">方正舒体</option>
             <option value="黑体">黑体</option>
             <option value="华文彩云">华文彩云</option>
          </select>
          <select name="size" style="width:70px; height:25px;
           margin-left: 10px;   background-color:#E0EEE0;"
           onclick="sized(this)">
             <option value="1">8</option>
             <option value="2">10</option>
             <option value="3" selected>12</option>
             <option value="4">16</option>
             <option value="5">18</option>
             <option value="6">25</option>
             <option value="7">36</option>
          </select>
          <a href="javascript:void(0)" style="text-decoration: underline;"
           onclick="onEffect('justifyLeft')"onmouseover="mouseover('hoel')" onmouseout="mouseout('hoel')"><img src="images/too/13.png"/>
          </a>
          <a href="javascript:void(0)" style="text-decoration: underline;"
           onclick="onEffect('justifyCenter')"onmouseover="mouseover('hoem')" onmouseout="mouseout('hoem')"><img src="images/too/14.png"/>
          </a>
          <a href="javascript:void(0)" style="text-decoration: underline;"
           onclick="onEffect('justifyRight')"onmouseover="mouseover('hoen')" onmouseout="mouseout('hoen')"><img src="images/too/15.png"/>
          </a>
          <a href="javascript:void(0)" style="text-decoration: underline;"
           onclick="pic()" onmouseover="mouseover('hoeo')" onmouseout="mouseout('hoeo')" id="pic"><img src="images/too/12.png" />
          </a>
        </li>
    </div>
    <!-- 编辑区 -->
    <iframe src=""   frameborder="0" allowTransparency='true' 
    style="width:100%; height: 400px; margin:10px auto;"  id="editor">
    </iframe>
    <form  id="forms" action="" method="post"enctype="multipart/form-data" >
     <input id="inputobj" type="file" name="myFile" style=" display:none;" />
    </form>
  <!-- 弹出框 -->
    <!-- 颜色框 -->
    <div id="color">
        <table>
            <tr>
                <td><img src="images/color/01.jpg" alt="" 
                onclick="choose_color('#000000')"></td>
                <td><img src="images/color/02.jpg" alt=""
                onclick="choose_color('#00ffcc')"></td>
                <td><img src="images/color/03.jpg" alt=""
                onclick="choose_color('#ff9900')"></td>
            </tr>
            <tr>
                <td><img src="images/color/04.jpg" alt=""
                onclick="choose_color('#FFE4B5')"></td>
                <td><img src="images/color/05.jpg"alt=""
                onclick="choose_color('#F0E68c')"></td>
                <td><img src="images/color/06.jpg"alt=""
                onclick="choose_color('#EEE9E9')"></td>
            </tr>
            <tr>
                <td><img src="images/color/07.jpg" alt=""
                onclick="choose_color('#EEAEEE')"></td>
                <td><img src="images/color/08.jpg"alt=""
                onclick="choose_color('#E0EEE0"></td>
                <td><img src="images/color/09.jpg" alt=""
                onclick="choose_color('#9F79EE')"></td>
            </tr>
        </table>
    </div>
    <!-- 背景颜色 -->
    <!-- 颜色框 -->
    <div id="bkcolor">
        <table>
            <tr>
                <td><img src="images/color/01.jpg" alt="" 
                onclick="choose_bkcolor('#000000')"></td>
                <td><img src="images/color/10.png" alt=""
                onclick="choose_bkcolor('transparent')"></td>
                <td><img src="images/color/03.jpg" alt=""
                onclick="choose_bkcolor('#ff9900')"></td>
            </tr>
            <tr>
                <td><img src="images/color/04.jpg" alt=""
                onclick="choose_bkcolor('#FFE4B5')"></td>
                <td><img src="images/color/05.jpg"alt=""
                onclick="choose_bkcolor('#F0E68c')"></td>
                <td><img src="images/color/06.jpg"alt=""
                onclick="choose_bkcolor('#EEE9E9')"></td>
            </tr>
            <tr>
                <td><img src="images/color/07.jpg" alt=""
                onclick="choose_bkcolor('#EEAEEE')"></td>
                <td><img src="images/color/08.jpg"alt=""
                onclick="choose_bkcolor('#E0EEE0"></td>
                <td><img src="images/color/09.jpg" alt=""
                onclick="choose_bkcolor('#9F79EE')"></td>
            </tr>
        </table>
    </div>
    <!-- 表情框 -->
    <table id="face">
        <tr>
            <td><img src="images/faces/01.gif" onclick="insertFace(this)"></td>
            <td><img src="images/faces/02.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/03.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/04.gif"onclick="insertFace(this)"></td>
        </tr>
        <tr>
            <td><img src="images/faces/05.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/06.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/07.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/08.gif"onclick="insertFace(this)"></td>
        </tr>
        <tr>
            <td><img src="images/faces/09.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/10.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/11.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/12.gif"onclick="insertFace(this)"></td>
        </tr>
        <tr>
            <td><img src="images/faces/13.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/14.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/15.gif"onclick="insertFace(this)"></td>
            <td><img src="images/faces/16.gif"onclick="insertFace(this)"></td>
        </tr>
    </table>
  <!-- 弹出框 -->    
    <!-- 工具提示 -->
    <div id="hoea" style="position: absolute; top:50px;left:45px; width: 60px; height: 20px; padding-top: 5px; background-color: #fefefe;display: none;text-align: center;font-size: 14px;">加粗
    </div>
    <div id="hoeb" style="position: absolute; top:50px;left: 100px; width: 60px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px;">斜体
    </div>
    <div id="hoec" style="position: absolute; top:50px;left: 150px; width: 60px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px; ">下划线
    </div>
    <div id="hoed" style="position: absolute; top:50px;left:600px; width: 60px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px; ">插入表情
    </div>
    <div id="hoef" style="position: absolute; top:50px;left: 220px; width: 90px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none;font-size: 14px; ">字体颜色
    </div>
    <div id="hoeg" style="position: absolute; top:50px;left: 260px; width: 90px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px;">背景颜色
    </div>
    <div id="hoeh" style="position: absolute; top:50px;left: 320px; width: 60px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none;font-size: 14px; ">复制
    </div>
    <div id="hoei" style="position: absolute; top:50px;left: 380px; width: 60px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px;">删除
    </div>
    <div id="hoej" style="position: absolute; top:40px;left: 430px; width: 60px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px;">撤销
    </div>
    <div id="hoek" style="position: absolute; top:40px;left: 480px; width: 100px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; ">清除文字格式
    </div>
    <div id="hoel" style="position: absolute; top:90px;left: 50px; width: 90px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px;">左对齐
    </div>
    <div id="hoem" style="position: absolute; top:90px;left: 100px; width: 90px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px;">居中对齐
    </div>
    <div id="hoen" style="position: absolute; top:90px;left: 160px; width: 90px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none; font-size: 14px;">右对齐
    </div>
    <div id="hoeo" style="position: absolute; top:90px;left: 210px; width: 90px; height: 20px; padding-top: 5px;text-align: center; background-color: #fefefe;display: none;font-size: 14px; ">插入图片
    </div>
    <!-- 工具提示 -->
</div>

</body>
<script type="text/javascript" src="js/control.js"></script>
<?php 
  if(isset($_FILES["myFile"])){
  $ret = array();
  $uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
 $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
 file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
 if(!is_array($_FILES["myfile"]["name"])) //single file
  {
    $fileName = time().uniqid().'.'.pathinfo($_FILES["myFile"]["name"])['extension'];
    move_uploaded_file($_FILES["myFile"]["tmp_name"],$dir.$fileName);
    $ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
   }
echo json_encode($ret);
 } 
?>
</html>

control.js

// 定义编辑窗口引用
var editPane=null;
var doc=null;
//var sizes=2;
var colork=null;
colork=document.getElementById("color");
bkcolor=document.getElementById("bkcolor");
//初始化编辑窗口
(function(){
    editPane=document.getElementById("editor").contentWindow;
    //打开编辑模式
    editPane.document.designMode='on';
    editPane.document.contentEditable=true; 
    editPane.document.open();
    editPane.document.write('');
    editPane.document.close();
    editPane.focus();//获取焦点

})();
//打开表情窗口
function showFaces(img){
    var face=document.getElementById("face");
    face.style.display="block";
    //face.style.left=img.offsetLeft+img.offsetWidth+'px';
    face.style.left=img.offsetLeft+'px'; 
    face.onmouseover=function(){
        face.style.display="block";
    }
    face.onmouseout=function(){
        face.style.display="none";
    }
    face.onclick=function(){
        face.style.display="none";
    }
    editPane.document.onclick=function(){
        face.style.display="none";
    }
}

//插入图片
function insertFace(img){
    var image="<img src='"+img.src+"'/>";
    editPane.focus();
    editPane.document.execCommand('insertImage',false,img.src);
}


//改变效果
function onEffect(effect){//基本通用函数
    var color="red";
    editPane.document.execCommand(effect,false,color);
}

/**function size(effect){//size++
    if(sizes<8){
      sizes+=1;
      window.k=sizes;
     }
    editPane.document.execCommand(effect,false,sizes);
}
function sizesm(effect){//size--
    if( window.k>1){
      window.k-=1;
      sizes=window.k;
     }
    editPane.document.execCommand(effect,false,window.k);
}*/
//背景色函数
function back(effect){
    var color="#66ff99";
    editPane.document.execCommand(effect,false,color);
}

//提交函数
function sub(){
    var ed=document.getElementById("editor").contentWindow;//获取iframe
    var inp=document.getElementById("inp");
    inp.value=ed.document.body.innerHTML;
    return true;
} 
//onmouseover 函数
function mouseover(p){
    var w=document.getElementById(p);
       w.style.display="block";
} 
//onmouseout 函数
function mouseout(p){
    var w=document.getElementById(p);
       w.style.display="none";
} 
//颜色框弹出
function showcolor(s){
    var show=document.getElementById(s);
    show.style.display="block";
} 
colork.onmouseover=function(){
    this.style.display="block";
}
colork.onmouseout=function(){
    this.style.display="none";
}
//选色函数
function choose_color(k){
    var color=k;
    var effect="foreColor";
    editPane.document.execCommand(effect,false,color);
}
//背景颜色
bkcolor.onmouseover=function(){
    this.style.display="block";
}
bkcolor.onmouseout=function(){
    this.style.display="none";
}
//选背景色函数
function choose_bkcolor(k){
    var color=k;
    var effect="hiliteColor";
    editPane.document.execCommand(effect,false,color);
}
//图片选择

function pic(){
    var para=document.getElementById('forms'); 
    var inputObj=document.getElementById('inputobj');
       // inputObj.setAttribute('id','_ef');
       // inputObj.setAttribute('name','myFile');
       // inputObj.setAttribute('type','file');
        //inputObj.setAttribute("style",'visibility:hidden');
       // para.appendChild(inputObj);
        //document.body.appendChild(inputObj);
        inputObj.click();
        inputObj.onchange=function(){
            loadXMLDoc();
             }
      //isertpic();
}
function backpic(str){
    var image="<img src='"+str+"'>";
     editPane.focus();
     editPane.document.execCommand('insertImage',false,str);
}
//字体选择
function family(f){
    var fm=f.value;
    var effect="FontName";
    editPane.document.execCommand(effect,false,fm);
} 
//字体大小选择
function sized(f){
    var fm=f.value;
    var effect="fontSize";
    editPane.document.execCommand(effect,false,fm);
} 
//定义loadXMLDoc(ajax函数)上传图片
function loadXMLDoc()
{
var xmlhttp;
var fileObj =document.getElementById("inputobj").files[0];
var FileController = 'aupload.php';
var form = new FormData();
form.append("myFile", fileObj);
if (window.XMLHttpRequest)
 { 
 xmlhttp=new XMLHttpRequest();//实例化ajax对象
 }
else
 { //for ie5,6 兼容ie5,6
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
  /**/
  xmlhttp.onreadystatechange=function()//每当 readyState 属性改变时,就会调用该函数
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
     var result = xmlhttp.responseText;
     var json = eval("result");
     backpic(json);
     //alert(json);
   }
 }
  xmlhttp.open("post", FileController, true);
  xmlhttp.send(form);
}

style.css

body{margin:0;padding: 0; }
#face{table-cellspacing:1px;  position: absolute; top:30px;
    left:80%; border: 1px solid #aaa; background-color: #fff;
    display: none;
}
#face img{width: 60px;}
/*定义编辑框样式*/
#main{width: 670px; height: 470px; border: 1px solid #ccc; 
    position: relative;margin: 50px auto; 
    background-image:url(../images/back.jpg); 
    background-size: cover;
}
/*定义编辑框中的工具条样式*/
#main #toolbar{
    width: 100%;height:70px; background-color:#C7C7C7;
}
#main #toolbar ul{margin: 0; list-style: none;padding: 0;padding-top: 5px;
margin-left: 20px; margin-right: 20px;}
#main #toolbar ul li{clear:both; margin-bottom:5px;  }
/*定义工具条中的链接的样式*/
#toolbar a{
    width: 55px; height: 28px; line-height:28px; text-align: center;
    text-decoration: none;color: #000;font-weight: bold; font-size: 15px;
    float: left;
}
#toolbar a img{height: 26px;}
/*定义工具条中的链接的伪样式*/
#toolbar a:hover{
    border-right:1px solid #aaa;border-bottom: 3px solid #ff0033; 
}
#color{display:none; position: absolute;
    left:250px;top:90px; width: 104px; background-color:#fefefe;
}
#color img{width: 30px;}
#bkcolor{display:none; position: absolute;
    left:320px;top:90px; width: 104px; background-color:#fefefe;
}
#bkcolor img{width: 30px;}