最近鉴于项目要求，需要对自己使用的富文本编辑器进行改造。

我们首先简单了解下wangEditor的源码结构

第一步：polyfill

当然现在这些基本都用不上了，现代点的浏览器都支持这些方法的

基于document封装了一套dom操作类DomElement

里面有forEach、css、show、on、addClass、children、find、parent、insertAfter等 然后将它改成类似jQuery的

function $(selector) {
  return new DomElement(selector);
}

配置

根据用户配置和默认值合并成最终的配置

工具栏上的各类菜单功能组件

比如Head、Head、FontSize、Italic、Undo、ForeColor、Bold等，每个组件都可以注册在菜单组件Menu上，由菜单组件统一管理添加到工具栏上，几乎每个菜单功能组件都有一个_command方法，其主要功能就在这个方法中。 我们看一个设置颜色的组件ForeColor

// 原型
ForeColor.prototype = {
  constructor: ForeColor,

  // 执行命令
  _command: function _command(value, index) {
    var editor = this.editor;
    editor.cmd.do('foreColor', value);
  },
};

其核心方法就是document的execCommand。

如果需要及时更新菜单功能组件的最新值（比如Bold组件查询当前位置是否已经加粗）来更新对应按钮的显示状态，就需要一个额外的方法tryChangeActive，所有功能组件的tryChangeActive方法会在执行了对应的command和保存选区时被调用。

怎么获取当前的最新值呢？尤其是那种从未通过菜单设置的地方？

以获取当前位置是否加粗的Bold为例

Bold.prototype = {
  constructor: Bold,
 // 试图改变 active 状态
  tryChangeActive: function tryChangeActive(e) {
    var editor = this.editor;
    var $elem = this.$elem;
    if (editor.cmd.queryCommandState('bold')) {
      this._active = true;
      $elem.addClass('active');
    } else {
      this._active = false;
      $elem.removeClass('active');
    }
  },
}

其核心就是document的queryCommandState方法。

这些菜单功能组件根据交互方式可以分为点击类（比如加粗Bold）和下拉类（比如对齐方式Justify）。

wangEditor还支持简单的多语言