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

2024-02-09 22:24:35

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

代码如下:

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

//但是IE与FireFox有点不同，为了兼容FireFox，所以必须创建一个新的document。
     editor.document.open();
     editor.document.writeln('<html><body></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>

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

在线编辑器在我们日常的项目开发中非常有用(如新闻系统),它可以方便地实现文章的在线编辑,省掉了FrontPage等工具.那么是怎样实现浏览器在线编辑功能的呢? 首先需要IE的支持,在IE5.5以后就有一个编辑状态. 就是利用这个编辑状态,然后用javascript来控制在线编辑的. 首先要有一个编辑框,这个编辑框其实就是一个可编辑状态的网页, 我们用iframe来建立编辑框. <IFRAME id="HtmlEdit" style="WIDTH:
22个国外的Web在线编辑器收集

1. TinyMCE 免费,开源,轻量的在线编辑器,基于 javascript,高度可定制,跨平台. 2. FCKEditor 免费,开源,用户量庞大的在线编辑器,有良好的社区支持. 3. YUI Editor 属于 Yahoo! YUI 的一部分,能输出纯净 Xhtml 代码. 4. NicEdit 简单,易用,轻量,外观漂亮的在线编辑器. 5. Kupu 开源,支持 ajax 保存,跨平台,易于集成,由 OSCOM 推出. 6. Free Rich Text Editor 非常容易部署,输出
在线编辑器中换行与内容自动提取

有的是使用"return false"解决了ie的插入<br>问题,但是firefox并没有解决.而且这个问题连fckeditor都没解决.呵呵,不知是否有意为之. 可能看了以上的描述还不太明白什么问题.我们做个实验,打开fckeditor切换到源码模式输入<div>test test test test test test</div>,再切换回设计模式,然后在这句的任意地方输入个回车,比如在第3个test后,你会发现源码内得到的是<div&g
HTML在线编辑器的基本概念与相关资料第1/2页

1,什么是HTML在线编辑器顾名思义,在线编辑器就是用于在线编辑的工具,编辑的内容是基于HTML的文档. 2,HTML在线编辑器有什么用? 因为HTML在线编辑器可用于在线编辑基于HTML的文档,所以,它经常被用于留言板留言.论坛发贴.Blog编写日志或等需要用户输入普通HTML的地方. 3,什么是DHTML DHTML是一些现有网页技术与标准的整合,通过它,网页设计可以用一种新的方式创建网页. 4,DHTML与HTML关系 DHTML是以HTML语言为基础,但是相较于以单纯的HTML来设计网
制作WEB在线编辑器-插入HTML标签

以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死板.由于很少做UI上的东西所以到现在才知道在document中有execCommand方法可以解决插入HTML标签的问题,这个方法可以在光标所在位置插入需要的HTML标签,并且要注意的是,如果在一个限制的范围内插入标签需要先让该范围获得焦点,例如: a.focus(); a.document.execCommand('insertButton','','bt
ASP FCKeditor在线编辑器使用方法

本文使用的是最新的FCKeditor 2.3.1版本官方网站下载: http://ckeditor.com/download[建议直接在官方网站下载最新版本] 下面就开始用了: 第一项工作就是对这个功能宏大的编辑器进行精简,当然是文件精简而非功能精简化.在这里我以asp版的FCKeditor为例进行,进入到FCKeditor 文件夹下,先把以"_"为开头的文件夹统统删除,这些文件夹里放的是范例或是一些其它工具.其实也就是只保留editor文件夹.fckconfig.js.fckedi
自己打造HTML在线编辑器的实现难点分析

HTML在线编辑器实际上是什么其实有好几种实现方式,目前用得最多.兼容性最好的还是iframe方式. <iframe src="" frameborder="0"></iframe> 只有这个空iframe是不行的,还要用Javascript把它设成可编辑: iframe.contentWindow.document.designMode = "on";iframe.contentWindow.document.cont
ASP下使用FCKeditor在线编辑器的方法

先说一下我的测试环境:XPSP2,IIS5.1,FCKeditor2.0 在IIS上建立一个新的站点,我直接取名为FCKeditor 在DW里建立一个相对应的站点,测试服务器为本机,支持VBScript 下载FCKeditor2.0,这个东西是开源的,网上能下到的地方很多,自己找去-- 下载下来的应该是压缩包,解压到FCKeditor站点根目录,什么都不需要更改,直接就可以开始调用了.等你会了的时候,会发现简单得要死去! 在站点根目录下,新建一个index.asp页面,段内加如下代码(调用编辑器
只需一行代码,轻松实现一个在线编辑器

在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑话,也喜欢烧菜做饭,虽然大多是为了减减压,这样看来和常人没什么不一样. 不一样的地方,技术宅崇尚极致,喜欢极简,又希望简约不简单,背后就是技术宅满心思的不断的尝试,我正在看着一出好戏在上演: "程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧:在浏
ASP.NET中FCKEDITOR在线编辑器的用法

你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示: oFckeditor.BasePath="/Components/fckeditor/"; 另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的如何将FCKEDITOR整合进我的页面? 由于目前的版本提供的FC

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

相关推荐

随机推荐