前段時間在尋找一些關于富文本編輯器的資料，然后發現了這個名為 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 的生成規則會在后面進行解釋。