[译] 通过 contentEditable 属性创建一个所见即所得的编辑器（富文本编辑器）

译者注

这只是一篇入门教程，介绍了一些基础知识，仅供参考，切不可因此觉得富文本编辑器很简单。

创建富文本编辑器是一个非常复杂的工程，需要考虑到方方面面，也有很多坑（请参考原文第一条评论）。

为免误导大家，特此说明。

格式说明：链接，名词，命令

---

原文：Create a WYSIWYG Editor With the contentEditable Attribute

WYSIWYG 编辑器非常常用，你或许在某个时候也使用过。

WYSIWYG：What You See Is What You Get，所见即所得。

通过一些第三方库，你可以快速地创建自己的编辑器，但也有一些明显的缺陷。首先，它们很重，许多特性你压根就用不到。另外，定制外观也非常蛋疼。

本文中，我们将按自己喜欢的风格，创建一个拥有基本格式化功能的、轻量的所见即所得编辑器。

我们将从介绍 execCommand 开始，因为在实现编辑器的过程中，我们会大量使用到该方法。

Document.execCommand()

execCommand 是 document 对象的一个方法，它提供了操作可编辑区域的内容的能力，和 contentEditable 配合使用，就可以实现一个富文本编辑器（rich-text editor）。

execCommand 方法可以进行各种编辑操作，如 添加链接、选中文本 加粗 或 斜体，修改 字体 或 字体颜色，使用语法如下：

document.execCommand(CommandName, ShowDefaultUI, ValueArgument);

CommandName：DOMString，指定所要执行的命令。

ShowDefaultUI：Boolean，指定是否显示用户界面，该选项还未完全实现，一般设置为 false。

ValueArgument：提供命令的附加参数，如图片URL或颜色值。不需要附加参数时，设置为 null。

我们将使用不同的命令来实现各种功能，下面逐一介绍。

无附加参数的命令

部分命令不需要附加参数（ValueArgument），如加粗（bold）、对齐（justify）、撤销（undo）、重做（redo），使用下面的语法：

document.execCommand(commandName, false, null);

CommandName 为命令名，如 justifyCenter、justifyRight、bold 等。

带附加参数的命令

部分命令需要传入相应的附加参数，如插入图片（insertImage）、创建链接（createLink）、字体颜色（foreColor），使用下面的语法：

document.execCommand(commandName, false, value);

commandName 为 insertImage 时，value 为将要插入的图片的 URL。

commandName 为 foreColor 时，value 为颜色值字符串，如 #FF9966、blue。

添加块样式标签的命令

添加 HTML 块样式标签（Block-Style Tags），需要将 commandName 指定为 formatBlock、ValueArgument 设置为标签名（tag name），使用下面的语法：

document.execCommand('formatBlock', false, tagName);

该命令将为当前选中行添加一个 HTML 块样式标签，如果本身已带有标签，则将被替换掉。

tagName 为块样式标签名，如标题标签（h1-h6）、段落标签（p）或块引用（blockquote）。

上面是一些最常用的命令，更多信息请参考 document.execCommand API 文档，那里有所有可用命令的列表。

创建一个工具栏

了解了基础知识，下面我们来创建一个工具栏，工具栏的按钮我使用了 Font Awesome 图标。

大家可能也注意到了，除了少数区别，所有的 execCommand 命令都有类似的结构，基于这个特点，我们可以使用下面的节点结构来定义工具栏的按钮：

<a href="#" data-command='commandName'><i class='fa fa-icon'></i></a>

通过这种方式，当用户点击按钮时，我们可以从 data-command 属性中获取到 execCommand 所要执行的命令。

例如下面这些例子：

<a href="#" data-command='h2'>H2</a>
<a href="#" data-command='undo'><i class='fa fa-undo'></i></a>
<a href="#" data-command='createlink'><i class='fa fa-link'></i></a>
<a href="#" data-command='justifyLeft'><i class='fa fa-align-left'></i></a>
<a href="#" data-command='superscript'><i class='fa fa-superscript'></i></a>

第一个按钮的 data-command 属性值为 h2，在 JavaScript 中获取到这个值后，我们将使用 execCommand 方法的 添加块样式标签的命令。同样的，最后一个按钮，superscript 则表示应该使用 无附加参数的命令。

创建字体颜色（foreColor）和背景颜色（backColor）按钮则是另外一种实现方法，这里主要有两个问题。

第一个问题是，提供给用户选择的颜色越多，需要编写的代码就越多，很麻烦而且容易出错。可以使用下面的 JavaScript 来处理这个问题：

var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66','CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF'];

var forePalette = $('.fore-palette');

for (var i = 0; i < colorPalette.length; i++) {
  forePalette.append('<a href="#" data-command="forecolor" data-value="' + '#' + colorPalette[i] + '" style="background-color:' + '#' + colorPalette[i] + ';" class="palette-item"></a>');
}

注意这里我也给每个颜色值设置了一个 data-value 属性，后面可以作为 execCommand 方法的 ValueArgument 参数。

第二个问题是，我们总不能一直显示那么多颜色块吧，这样会占用很大的空间，给用户带来不好的体验。通过一些简单的 CSS，就可以实现一个不错的效果：只有当用户把鼠标移上按钮时，才会显示调色板。

按钮的节点结构需要调整为：

<div class="fore-wrapper"><i class='fa fa-font'></i>
  <div class="fore-palette">
  </div>
</div>

要让按钮在鼠标移上时才显示，我们需要添加以下 CSS：

.fore-palette,
.back-palette {
  display: none;
}

.fore-wrapper:hover .fore-palette,
.back-wrapper:hover .back-palette {
  display: block;
  float: left;
  position: absolute;
}

在 CodePen 的 示例 中，还有许多其它的 CSS 代码用于美化工具栏，但核心功能所需的就只有上面这些。

给编辑器添加功能

现在，是时候来实现我们的编辑器的功能了。所需的代码惊人的少：

$('.toolbar a').click(function(e) {

  var command = $(this).data('command');

  if (command == 'h1' || command == 'h2' || command == 'p') {
    document.execCommand('formatBlock', false, command);
  }

  if (command == 'forecolor' || command == 'backcolor') {
    document.execCommand($(this).data('command'), false, $(this).data('value'));
  }

  if (command == 'createlink' || command == 'insertimage') {
    url = prompt('Enter the link here: ','http:\/\/');
    document.execCommand($(this).data('command'), false, url);
  }

  else document.execCommand($(this).data('command'), false, null);

});

我们侦听了工具栏上所有按钮的点击事件，当按钮被点击时，将其 data-commond 属性的值保存到变量 commond 中，用于后面执行 execCommand 方法的相应命令，避免重复获取，也使代码更加简洁。

设置字体颜色（foreColor）和背景颜色（backColor）时，使用了 data-value 属性的值作为第三个参数。

对于创建链接（createLink）和插入图片（insertImage）命令所需的 url 参数，使用了一个提示弹框（prompt）来获取用户输入的值。当然你也可以添加一些额外的逻辑来检测 url 的有效性。

如果 command 变量不满足上面所有的 if 条件，则执行默认的 execCommand 命令。

这个就是我们实现出来的 WYSIWYG 编辑器：

你也可以使用我 上个教程 介绍的 localStorage 来实现自动保存功能。

跨浏览器差异

对于 execCommand，不同的浏览器会有不同的实现。例如 formatBlock，IE 只支持标题标签（h1-h6）、address 和 pre，甚至在指定 commandName 时还需要包含标签符，如 <h3>。

也不是所有的浏览器都支持所有的命令，IE 就不支持 insertHTML 和 hiliteColor，insertBrOnReturn 只有 Firefox 支持。

更多浏览器差异，可以参考 这个 GitHub 页面。

最后的感想

创建自己的 WYSIWYG 编辑器是一个非常好的学习过程，在本篇教程中，讨论了许多 execCommand 命令，使用了一些 CSS 来处理基础外观。作为练习，建议大家通过文本选择器（text selection）实现一个工具栏按钮，用于设置字体（font），实现方法和字体颜色（foreColor）按钮类似。

希望大家喜欢这篇教程，并能从中学到一些新的东西。