javascript基础学习系列三百一十二：使用contenteditable

还有一种处理富文本的方式，也是 IE 最早实现的，即指定 contenteditable 属性。可以给页面中的任何元素指定 contenteditable 属性，然后该元素会立即被用户编辑。这种方式更受欢迎，因为 不需要额外的 iframe、空页面和 JavaScript，只给元素添加一个 contenteditable 属性即可，比如:

<div class="editable" id="richedit" contenteditable></div>

元素中包含的任何文本都会自动被编辑，元素本身类似于元素。通过设置 contentEditable 属性，也可以随时切换元素的可编辑状态:

   let div = document.getElementById("richedit");
    richedit.contentEditable = "true";

contentEditable 属性有 3 个可能的值:"true"表示开启，"false"表示关闭，"inherit"表示 继承父元素的设置(因为在 contenteditable 元素内部会创建和删除元素)。IE、Firefox、Chrome、 Safari 和 Opera 及所有主流移动浏览器都支持 contentEditable 属性。

与富文本交互

与富文本编辑器交互的主要方法是使用 document.execCommand()。这个方法在文档上执行既定 的命令，可以实现大多数格式化任务。document.execCommand()可以接收 3 个参数:要执行的命令、 表示浏览器是否为命令提供用户界面的布尔值和执行命令必需的值(如果不需要则为 null)。为跨浏览 器兼容，第二个参数应该始终为 false，因为 Firefox 会在其为 true 时抛出错误。
注意 contenteditable是一个非常多才多艺的属性。比如，访问伪URLdata:text/ html, 可以把浏览器窗口转换为一个记事本。这是因为这样 会临时创建 DOM 树并将整个文档变成可编辑区域。
不同浏览器支持的命令也不一样。下表列出了最常用的命令。
命 令
backcolor
bold
copy
createlink
cut
delete
fontname
fontsize
forecolor formatblock
indent inserthorizontalrule insertimage insertorderedlist insertparagraph
值(第三个参数)
颜色字符串
null
null
URL 字符串
null
null
字体名
1~7
颜色字符串
HTML 标签，如

null
null
图片 URL
null
null
说 明
设置文档背景颜色
切换选中文本的粗体样式 将选中文本复制到剪贴板 将当前选中文本转换为指向给定 URL 的链接 将选中文本剪切到剪贴板 删除当前选中的文本 将选中文本改为使用指定字体 将选中文本改为指定字体大小 将选中文本改为指定颜色 将选中文本包含在指定的 HTML 标签中 缩进文本
在光标位置插入

---

元素 在光标位置插入图片 在光标位置插入

1. 元素 在光标位置插入

   元素

在光标位置插入

• 元素
  切换选中文本的斜体样式
  在光标位置居中文本块
  在光标位置左对齐文本块
  减少缩进
  19.5
  富文本编辑
  605
  移除包含光标所在位置块的 HTML 标签。这是 formatblock 的 反操作
  选中文档中所有文本 切换选中文本的下划线样式 移除文本链接。这是 createlink 的反操作
  (续)
  命 令 值(第三个参数)
  insertunorderedlist null italic null justifycenter null justifyleft null outdent null paste null removeformat null
  selectall null underline null unlink null
  说 明
  在选中文本上粘贴剪贴板内容
  剪贴板相关的命令与浏览器关系密切。虽然这些命令并不都可以通过 document.execCommand() 使用，但相应的键盘快捷键都是可以用的。 20
  这些命令可以用于修改内嵌窗格(iframe)中富文本区域的外观，如下面的例子所示:

// 在内嵌窗格中切换粗体文本样式
frames["richedit"].document.execCommand("bold", false, null);
// 在内嵌窗格中切换斜体文本样式 frames["richedit"].document.execCommand("italic", false, null);
 // 在内嵌窗格中创建指向 www.wrox.com 的链接 22 frames["richedit"].document.execCommand("createlink", false,
                                        "http://www.wrox.com");
// 在内嵌窗格中为内容添加<h1>标签 frames["richedit"].document.execCommand("formatblock", false, "<h1>");

同样的方法也可以用于页面中添加了 contenteditable 属性的元素，只不过要使用当前窗口而不 是内嵌窗格中的 document 对象:

// 切换粗体文本样式 document.execCommand("bold", false, null);
// 切换斜体文本样式 document.execCommand("italic", false, null);
// 创建指向 www.wrox.com 的链接
document.execCommand("createlink", false, "http://www.wrox.com");
// 为内容添加<h1>标签 document.execCommand("formatblock", false, "<h1>");

注意，即使命令是所有浏览器都支持的，命令生成的 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");

这个方法可用于确定如何将命令应用于文本选区，从而进一步决定是否需要执行下一个命令。