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.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.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;vA.title=strButtonTitleArray;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);}//函数库//取元素绝对位置Leftfunction getElementDefineLeft(vObject){ var iElementLeft=vObject.offsetLeft; while(vObject=vObject.offsetParent) {iElementLeft+=vObject.offsetLeft; } return iElementLeft;}//取元素绝对位置Topfunction getElementDefineTop(vObject){ var iElementTop=vObject.offsetTop; while(vObject=vObject.offsetParent) { iElementTop+=vObject.offsetTop; } return iElementTop;}</script></public:attach>
页:
[1]