前段時間在尋找一些關於富文字編輯器的資料，然後發現了這個名為 Pell 的專案，它是一個所見即所得（WYSIWYG）的文字編輯器，雖然它的功能很簡單，但是令人吃驚的是它只有 1kb 大小。而專案最核心的檔案 pell.js 只有130行，即使加上其它部分，總的 js 數量也不到200行。這引起了我的興趣，決定看看它的原始碼是如何做到這一點的。
專案的主要程式碼在 pell.js 檔案中，其結構很簡單，主要功能的實現依賴於以下的幾個部分
actions物件exec()函式init()函式
Document.execCommand()
先從最簡單的部分看起， exec() 函式只有下面三行：
|
1 2 3 |
export const exec = (command, value = null) => { document.execCommand(command, false, value); }; |
它將 document.execCommand() 進行了一個簡單的包裝，Document.execCommand() 就是這個編輯器的核心，其語法如下
|
1 |
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) |
aCommandName是表示想執行的命令的字串，比如：加粗 ‘bold’，建立連結 ‘createLink’，改變字型大小 ‘fontSize’ 等等aShowDefaultUI是否顯示預設的使用者介面aValueArgument有些命令需要額外的輸入，如插入圖片、連結時需要給出地址
注：經過我的試驗，在 Chrome 下改變 aShowDefaultUI 的值並未發現影響，這個 stackoverflow 的問題中提到這是一個來自於舊版 IE 的引數，所以這裡設定為預設的 false 即可。
actions 物件
檔案中定義了一個名為 actions 的物件，對應的是下圖工具欄上的這一行按鈕， actions 中的每個子物件都儲存了一個按鈕的屬性。
部分程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 的三個物件屬性，對應於工具欄中前方的加粗、斜體、下劃線按鈕，可以看出它們的結構是相同的，都有下列三個屬性：
icon: 如何在工具欄中顯示title: 就是 title 啦result: 一個函式，會賦給按鈕作為點選事件，呼叫之前所提到的exec()函式來對文字進行操作
現在已有了 actions 物件，那麼如何使用它呢？這就要看看 init() 函式了，它會根據一定的規則從 actions 物件中選出元素組成一個陣列，陣列的每一項都會生成一個按鈕。下面程式碼中的 settings.actions 即為此陣列，其中的每個元素都對應一個顯示在工具欄上的按鈕。settings.actions 的生成規則會在後面進行解釋。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// pell.js 中的 init() 函式 settings.actions.forEach(action => { // 新建一個按鈕元素 const button = document.createElement('button') // 給按鈕加上 css 樣式 button.className = settings.classes.button // 把 icon 屬性作為內容顯示出來 button.innerHTML = action.icon button.title = action.title // 把 result 屬性賦給按鈕作為點選事件 button.onclick = action.result // 將建立的按鈕新增到工具欄上 actionbar.appendChild(button) }) |
這樣陣列中的每個元素就都生成了一個工具欄上的按鈕了。
init() 初始化函式
想使用 pell 編輯器時，只要呼叫 init() 函式來初始化一個編輯器即可。它接收一個 setting 物件作為引數，其中包含這樣的一些屬性：
element: 編輯器的 DOM 元素styleWithCSS: 設定為 true 時，將會用代替actionsonChange
其中最重要的是 actions，它是一個陣列，包含了你想在工具欄顯示的按鈕列表。
actions 陣列中可以有這幾種元素：
- 一個字串
- 一個有
name屬性的物件 - 一個物件，沒有
name屬性，但有生成一個按鈕的必需屬性icon，result等
在 init() 函式中會把這個 actions引數 和 pell.js 中定義的 actions物件組合起來，可以將 actions 物件當作一個預設設定，看以下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
actions: [ 'bold', 'underline', 'italic', { name: 'image', result: () => { const url = window.prompt('Enter the image URL') if (url) window.pell.exec('insertImage', ensureHTTP(url)) } }, // ... ] |
如果引數物件 setting 中不包含 actions 陣列, 則會預設使用之前定義的 actions 物件來初始化。
init() 函式裡還有一個重要的部分，就是建立一個可編輯區域，這裡建立了一個 div 元素，將其 contentEditable 屬性設為 true，從而可以在這裡使用之前提到的 document.execCommand() 命令了。
|
1 2 3 4 5 6 7 8 9 10 |
// 建立編輯區域的元素 settings.element.content = document.createElement('div') // 讓 div 成為可編輯狀態 settings.element.content.contentEditable = true settings.element.content.className = settings.classes.content // 當使用者輸入時，更新頁面的相應部分 settings.element.content.oninput = event => settings.onChange(event.target.innerHTML) settings.element.content.onkeydown = preventTab settings.element.appendChild(settings.element.content) |
流程整理
最後以“插入連結”為例來梳理下整個編輯器的流程：
一、在呼叫 init() 函式時，在引數物件的 action 陣列中加入以下一項
|
1 2 3 4 5 6 7 |
{ name: 'link', result: () => { const url = window.prompt('Enter the link URL') if (url) window.pell.exec('createLink', ensureHTTP(url)) } } |
二、在 init() 的執行過程中，會檢查已定義的 actions 物件中是否有 link 這個屬性。經檢查屬性確實存在
|
1 2 3 4 5 6 7 8 |
link: { icon: '?', title: 'Link', result: () => { const url = window.prompt('Enter the link URL') if (url) exec('createLink', url) } } |
因為傳入的引數中有 result 這一項，所以用傳入的 result 來代替 link 物件中的預設值，然後將修改過的 link 物件放入 settings.actions 陣列中。
三、對 settings.actions 陣列進行一次迭代來生成工具欄，link 物件作為其中的一項生成了一個“插入連結”的按鈕。result 屬性成為其點選事件。
四、點選“插入連結”的按鈕後，會讓你輸入一個 url，然後呼叫 exec('createLink', url) 在編輯區域插入該連結。
編輯器其它按鈕的功能流程也類似。
這樣 Pell 編輯器的大部分內容就講解完畢了，剩餘部分還需要自己去看原始碼。畢竟專案的程式碼不長，以此作為文字編輯器的入門倒不錯。
2017年的最後一篇文章了，再見，2017。