网站地图    收藏   

主页 > 前端 > 网页编辑器 >

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

来源:自学PHP网    时间:2014-12-14 21:28 作者: 阅读:

[导读] 到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下面总结一下开发的难点以及应对方法。...

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)定时获取当前选区。选区编程平时很少用,做起来也有很多兼容性问题,主要是参考微软的MSDNTextRange ControlRange)和Mozilla的MDCRange Selection)了。

回车问题

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

获取标准的代码

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

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

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

总结

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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论