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.;
window.document.body.insertAdjacentElement("afterbegin",vColorObject);
vFontObject=document.createElement("object");
vFontObject.[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>
