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>