开发富文本编辑器的一些体会
2012-08-31 16:25
267 查看
最近两周一直都在开发后台wcms系统的文本编辑器。在开发的过程中,感觉到开发富文本编辑器还是能学到不少东西的,接下来我会说说我个人是怎么开发的吧。因为我的编辑器要兼容自己的后台,所以修改了一些浏览器自身的方法。
开发富文本编辑器主要用到了document.execCommand( command, showUI, value )这个方法。
command:要执行的命令的名称 showUI:boolean是否向用户显示命令特定的对话框或消息框 value类型:string要使用该命令分配的值。
关于这个方法更加详细的说明可以google进行搜索。
我们都知道在textarea下我们可以直接输入文本,但是怎么样能显示我们编辑文本后的效果呢。我们通常是在div与iframe中编辑。要想在div中编辑,设置其contentEditable = "true"。若是在iframe中编辑,可以用designMode="on"。通常人们都是用ifame,这样做当然有它的道理。我在这边说下我个人的看法,有不对的希望大家指出。
为什么要用iframe来开发富文本编辑器是基于多方面考虑的。以下是我个人的看法:
1.用iframe可以解决浏览器的兼容性问题。在iframe下可以很方便的获取选中的文字等等。
2.在iframe下编辑可以实现所见即所得的效果。相当于是iframe下显示的是浏览器解析源码后的内容。
3.在iframe下是直接在iframe下的document中进行操作并不会影响到当前文档的document。
说说我在开发中的体会吧, 因为我们的新闻页的源码内容是写在<textarea>innerHTML中,如果要获取源码解析后的内容直接取它的value就行。如果想让<!-- -->这种编码格式也显示的话,需要将<!--和-->解析成<和--gt;。还有就是在iframe中会将<br/>转成<br>,所以在最后上传保存的时候需要将它转成<br/>。
因为在开发过程中需要将源码粘贴到iframe中,因为iframe就是一种所见即所得的编辑器,会自动给你的文本添加标签来展现当前的内容。如果这样的话iframe会给源代码添加上一些自己不需要的标签,为了解决这个问题,我给iframe的document添加了一个paste事件的,在发生粘贴事件的时候在body内建立了一个textarea元素,然后给textarea添加一个focus来将焦点设置在textarea中,这样内容就粘贴在textarea中了。就不会产生我们不需要的内容了。
因为要捕捉浏览器的ctrl+A事件来获取当前全选的文本内容,获取当前iframe全选文字的方法是document.getElementById("iframe").contentWindow.document.getSelection().toString();
我需要修改浏览器自带的tab事件来进行文本的对齐。在这里我用到了inserthtml这个command,即execCommand("inserthtml", false, "")。在打一个tab键的时候给页面添加空格。这里就出现问题了,我得加七个空格才能实现文本的对齐。那怎么解决这个问题呢,后来我查找资料发现了 它可以代表一个中文全角空格,通过它我解决了这个问题。
当然还有源码和当前文本编辑器互相显示,也就是iframe和textarea相互显示就行了。
就写到这里吧。代码我就不粘贴了,也就是给大家提供思路,欢迎拍砖。
开发富文本编辑器主要用到了document.execCommand( command, showUI, value )这个方法。
command:要执行的命令的名称 showUI:boolean是否向用户显示命令特定的对话框或消息框 value类型:string要使用该命令分配的值。
关于这个方法更加详细的说明可以google进行搜索。
我们都知道在textarea下我们可以直接输入文本,但是怎么样能显示我们编辑文本后的效果呢。我们通常是在div与iframe中编辑。要想在div中编辑,设置其contentEditable = "true"。若是在iframe中编辑,可以用designMode="on"。通常人们都是用ifame,这样做当然有它的道理。我在这边说下我个人的看法,有不对的希望大家指出。
为什么要用iframe来开发富文本编辑器是基于多方面考虑的。以下是我个人的看法:
1.用iframe可以解决浏览器的兼容性问题。在iframe下可以很方便的获取选中的文字等等。
2.在iframe下编辑可以实现所见即所得的效果。相当于是iframe下显示的是浏览器解析源码后的内容。
3.在iframe下是直接在iframe下的document中进行操作并不会影响到当前文档的document。
说说我在开发中的体会吧, 因为我们的新闻页的源码内容是写在<textarea>innerHTML中,如果要获取源码解析后的内容直接取它的value就行。如果想让<!-- -->这种编码格式也显示的话,需要将<!--和-->解析成<和--gt;。还有就是在iframe中会将<br/>转成<br>,所以在最后上传保存的时候需要将它转成<br/>。
因为在开发过程中需要将源码粘贴到iframe中,因为iframe就是一种所见即所得的编辑器,会自动给你的文本添加标签来展现当前的内容。如果这样的话iframe会给源代码添加上一些自己不需要的标签,为了解决这个问题,我给iframe的document添加了一个paste事件的,在发生粘贴事件的时候在body内建立了一个textarea元素,然后给textarea添加一个focus来将焦点设置在textarea中,这样内容就粘贴在textarea中了。就不会产生我们不需要的内容了。
因为要捕捉浏览器的ctrl+A事件来获取当前全选的文本内容,获取当前iframe全选文字的方法是document.getElementById("iframe").contentWindow.document.getSelection().toString();
我需要修改浏览器自带的tab事件来进行文本的对齐。在这里我用到了inserthtml这个command,即execCommand("inserthtml", false, "")。在打一个tab键的时候给页面添加空格。这里就出现问题了,我得加七个空格才能实现文本的对齐。那怎么解决这个问题呢,后来我查找资料发现了 它可以代表一个中文全角空格,通过它我解决了这个问题。
当然还有源码和当前文本编辑器互相显示,也就是iframe和textarea相互显示就行了。
就写到这里吧。代码我就不粘贴了,也就是给大家提供思路,欢迎拍砖。
相关文章推荐
- 网友关于单元测试的感悟(来自javaeye)--对敏捷软件开发方法的一些体会
- 关于使用Axure RP进行原型开发的一些心得体会
- unity开发游戏的一些体会
- 项目开发中的一些体会
- Scrum在互联网开发中的一些体会
- 行业门户网站搜索引擎的一些设计开发体会
- java WEB软件开发中的一些体会
- 关于开发activex的一些体会
- 关于使用Axure RP进行原型开发的一些心得体会
- 对小程序的理解以及开发过程中的一些体会
- 关于敏捷开发的一些体会
- 个人对SystemC开发的一些粗浅体会
- 软件项目开发中的一些体会
- Ubuntu下eclipse开发hadoop应用程序环境配置的一些心得体会,与君共勉
- 小结一下ubuntu下用Elicpse开发android的几个BUG和一些心得体会
- 开发培训体会——写好代码的一些基本原理
- 项目开发中的一些体会
- 对敏捷软件开发方法的一些体会(转贴)
- 3G机遇和学习手机开发的一些体会[转]
- 开发一个软件平台的一些心得体会