自己打造HTML在线编辑器的实现难点分析

HTML在线编辑器实际上是什么


其实有好几种实现方式，目前用得最多、兼容性最好的还是iframe方式。

<iframe src="" frameborder="0"></iframe>

只有这个空iframe是不行的，还要用Javascript把它设成可编辑：

iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;

换而言之，HTML在线编辑器就是一个可编辑的iframe。

加粗、斜体、下划线、加链接等功能如何实现

浏览器已经提供了实现这些功能的接口execCommand：

iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);

这三个参数的意思分别是：

  • cmd：命令文本，有好多，IE的可以看这里，Firefox的可以看这里。

  • isDefaultShowUI：是否默认显示交互界面，比如加链接的时候，可以通过界面填入链接。不过这个参数存在兼容性问题，一般设为false将其禁用，并另外制作交互界面。

  • value：传入的值，某些命令可以省略。

execCommand的问题是，生成的代码可能不标准，比如在IE下，文字加粗用的是b标签而不是strong标签。

交互问题

用户不可能总是在编辑器中输入，比如加粗、插入图片等功能是通过按钮操作的。假设用户要加粗一段选中的文字，当他按了加粗按钮后，选区以及焦点也会跟着跑到那去，因此选区（选中的文字）丢失，操作也就无法完成；同理，插入图片时插入位置也会丢失。

也就是说，要保存最后出现在编辑器中的选区。我采取的方案是，当焦点在编辑器内的时候，用一个定时器（setInterval）定时获取当前选区。选区编程平时很少用，做起来也有很多兼容性问题，主要是参考微软的MSDN（TextRange ControlRange）和Mozilla的MDC（Range Selection）了。

回车问题

在IE下，按回车是换段落，生成<p>，但在Firefox下是换行，生成的是<br>。要解决这个问题，就要监听keydown事件，如果检测到按键是回车，就插入“<p></p>”。

获取标准的代码

如何获取编辑的内容呢？这个问题很简单，只要获取iframe页面body中的innerHTML就可以了：

var content = iframe.contentWindow.document.body.innerHTML;

然而，IE下的innerHTML非常不标准：标签名是大写的，属性没有引号包起来，单标签也没有结束符……即便是Firefox下获取的代码，也有少量瑕疵。这个时候就要用正则表达式对代码进行标准化处理。

总结

不多说了，做一遍HTML编辑器，你就会知道CKEditor是多么强大。

赞 (0)

相关推荐

  • 自己打造HTML在线编辑器的实现难点分析

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

  • ASP FCKeditor在线编辑器使用方法

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

  • 22个国外的Web在线编辑器收集

    22个国外的Web在线编辑器收集

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

  • 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

  • html在线编辑器的更新[2006-05]

    html编辑器的更新 fckeditor FCKeditor 2.3beta 已经发布了. 改写的部分代码,缩短了载入时间. 采用了新的工具栏系统,缩短了载入时间 新的右键快捷菜单,支持二级菜单 添加了一个新的功能可以将编辑区域调整到适合窗口大小 修复了一些bug,最重要的是修补了使用编辑器上传文件时的安全性问题.推荐升级到2.3 新的系统也可能使一些旧的皮肤不能使用 Tinymce 现在的版本是2.0.6.1 (2006-05-21) 修正了许多的bug  ,最重要的是添加了样式定义功能和添加

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

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

  • eWebSoft在线编辑器漏洞利用技巧

    现在eWebSoft在线编辑器用户越来越多, 危害就越来越大~ 转载标明: 作者:badwolf 出处:坏狼安全网 http://www.winshell.cn/ 首先介绍编辑器的一些默认特征: 默认登陆admin_login.asp 默认数据库db/ewebeditor.mdb 默认帐号admin 密码admin或admin888 搜索关键字:"inurl:ewebeditor" 关键字十分重要 有人搜索"eWebEditor - eWebSoft在线编辑器" 根

  • 在线编辑器中换行与内容自动提取

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

随机推荐