分享
 
 
 

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

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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",vFontFamilyD

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有