富文本编辑器笔记01

一种可内嵌于浏览器，所见即所得的文本编辑器

富文本编辑器不同于文本编辑器，
程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），
方便用户编辑文章或信息。
比较好的文本编辑器有kindeditor,fckeditor等。

提供类似于 Microsoft Word 的编辑功能，
容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。

在很多开发者看来，
富文本编辑器的编写是一件很神秘或者复杂的事情。
神秘倒没有，复杂的话，确实如此。

对于支持富文本编辑的浏览器来说，
其实就是设置 document 的 designMode 属性为 on 后，
再通过执行 document.execCommand('commandName'[, UIFlag[, value]]) 即可。

iframe+designMode

页面中iframe嵌入一个子页面，把iframe的属性designMode设为on，
这个子页面的所有内容就可以想使用文字处理软件一样，
对文本进行加粗、斜体等设置。
contenteditable

可以把contenteditable属性应用到页面中的任何元素，
然后用户立即就可以编辑该元素，而不需要iframe页。

只展示富文本的效果意义不大，
实际应用中，更多结合用户操作交互，
产生想要的效果，js中已提供相应api。

document.execCommand()对文档执行预定义的命令，而且可以应用大多数格式。

可以传递3个参数：

设置粗体document.execCommand(‘bold’, false, null);

document.queryCommandEnabled() 方法可查询浏览器中指定的编辑指令是否可用。
document.queryCommandState() 确定是否已将指定命令应用到选择的文本
document.queryCommandValue() 获取执行命令传入的值

为了更精细化控制富文本编辑器的内容，
可以使用document.getSelection()方法，
返回Selection对象。
在Selection对象上提供了很多实用的方法。

富文本编辑器 笔记01