Textarea标签封装为Web在线编辑器

Editor.htm

<textarea style="behavior:url('Editor.htc');"></textarea>


Editor.htc


<public:attach event=oncontentready onevent=initEditor()>
<script>
//对象
var vColorObject=null;
var vFontObject=null;
var vFontFamilyDiv=null;
var vFontSizeDiv=null;
var vFileObject=null;

var vConsoleDiv=null;
var vEditorDiv=null;

//按钮提示文本
var strButtonTitleArray=new Array("新建","打开","保存","剪切","复制","粘贴","取消","恢复","粗体","斜体","下划","表格","向左","居中","向右","编号","符号","缩进","缩出","字色","字号","字体","图像","链接","水平","打印","预览");
//按钮静态文本
var strButtonValueArray=new Array("新建","打开","保存","剪切","复制","粘贴","取消","恢复","粗体","斜体","下划","表格","向左","居中","向右","编号","符号","缩进","缩出","字色","字号","字体","图像","链接","水平","打印","预览");
//按钮接口程序
var strButtonDefineFunctionArray=new Array("defineNew()",
"defineOpen()",
"defineSave()",
"defineCut()",
"defineCopy()",
"definePaste()",
"defineUndo()",
"defineRedo()",
"defineBold()",
"defineItalic()",
"defineUnderLine()",
"defineTable()",
"defineJustifyLeft()",
"defineJustifyCenter()",
"defineJustifyRight()",
"defineInsertOrderedList()",
"defineInsertUnorderedList()",
"defineOutdent()",
"defineIndent()",
"defineColor()",
"defineFontSize()",
"defineFontFamily()",
"defineInsertImage()",
"defineCreateLink()",
"defineInsertHorizontalRule()",
"definePrint()",
"definePreview()");
//按钮图标
var strButtonDefineIconArray=new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","");
//按钮响应库
function defineNew()
{
 vEditorDiv.innerHTML="";
}
function defineOpen()
{
 openFileDlg();
}
function defineSave()
{
 element.value=vEditorDiv.innerHTML;
}
function defineCut()
{
 vEditorDiv.focus();
 document.execCommand("Cut");
 vEditorDiv.focus();
}
function defineCopy()
{
 vEditorDiv.focus();
 document.execCommand("Copy");
 vEditorDiv.focus();
}
function definePaste()
{
 vEditorDiv.focus();
 document.execCommand("Paste");
 vEditorDiv.focus();
}
function defineUndo()
{
 vEditorDiv.focus();
 document.execCommand("Undo");
 vEditorDiv.focus();
}
function defineRedo()
{
 vEditorDiv.focus();
 document.execCommand("Redo");
 vEditorDiv.focus();
}
function defineBold()
{
 vEditorDiv.focus();
 document.execCommand("Bold");
 vEditorDiv.focus();
}
function defineItalic()
{
 vEditorDiv.focus();
 document.execCommand("Italic");
 vEditorDiv.focus();
}
function defineUnderLine()
{
 vEditorDiv.focus();
 document.execCommand("UnderLine");
 vEditorDiv.focus();
}
function defineTable()
{
 window.confirm("Table");
}
function defineJustifyLeft()
{
 vEditorDiv.focus();
 document.execCommand("JustifyLeft");
 vEditorDiv.focus();
}
function defineJustifyCenter()
{
 vEditorDiv.focus();
 document.execCommand("JustifyCenter");
 vEditorDiv.focus();
}
function defineJustifyRight()
{
 vEditorDiv.focus();
 document.execCommand("JustifyRight");
 vEditorDiv.focus();
}
function defineInsertOrderedList()
{
 vEditorDiv.focus();
 document.execCommand("InsertOrderedList");
 vEditorDiv.focus();
}
function defineInsertUnorderedList()
{
 vEditorDiv.focus();
 document.execCommand("InsertUnorderedList");
 vEditorDiv.focus();
}
function defineOutdent()
{
 vEditorDiv.focus();
 document.execCommand("Outdent");
 vEditorDiv.focus();
}
function defineIndent()
{
 vEditorDiv.focus();
 document.execCommand("Indent");
 vEditorDiv.focus();
}
function defineColor()
{
 chooseColor(); 
}
function defineFontSize()
{
 chooseFontSize();
}
function defineFontFamily()
{
 chooseFontFamily();
}
function defineInsertImage()
{
 vEditorDiv.focus();
 document.execCommand("InsertImage");
 vEditorDiv.focus();
}
function defineCreateLink()
{
 vEditorDiv.focus();
 document.execCommand("CreateLink");
 vEditorDiv.focus();
}
function defineInsertHorizontalRule()
{
 vEditorDiv.focus();
 document.execCommand("InsertHorizontalRule");
 vEditorDiv.focus();
}
function definePrint()
{
 vEditorDiv.focus();
 document.execCommand("Print");
 vEditorDiv.focus();
}
function definePreview()
{
 window.confirm("Preview");
}
//辅助函数
//颜色滴管
function chooseColor()
{
 var strReturnColor=vColorObject.ChooseColorDlg("FFFFFF");
 strReturnColor=strReturnColor.toString(16);
 if(strReturnColor.length<6)
 {
    var strTempString="000000".substring(0,6-strReturnColor.length);
    strReturnColor=strTempString.concat(strReturnColor);
 }
 vEditorDiv.focus();
 document.execCommand("ForeColor",false,strReturnColor);
 vEditorDiv.focus();
}
function chooseFontSize()
{
 var vObject=window.event.srcElement;
 vFontSizeDiv.style.display="";
 vFontSizeDiv.style.left=getElementDefineLeft(vObject);
 vFontSizeDiv.style.top=getElementDefineTop(vObject)+vObject.offsetHeight;
 element.document.attachEvent('onmousedown',onDocumentMouseDown);
}
function chooseFontFamily()
{
 var vObject=window.event.srcElement;
 vFontFamilyDiv.style.display="";
 vFontFamilyDiv.style.left=getElementDefineLeft(vObject);
 vFontFamilyDiv.style.top=getElementDefineTop(vObject)+vObject.offsetHeight;
 element.document.attachEvent('onmousedown',onDocumentMouseDown);
}
//打开文件
function openFileDlg()
{
 try
 {
  vFileObject.CancelError=true;
  vFileObject.ShowOpen();
  return vFileObject.filename;
 }
 catch(e)
 {
  return e;
 }
}
function onFontFamilyChange()
{
 var vObject=window.event.srcElement;
 var strReturnFontFamily=vObject.options[vObject.selectedIndex].text;
 vEditorDiv.focus();
 document.execCommand("FontName",false,strReturnFontFamily);
 vEditorDiv.focus();
 vFontFamilyDiv.style.display="none";
 element.document.detachEvent("onmousedown",onDocumentMouseDown);
}
function onFontSizeChange()
{
 var vObject=window.event.srcElement;
 var strReturnFontSize=vObject.options[vObject.selectedIndex].text;
 vEditorDiv.focus();
 document.execCommand("FontSize",false,strReturnFontSize);
 vEditorDiv.focus();
 vFontSizeDiv.style.display="none";
 element.document.detachEvent("onmousedown",onDocumentMouseDown);
}
function onDocumentMouseDown()
{
 if(vFontFamilyDiv.contains(event.srcElement))
 {
  return;
 }
 if(vFontSizeDiv.contains(event.srcElement))
 {
  return;
 }
 vFontSizeDiv.style.display="none";
 vFontFamilyDiv.style.display="none";
 element.document.detachEvent("onmousedown",onDocumentMouseDown);
}
//初始化函数
function initEditor()
{
 element.style.display="none";
 vConsoleDiv=document.createElement("div");
 vConsoleDiv.style.border="1px solid #000000";
 vConsoleDiv.style.borderBottom="0px solid #000000";
 vConsoleDiv.style.position="absolute";
 vConsoleDiv.style.width="100%";
 vConsoleDiv.style.left=getElementDefineLeft(element);
 vConsoleDiv.style.top=getElementDefineTop(element);
 window.document.body.insertAdjacentElement("afterbegin",vConsoleDiv);
 initConsole();

 vEditorDiv=document.createElement("div");
 vEditorDiv.style.border="1px solid #000000";
 vEditorDiv.style.position="absolute";
 vEditorDiv.style.width="100%";
 vEditorDiv.style.height="50%";
 vEditorDiv.contentEditable=true;
 vEditorDiv.style.left=getElementDefineLeft(element);
 vEditorDiv.style.top=getElementDefineTop(element)+vConsoleDiv.offsetHeight;
 window.document.body.insertAdjacentElement("afterbegin",vEditorDiv);

 vColorObject=document.createElement("object");
 vColorObject.classid="clsid:3050F819-98B5-11CF-BB82-00AA00BDCE0B";
 vColorObject.codeBase="";
 vColorObject.style.width=0;
 vColorObject.style.height=0;
 window.document.body.insertAdjacentElement("afterbegin",vColorObject);

 vFontObject=document.createElement("object");
 vFontObject.classid="clsid:3050F819-98B5-11CF-BB82-00AA00BDCE0B";
 vFontObject.codeBase="";
 vFontObject.style.width=0;
 vFontObject.style.height=0;
 window.document.body.insertAdjacentElement("afterbegin",vFontObject);
 //字体选择初始化
 vFontFamilyDiv=document.createElement("div");
 var vSelect=document.createElement("select");
 vSelect.style.border="1px solid #000000";
 vSelect.length=vFontObject.fonts.count;
 for(kIndex=1;kIndex<=vFontObject.fonts.count;kIndex++)
 {
  vOption=document.createElement("option");
  vOption.value=kIndex;
  vOption.text=vFontObject.fonts(kIndex);
  vSelect.add(vOption);
 }
 vSelect.attachEvent("onchange",onFontFamilyChange);
 vFontFamilyDiv.appendChild(vSelect);
 window.document.body.insertAdjacentElement("afterbegin",vFontFamilyDiv);
 vFontFamilyDiv.style.display="none";
 vFontFamilyDiv.style.position="absolute";
 //字号选择初始化
 vFontSizeDiv=document.createElement("div");
 var vSelect=document.createElement("select");
 vSelect.style.border="1px solid #000000";
 for(kIndex=1;kIndex<=7;kIndex++)
 {
  vOption=document.createElement("option");
  vOption.value=kIndex;
  vOption.text=kIndex;
  vSelect.add(vOption);
 }
 vSelect.attachEvent("onchange",onFontSizeChange);
 vFontSizeDiv.appendChild(vSelect);
 window.document.body.insertAdjacentElement("afterbegin",vFontSizeDiv);
 vFontSizeDiv.style.display="none";
 vFontSizeDiv.style.position="absolute";
 //
 vFileObject=document.createElement("object");
 vFileObject.classid="clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB";
 vFileObject.codeBase="http://activex.microsoft.com/controls/vb5/comdlg32.cab";
 vFileObject.style.width=0;
 vFileObject.style.height=0;
 window.document.body.insertAdjacentElement("afterbegin",vFileObject);
}
//初始化控制按钮面板
function initConsole()
{
 var vTable=document.createElement("table");
 vTable.style.backgroundColor="buttonface";
 vTable.style.borderTop="1px solid buttonhighlight";
 vTable.style.borderLeft="1px solid buttonhighlight";
 vTable.style.borderBottom="1px solid buttonshadow";
 vTable.style.borderRight="1px solid buttonshadow";
 vTable.style.width="100%";
 //vTable.style.filter="Alpha(Opacity=60)";//半透明效果.
 
 var vTr=vTable.insertRow(0);
 var vTd=vTr.insertCell(0);
 /*
 vTd.style.backgroundColor="buttonface";
 vTd.style.borderTop="1px solid buttonhighlight";
 vTd.style.borderLeft="1px solid buttonhighlight";
 vTd.style.borderBottom="1px solid buttonshadow";
 vTd.style.borderRight="1px solid buttonshadow";
 */
 for(kIndex=0;kIndex<strButtonTitleArray.length;kIndex++)
 {
  var vA=document.createElement("a");
  vA.style.border="1px solid buttonface";
  vA.style.textAlign="center";
  vA.style.cursor="default";
  vA.style.font="normal 9pt 宋体";
  vA.id=kIndex;
  vA.innerHTML=strButtonValueArray[kIndex];
  vA.title=strButtonTitleArray[kIndex];
  vTd.appendChild(vA);
  vA.attachEvent("onmousedown",onButtonMouseDown);
  vA.attachEvent("onmouseout",onButtonMouseOut);
  vA.attachEvent("onmouseover",onButtonMouseOver);
  vA.attachEvent("onmouseup",onButtonMouseUp);
  vA.attachEvent("onclick",onButtonClick);
 }

 vConsoleDiv.appendChild(vTable);
}
//按钮响应事件
function onButtonMouseDown()
{
 var vObject=window.event.srcElement;
 vObject.style.borderTop="1px solid buttonshadow";
 vObject.style.borderLeft="1px solid buttonshadow";
 vObject.style.borderBottom="1px solid buttonhighlight";
 vObject.style.borderRight="1px solid buttonhighlight";
}
function onButtonMouseOut()
{
 var vObject=window.event.srcElement;
 vObject.style.backgroundColor="";
 vObject.style.border="1px solid buttonface";
}
function onButtonMouseOver()
{
 var vObject=window.event.srcElement;
 vObject.style.borderTop="1px solid buttonhighlight";
 vObject.style.borderLeft="1px solid buttonhighlight";
 vObject.style.borderBottom="1px solid buttonshadow";
 vObject.style.borderRight="1px solid buttonshadow";
}
function onButtonMouseUp()
{
 var vObject=window.event.srcElement;
 vObject.style.borderTop="1px solid buttonhighlight";
 vObject.style.borderLeft="1px solid buttonhighlight";
 vObject.style.borderBottom="1px solid buttonshadow";
 vObject.style.borderRight="1px solid buttonshadow";
}
function onButtonClick()
{
 var vObject=window.event.srcElement;
 eval(strButtonDefineFunctionArray[vObject.id]);
}
//函数库
//取元素绝对位置Left
function getElementDefineLeft(vObject)
{
 var iElementLeft=vObject.offsetLeft;
 while(vObject=vObject.offsetParent)
 {
  iElementLeft+=vObject.offsetLeft;
 }
 return iElementLeft;
}
//取元素绝对位置Top
function getElementDefineTop(vObject)
{
 var iElementTop=vObject.offsetTop;
 while(vObject=vObject.offsetParent)
 {
     iElementTop+=vObject.offsetTop;
 }
 return iElementTop;
}
</script>
</public:attach>