自制在線富文本編輯器，精簡完整版
一、實現功能，截圖如下：
二、用到的技術：
html+css+js+php
主要技術：js
三、項目文件目錄：
需要搭建本地服務器，或傳到遠程服務器上
四、項目源代碼如下
Index.php代碼如下：
<!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;}
五、項目圖標
工具條圖標：
表情
六、后台接入
七、總結及注意事項
不需要插入圖片功能的去掉php代碼然后將.php文件改為.html即可變成本地文本編輯器，是不是很酷！當然功能跟world比沒那么強大！
需要圖片插入功能的注意保存上傳圖片的文件夾的位置和代碼里設置的一致。寫的比較快，可能會有不足，各位看官多多諒解！需要幫忙或解惑的可以加我的QQ群：184037581（驗證信息寫上來自博客園）
