打造自己的简易HTML Editor

<script> function fnInit(){ for (i=0; i oDiv.unselectable = "off"; oTextarea.unselectable = "off"; } function fnToggleEdits(oObj,oBtn) { currentState = oObj.isContentEditable; newState = !currentState; oObj.contentEditable = newState; newState==false ? oBtn.innerHTML='Turn Editing On' : oBtn.innerHTML='Turn Editing Off'; } </script> href="ms-help://Hx/HxRuntime/HxLink.css" type="text/css" rel="stylesheet" />

Html的很多控件都提供一个叫contentEditable的属性，如：div , textarea , button等，使用该属性，可以进行Html在线编辑，我们可以利用这个属性来做一个简易的Html Editor

首先定义一个div,并设置contentEditable=true

<div id="oDiv" contenteditable="true"  align="left" style="width:300px;height:100px;border-style:inset"></div>

接着需要有一些命令来操作这个div

<button id="oBoldBtn" title="Bold" οnclick="if (oDiv.isContentEditable==true)
document.execCommand('Bold');"><strong>Bold</strong></button>
<button id="oItalicBtn" title="Italic" οnclick="if (oDiv.isContentEditable==true)
document.execCommand('Italic');"><em>Italic</em></button>
<button id="oUndLnBtn" title="Underline" οnclick="if (oDiv.isContentEditable==true)
document.execCommand('Underline');"><u>Underline</u></button>

(其实一些比较常用的命令execCommand都有，只有当在execCommand中找不到时，才自己写脚本)
这样，一个最最简单Html编辑器就做成了，加上一些Style，可以达到下面的效果

 

HTMLEditor (Content-Editable DIV)

Turn Editing Off Bold Italic Underline

Append to TextEditor

 

TEXTEditor (TEXTAREA)

Turn Editing Off

Append to HTMLEditor