自己打造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是多么强大。
相关文章
asp.net 为FCKeditor开发代码高亮插件实现代码
昨天已经将BlogEngine的可视化编辑器换成了FCKeditor，作为一个程序员，在博客中插入代码是很重要的一块。网上现有的都是修改FCKeditor的fckeditorcode_gecko.js和fckeditorcode_ie.js以达到InsertCode的目的。这个方法非常麻烦，当要使用FCKeditor新版本时都要重新修改这两个文件，非常影响我们的效率。2008-08-08
FCKeditorAPI 手册 js操作控制，获取等函数代码，使用网页编辑器的朋友可以参考下。2011-01-01
CKEditor固有的一些文件被组织到_source目录里. 核心的功能，诸如DOM元素操作，事件处理，初始化脚本和一些环境设置被包含在_source\core文件夹内. 而其它的一些功能, 比如格式化，拷贝和粘贴, 图片和链接, 都被实现为插件形式放在_source\plugins文件夹内2017-03-03
对于操作 fckeditor的朋友，有所帮助。其实我们用插件的方法制作也是不错的。功能可以更强。2009-06-06
这篇文章主要为大家介绍了网页资源阻塞浏览器加载的原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
我使用的fckeditor版本是fckeditor2.6.4. fckeditor默认上传文件不没有重命名的，这样的话就很麻烦，有时上传中文的文件或者名称重复的文件就很恼火。2009-04-04
TinyMce 中文手册 在线手册与下载...2007-07-07
FCKeditor 2.0版终于出来了，之所以用“终于”这个词，是因为在这一版本上加上了众望所归的FLASH插入功能。2009-02-02
当我们console.log(domUtils)的时候，可以在控制台中，看见很多domUtils下的方法，这些方法都是用于操作节点的，findParentByTagName()顾名思义，获取的是节点，当我们的光标在编辑器内容处，而我们要获取相应内容外层节点的id以及各种属性，就需要通过domUtils来获得不同帧内的节点2012-07-07
eWebEditor上传个别图片时出现:请选择一个有效的文件,支持的格式有(GIF|JPG|JPEG|BMP|PNG)!，在WINDOWSXP下使用该组件正常,却在WINDOWS2003上提示2009-11-11
最新评论