使用过 office 文档的同学一定知道他的便捷，不仅可以很好的编辑文档，还可以赋予它一定的格式、段落、缩进，还可以使用图片等等。

如果我们在 web 上也想要实现这样的效果，那么我们应该怎么做呢？

我们可以在网上找到已经封装好的插件，例如：draft 或者 pell，这些插件都是开箱即用的，也可以在此之上进行封装。

当然，我们也可以选择自己封装一个我们需要的插件。

那怎么才能实现一个富文本编辑器呢？

我们可以选择 document.execCommand 来实现一个简易的富文本编辑器。

指令

下面先来看下 document.execCommand 语法：

document.execCommand(commandName, showDefaultUI, value)

上面的语句用来对可编辑的元素执行一段命令，返回布尔值，如果为 false 则表示操作不被支持或未被启用

我们分别看看参数的含义：

1. commandName 代表了命令名称

2. showDefaultUI 是否展示对话框，true：展示，false：不展示，一般为 false

3. value 补充信息，例如：插入图片需要的 url

既然知道了语法，那我们现在封装一个执行函数用来执行指令：

const exec = (commandName, value = null) => {
  document.execCommand(commandName, false, value);
};

接下来，我们来做下工具栏的设计和封装。

工具栏

假设工具栏有很多格式化的按钮，当我们点击的时候所选择的区域的文字会做相应改变，按钮既有显示的样式，还有执行功能的方法，可以使用对象来表示，所有按钮属性的集合形成了工具栏。

我们使用 actions 作为工具栏按钮的集合，即：

const actions = {
  bold: {
    icon: "<b>B</b>",
    title: "Bold",
    result: () => exec("bold"),
  },
  italic: {
    icon: "<i>I</i>",
    title: "Italic",
    result: () => exec("italic"),
  },
  underline: {
    icon: "<u>U</u>",
    title: "Underline",
    result: () => exec("underline"),
  },
  justifyLeft: {
    icon: "<span>L</span>",
    title: "JustifyLeft",
    result: () => exec("justifyLeft"),
  },
  justifyRight: {
    icon: "<span>R</span>",
    title: "JustifyRight",
    result: () => exec("justifyRight"),
  },
  justifyCenter: {
    icon: "<span>C</span>",
    title: "JustifyCenter",
   onClick: () => exec("justifyCenter"),
  },
};

上面代码就是一个简单的工具栏按钮的集合，其中有 6 个格式化的属性。

现在，我们来讲解下字段：

• icon 工具栏显示的按钮的样式

• title 按钮的标题

• onClick 点击按钮执行的指令

我们已经完成了工具栏的部分，现在我们实现下完整的页面和编辑区域吧！

编辑区域

首先创建富文本容器，在容器内分别放置工具栏和编辑区域：

<div className="textEditor">
  <div className="actions">
    {Object.keys(actions).map((action) => (
      <button
        type="button"
        title={actions[action].title}
        onClick={actions[action].onClick}
      >
        {actions[action].icon}
      </button>
    ))}
  </div>
  <div className="content" contentEditable></div>
 </div>

我们最后来看一下实现的效果吧：

富文本编辑器初实现静态图

应用效果怎么样呢？我们看下面：

最终实现效果

总结

我们已经简单的实现了一个富文本编辑器，但是这个编辑器还有很大的空间等待我们去优化，比如：点击工具栏闪烁的问题，更多的功能等。