不到200行 JavaScript 代码实现富文本编辑器的方法

前段时间在寻找一些关于富文本编辑器的资料，然后发现了这个名为 Pell 的项目，它是一个所见即所得（WYSIWYG）的文本编辑器，虽然它的功能很简单，但是令人吃惊的是它只有 1kb 大小。而项目最核心的文件 pell.js 只有130行，即使加上其它部分，总的 js 数量也不到200行。这引起了我的兴趣，决定看看它的源码是如何做到这一点的。

项目的主要代码在 pell.js 文件中，其结构很简单，主要功能的实现依赖于以下的几个部分

Document.execCommand()

先从最简单的部分看起， exec() 函数只有下面三行：

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

它将 document.execCommand() 进行了一个简单的包装， Document.execCommand() 就是这个编辑器的核心，其语法如下

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

注：经过我的试验，在 Chrome 下改变 aShowDefaultUI 的值并未发现影响， 这个stackoverflow 的问题 中提到这是一个来自于旧版 IE 的参数，所以这里设置为默认的 false 即可。

actions 对象

文件中定义了一个名为 actions 的对象，对应的是下图工具栏上的这一行按钮， 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')  },  // …}

这段代码中显示了名为 bold ， italic ， underline 的三个对象属性，对应于工具栏中前方的 加粗 、 斜体 、下划线按钮，可以看出它们的结构是相同的，都有下列三个属性：

现在已有了 actions 对象，那么如何使用它呢？这就要看看 init() 函数了，它会根据一定的规则从 actions 对象中选出元素组成一个数组，数组的每一项都会生成一个按钮。下面代码中的 settings.actions 即为此数组，其中的每个元素都对应一个显示在工具栏上的按钮。 settings.actions 的生成规则会在后面进行解释。