簡易博客編輯器：玩轉document.execCommand命令

    xhEditor是基於jQuery開發的跨平台輕量可視化XHTML編輯器。基於LGPL開源協議公布。今天就把它山寨一下。

    上幾張圖，看看效果：

    先做出菜單部分：發現是一張背景圖片。所以用圖片映射的方法。能夠實現：

   1: <img src="xhImages/icon.png" usemap="#iconmap">

   2:             <map id="iconmap" name="iconmap">

   3:                 <area shape="circle" coords="17,14,12" href="#" title="剪切(Ctrl+X)" id="cut" 

   4:                 onmouseover="hiddenDiv();"></area>

   5:                 <area shape="circle" coords="40,14,12" href="#" title="復制(Ctrl+C)" id="copy" 

   6:                 onmouseover="hiddenDiv();"></area>

   7:                 <area shape="circle" coords="63,14,12" href="#" title="粘貼(Ctrl+V)" id="paste"  onmouseover="hiddenDiv();"></area>

   8:                 <area shape="circle" coords="86,14,12" id="special"></area>

   9:                 <div id="specialDiv">

  10:                     <p style="font-size:13px;padding-left:15px;">使用鍵盤快捷鍵(Ctrl+V)把內容粘貼到方框里，按 確定</p>

  11:                     <textarea cols="37" rows="5" id="textAreaww"></textarea>

  12:                     <input type="button" onclick="charu('comfirm');" value="確定" 

  13:                     style="margin-left:220px;margin-top:5px;">

  14:                     <input type="button" onclick="charu('cancel');" value="取消">

  15:                 </div>

  16:  

  17:  

  18:                 <area shape="circle" coords="112,14,12" href="javascript:parag('&lt;p>')" title="段落標簽" 

  19:                 id="paragraph"></area>

  20:                 <ul id="paraUl">

  21:                     <li><a href="javascript:parag('&lt;p>')"><p>普通段落</p></a></li>

  22:                     <li><a href="javascript:parag('&lt;h1>')"><h1>標題1<h1></a></li>

  23:                     <li><a href="javascript:parag('&lt;h2>')"><h2>標題2</h2></a><li>

  24:                     <li><a href="javascript:parag('&lt;h3>')"><h3>標題3</h3></a></li>

  25:                     <li><a href="javascript:parag('&lt;h4>')"><h4>標題4</h4></a></li>

  26:                     <li><a href="javascript:parag('&lt;h5>')"><h5>標題5</h5></a></li>

  27:                     <li><a href="javascript:parag('&lt;h6>')"><h6>標題6</h6></a></li>

  28:                     <li><a href="javascript:parag('&lt;pre>')"><pre>已編排格式</pre></a></li>

  29:                     <li><a href="javascript:parag('&lt;address>')"><address>地址</addresss></a></li>

  30:                 </ul>

對於其它的area區域用相似的方式，有了靜態效果，就能夠用js實現簡單的交互：隱藏和顯示子菜單：

1: var cut = document.getElementById("cut");

   2:     cut.onclick=function()

   3:     {

   4:         alert("您的瀏覽器安全設置不同意使用剪切操作，請使用鍵盤快捷鍵(Ctrl+X)完畢");

   5:     }

   6:     var copy = document.getElementById("copy");

   7:     copy.onclick=function()

   8:     {

   9:         alert("您的瀏覽器安全設置不同意使用復制操作，請使用鍵盤快捷鍵(Ctrl+C)完畢");

  10:     }

  11:     var paste = document.getElementById("paste");

  12:     paste.onclick=function()

  13:     {

  14:         alert("您的瀏覽器安全設置不同意使用粘貼操作。請使用鍵盤快捷鍵(Ctrl+V)完畢");

  15:     }

  16:  

  17:     var special = document.getElementById("special");

  18:     var specialDiv = document.getElementById("specialDiv");

  19:     special.onmouseover=function()

  20:     {

  21:         specialDiv.style.display = "block";

  22:         paraUl.style.display = "none";

  23:         fontUl.style.display = "none";

  24:         sizeUl.style.display="none";

  25:         fontColorDiv.style.display="none";

  26:         bgColorDiv.style.display="none";

  27:         duiqiUl.style.display = "none";

  28:         liebiaoUl.style.display = "none";

  29:         setLDiv.style.display="none";

  30:         tuDiv.style.display="none";

  31:         bqDiv.style.display="none";

  32:         bgDiv.style.display="none";

  33:         codeDiv.style.display="none";

  34:         yyDiv.style.display="none";

  35:     }

     對其它的area主要是用mouseover和mouseout事件，然后就是利用execCommand命令將功能應用到

元素。ps:各瀏覽器對execCommand命令的支持不同，代碼在FF和Chrome的新版本號中調試過。其它瀏覽

器未調試，出現不同的結果敬請諒解。

/*
*第二個參數最好不要設置為TRUE，否則可能會運行不了
*/
//加粗
function jiacu()
{
	document.execCommand("Bold",false,null);
}
//斜體
function xieti()
{
	document.execCommand("Italic",false,null);
}
//下划線
function xiahua()
{
	document.execCommand("Underline",false,null);
}
//刪除線
function shanchu()
{
	document.execCommand("StrikeThrough",false,null);
}

//設置字體
function setFontName(param)
{
	document.execCommand("FontName",false,param);
	document.getElementById("fontUl").style.display="none"; 
}
//設置字體大小
function setFontSize(param)
{
	document.execCommand("FontSize",false,param);
	document.getElementById("sizeUl").style.display="none"; 
}
//設置字體顏色
function setFontColor(param)
{
	document.execCommand("ForeColor",false,param)
	document.getElementById("fontColor1").style.display="none"; 
}
//設置背景顏色
function setBackColor(param)
{
	document.execCommand("BackColor",false,param)
	document.getElementById("bgColor1").style.display="none"; 
}
//刪除文字格式
function removeFormat()
{
	document.execCommand("RemoveFormat",false,null);
}
//對齊方式
function duiqiway(param)
{
	document.execCommand(param,false,null);
	document.getElementById("duiqiUl").style.display="none"; 
}
//插入列表
function insertList(param)       //不能實現
{
	document.execCommand(param,false,null);
	alert("臨時未實現");
	document.getElementById("liebiaoUl").style.display="none"; 
}
//改變縮進
function changeIndent(param)    //不能實現
{
	document.execCommand(param,false,null);
	alert("臨時未實現");
}
//鏈接                           //不能實現,取消鏈接的命令僅僅用於用createLink命令創建的鏈接
function setLink(param)
{
	document.execCommand(param,false,"http://blog.csdn.net/u011043843"); //第三個參數為URL
	alert("臨時未實現");
}
//表情
function insertBQ(param)
{
	document.execCommand("InsertImage",false,param);   //param為圖片的url  
	document.getElementById("bqDiv").style.display="none"; 
}

//段落
function parag(param)
{
	document.execCommand("formatBlock",false,param);
	document.getElementById("paraUl").style.display="none";
}

     對於execCommand的使用方法請自行補腦。

推薦一個稍官方的鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/document.execCommand

    因為部分命令瀏覽器不支持，小編能力也有限，終於僅僅實現了部分功能。

不足之處，望讀者諒解。

    篇幅有限，僅僅寫出部分代碼。假設你有須要，還請移步下載所有代碼：

    下載（在底部）