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

Editor.htm

Editor.htc

<public:attach event=oncontentready onevent=initEditor()>

//对象

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>