完全JavaScript启用的编辑器

分享于 

4分钟阅读

Web开发

  繁體

图像

  • 编辑器

screenshot1.jpg

  • 插入链接

insertlink.jpg

  • 插入图片

insertimage.jpg

  • 插入表格

insertable.jpg

  • 插入特殊字符

insertchars.jpg

介绍

我已经尝试了一个完全支持JavaScript的编辑器。 在这里,我使用更多的功能更新了它。

代码

在本文中,我将给出示例代码。 zip文件中提供了完整的代码。

我已经计划将这里编辑器发布为具有更高级功能的产品。 所以为了演示,我已经展示了插入链接。图像。table 和特殊字符。 可以使用 Flash,media,模板,保存模板和插入所有主要的HTML控件和上下文菜单,以及插入所有主要的HTML控件和上下文菜单,以及在许可版本中提供 postback 事件。

设置颜色

function setColor(colorTo,x,y)


{


 editFrame.focus();


 editFrame.document.execCommand(colorTo,true, colorArray[x][y]);


 popDivId.style.display = "none";


}



设置字体

function setFont(fontName)


{


 editFrame.focus();


 editFrame.document.execCommand("FontName", false, fontName);


 popDivId.style.display = "none";


}



设置字体大小

function setFontSize(fontSize)


{


 editFrame.focus();


 editFrame.document.execCommand("FontSize", false, fontSize);


 popDivId.style.display = "none";


}



设置常规操作

function doAction(action)


{


 editFrame.focus();


 if(action == "ClearAll")


 {


 editFrame.document.execCommand("SelectAll",true);


 action = "Delete";


 }


 editFrame.document.execCommand(action,true);


}



显示对话框

function showDialog(link,w, h)//380, 125


{


 if(link == "li")


 link = "InsertLink.htm";


 else if(link == "sc")


 link = "SpecialChars.htm";


 var returnedTxt= showModalDialog(link,"", "dialogWidth:"+ 


 w +"px; dialogHeight:"+ h +"px; status:no; center:yes");


 editFrame.focus();


 if(returnedTxt)


 {


 var theRange = editFrame.document.selection.createRange();


 theRange.pasteHTML(returnedTxt);


 }


}



显示弹出 Windows

var cWnd;


function showInsertPopup(opt, w, h) // w=350, h=340


{


 var srcfile = "imgWindow.aspx";


 if(opt == "im")


 srcfile = "imgWindow.aspx";


 else if(opt == "tb")


 srcfile = "InsertTable.htm";


 var left = (window.screen.width - parseInt(w))/2;


 var top = (window.screen.height - parseInt(h))/2;


 if(cWnd)


 cWnd.close();


 cWnd = window.open(srcfile,"", "width="+ w +",height="+ 


 h +",location=no, status=no, top="+ top +", left="+ left);


}



设置HTML操作

function doHtmlAction(atype)


{


 editFrame.focus();


 var selectedRegion = editFrame.document.selection.createRange();


 if(atype == "lower")


 selectedRegion.text = selectedRegion.text.toLowerCase();


 else if(atype == "upper")


 selectedRegion.text = selectedRegion.text.toUpperCase();


}



Points of Interest

  • 因为撤销和恢复被再次包括
  • 也在 VB.Net 和PHP中开发
  • Bug 在字体大小,font-family,前景色,Backcolor都固定

结束语

谢谢你,我希望你能从我那里得到反馈。


JAVA  Javascript  EDI  
相关文章