在线编辑器的实现原理(兼容IE和FireFox)

2016-02-19 10:30 19 1 收藏

下面图老师小编跟大家分享在线编辑器的实现原理(兼容IE和FireFox),一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

在线编辑器在我们日常的项目开发中非常有用(如新闻系统),它可以方便地实现文章的在线编辑,省掉了FrontPage等工具。那么是怎样实现浏览器在线编辑功能的呢?  首先需要IE的支持,在IE5.5以后就有一个编辑状态. 就是利用这个编辑状态,然后用javascript来控制在线编辑的。 
     首先要有一个编辑框,这个编辑框其实就是一个可编辑状态的网页, 我们用iframe来建立编辑框。
     IFRAME id=“HtmlEdit” style="WIDTH: 100%; HEIGHT: 296px" marginWidth=“0” marginHeight=“0”/IFRAME 
     并且在加上javascript代码来指定HtmlEdit有编辑功能(下面提供完整的原代码):
代码如下:

script language="javascript"
     var editor;
     editor = document.getElementById("HtmlEdit").contentWindow;

     //只需键入以下设定,iframe立刻变成编辑器。
     editor.document.designMode = 'On';
     editor.document.contentEditable = true;

     //但是IE与FireFox有点不同,为了兼容FireFox,所以必须创建一个新的document。
     editor.document.open();
     editor.document.writeln('htmlbody/body/html');
     editor.document.close();

     //字体特效 - 加粗方法一 
     function addBold()
     {
     editor.focus();
     //所有字体特效只是使用execComman()就能完成。
     editor.document.execCommand("Bold", false, null);
     }
     //字体特效 - 加粗方法二 
     function addBold()
     {
     editor.focus();
     //获得选取的焦点
     var sel = editor.document.selection.createRange();
     insertHTML("b"+sel.text+"/b");
     }
     function insertHTML(html)
     {
         if (editor.document.selection.type.toLowerCase() != "none")
         {
         editor.document.selection.clear() ;
         }
         editor.document.selection.createRange().pasteHTML(html) ; 
     }

  /script

来源:http://www.tulaoshi.com/n/20160219/1594868.html

延伸阅读
标签: Web开发
支付宝UED的制作了一个Firefox插件,它可以用来快速实时编辑网页代码,快速基于Firefox制作Demo页面,方便的编辑修改CSS Sprite,以及配合Fiddler调试页面,是一个很不错的前端开发助手。 Firefox版本 该插件基于Firebug,所以安装前请确保已经安装Firebug。 一些主要特性; 即时编辑即改即现,把Firefox打造成超强网页编辑器; 与Fiddl...
标签: Web开发
function addCookie() { // 加入收藏夹 if (document.all) { window.external.addFavorite('http://taotao.wsyren.com', '牛吧'); } else if (window.sidebar) { window.sideb...
标签: ASP
  本文通过一个详细的例子,来阐述了在线编辑XML文档数据的方法。由于Netscape对XML的支持比较弱,因此,要实现跨平台的数据交换,数据的处理必须在服务器端进行。要编辑XML文档,首先要做的事情就是怎样把这些数据提取并显示给访问者,XSL为我们显示XML文件提供了一个很好的解决方案。下面的例子就是利用XSL样式单把XML文档显示出来...
标签: Web开发
同时兼容IE、FF的基本注意事项: float的div一定要闭合。例如:(其中floatA、floatB的属性已经设置为float:left;) wrapper div id="floatA"/div div id="floatB"/div div id="NOTfloatC"/div /wrapper 这里的NOTfloatC并不希望继续平移,而是希望往下排。这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标...
标签: 电脑入门
理科教师往往为试卷、课件里面很多公式而头痛。时常陷入无穷的拼接法中,用一个一个文本框组合成复杂的公式。其实WPS Office为我们提供了一个功能强大的公式编辑器Equation Editor,可以帮助我们解决这些问题。 1、插入公式 将光标放置于欲插入公式的位置,点击菜单栏插入→公式或点击常用工具栏的公式按钮即可调出Equation Editor公式...

经验教程

530

收藏

40
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部