技术成就梦想

知道用户需求,做到专注!c#,donet,Frameworks,UML,面向对象,设计模式!
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Word在线文本编辑器的实现原理

Posted on 2011-05-06 16:44  我不是高手  阅读(7753)  评论(0编辑  收藏  举报
在线文本编辑器实现类似word一样的文本编辑功能;但只能是简单的word功能。在B/S开发中特别实用。无论论坛发帖,还是聊天,网站内容后台编辑都有应用;而且现成的组件从简单到复杂的样式很多。如复杂的FCK等,但我们用其最简单功能时,却要配的相当麻烦。如果有一个自己的,扩展就会容易很多。简单介绍一下实现原理:

1. 页面可以被编辑,网上有很多示例代码,其实最最有用的是在页面的body标签下设置一个属性:contentEditable="true";网页内容就会自动可以编辑。

2. 利用iframe内嵌页,把带有contentEditable属性的可以编辑页面嵌入到网页中就可以实现在页面上打字的功能

3. DOM中有一个方法:execCommand(),javascript可以调用此方法实现如:加粗,加斜体等功能;具体参数详解见<<网页制作完全手册>>。

4. 文字能下载成word文件主要利用浏览器自带功能——把html内容保存成word文件。但要在servlet中设置此命令。

//告知浏览器显示的内容为msword:即微软的word

response.setContentType("application/msword;charset=utf-8");

//告知浏览器页面为附件下载。filename后面跟的是下载文件名。xxx.doc是下载后默认保存的word文件名。

response.setHeader("Content-disposition","attachment;charset=utf-8;filename=xxx.doc" );