与富文本编辑器交互的主要方法是使用document.execCommand()。这个方法在文档上执行既定的命令可以实现大多数格式化任务。document.execCommand()可以接收3 个参数要执行的命令、表示浏览器是否为命令提供用户界面的布尔值和执行命令必需的值如果不需要则为null。为跨浏览器兼容第二个参数应该始终为false因为Firefox 会在其为true 时抛出错误。不同浏览器支持的命令也不一样。下表列出了最常用的命令。命 令 值第三个参数 说 明backcolor 颜色字符串 设置文档背景颜色bold null 切换选中文本的粗体样式copy null 将选中文本复制到剪贴板createlink URL字符串 将当前选中文本转换为指向给定URL 的链接cut null 将选中文本剪切到剪贴板delete null 删除当前选中的文本fontname 字体名 将选中文本改为使用指定字体fontsize 1~7 将选中文本改为指定字体大小forecolor 颜色字符串 将选中文本改为指定颜色formatblock HTML标签如将选中文本包含在指定的HTML 标签中indent null 缩进文本inserthorizontalrule null 在光标位置插入元素insertimage 图片URL 在光标位置插入图片insertorderedlist null 在光标位置插入元素insertparagraph null 在光标位置插入元素命 令 值第三个参数 说 明insertunorderedlist null 在光标位置插入元素italic null 切换选中文本的斜体样式justifycenter null 在光标位置居中文本块justifyleft null 在光标位置左对齐文本块outdent null 减少缩进paste null 在选中文本上粘贴剪贴板内容removeformat null 移除包含光标所在位置块的HTML 标签。这是formatblock 的反操作selectall null 选中文档中所有文本underline null 切换选中文本的下划线样式unlink null 移除文本链接。这是createlink 的反操作剪贴板相关的命令与浏览器关系密切。虽然这些命令并不都可以通过document.execCommand()使用但相应的键盘快捷键都是可以用的。这些命令可以用于修改内嵌窗格iframe中富文本区域的外观如下面的例子所示// 在内嵌窗格中切换粗体文本样式frames[“richedit”].document.execCommand(“bold”, false, null);// 在内嵌窗格中切换斜体文本样式frames[“richedit”].document.execCommand(“italic”, false, null);// 在内嵌窗格中创建指向www.wrox.com 的链接frames[“richedit”].document.execCommand(“createlink”, false,“http://www.wrox.com”);// 在内嵌窗格中为内容添加标签frames[“richedit”].document.execCommand(“formatblock”, false, “”);同样的方法也可以用于页面中添加了contenteditable 属性的元素只不过要使用当前窗口而不是内嵌窗格中的document 对象// 切换粗体文本样式document.execCommand(“bold”, false, null);// 切换斜体文本样式document.execCommand(“italic”, false, null);// 创建指向www.wrox.com 的链接document.execCommand(“createlink”, false, “http://www.wrox.com”);// 为内容添加标签document.execCommand(“formatblock”, false, “”);注意即使命令是所有浏览器都支持的命令生成的HTML 通常差别也很大。例如为选中文本应用bold 命令在IE 和Opera 中会使用标签在Safari 和Chrome 中会使用标签而在Firefox 中会使用标签。在富文本编辑中不能依赖浏览器生成的HTML因为命令实现和格式转换都是通过innerHTML 完成的。还有与命令相关的其他一些方法。第一个方法是queryCommandEnabled()此方法用于确定对当前选中文本或光标所在位置是否可以执行相关命令。它只接收一个参数即要检查的命令名。如果可编辑区可以执行该命令就返回true否则返回false。来看下面的例子let result frames[“richedit”].document.queryCommandEnabled(“bold”);以上代码在当前选区可以执行bold命令时返回true。不过要注意queryCommandEnabled()返回true 并不代表允许执行相关命令只代表当前选区适合执行相关命令。在Firefox 中queryCommandEnabled(“cut”)即使默认不允许剪切也会返回true。另一个方法queryCommandState()用于确定相关命令是否应用到了当前文本选区。例如要确定当前选区的文本是否为粗体可以这样let isBold frames[“richedit”].document.queryCommandState(“bold”);如果之前给文本选区应用过bold命令则以上代码返回true。全功能富文本编辑器可以利用这个方法更新粗体、斜体等按钮。最后一个方法是queryCommandValue()此方法可以返回执行命令时使用的值即前面示例的execCommand()中的第三个参数。如果对一段选中文本应用了值为7 的fontsize命令则如下代码会返回7let fontSize frames[“richedit”].document.queryCommandValue(“fontsize”);这个方法可用于确定如何将命令应用于文本选区从而进一步决定是否需要执行下一个命令。