javascript基础从小白到高手系列七百六十八：与富文本交互

与富文本编辑器交互的主要方法是使用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 在光标位置插入

1. 元素
   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"命令，则如下代
     码会返回7：
     let fontSize = frames[“richedit”].document.queryCommandValue(“fontsize”);
     这个方法可用于确定如何将命令应用于文本选区，从而进一步决定是否需要执行下一个命令。