不到200行 JavaScript 代碼如何實現富文本編輯器

前段時間在尋找一些關於富文本編輯器的資料，而後發現了這個名爲 Pell 的項目，它是一個所見即所得（WYSIWYG）的文本編輯器，雖然它的功能很簡單，可是使人吃驚的是它只有 1kb 大小。而項目最核心的文件 pell.js 只有130行，即便加上其它部分，總的 js 數量也不到200行。這引發了個人興趣，決定看看它的源碼是如何作到這一點的。

項目的主要代碼在 pell.js 文件中，其結構很簡單，主要功能的實現依賴於如下的幾個部分

• actions 對象
• exec() 函數
• init() 函數

Document.execCommand()

先從最簡單的部分看起， exec() 函數只有下面三行：

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

它將 document.execCommand() 進行了一個簡單的包裝，Document.execCommand() 就是這個編輯器的核心，其語法以下

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

• aCommandName 是表示想執行的命令的字符串，好比：加粗 'bold'，建立連接 'createLink'，改變字體大小 'fontSize' 等等
• 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 的三個對象屬性，對應於工具欄中前方的加粗、斜體、下劃線按鈕，能夠看出它們的結構是相同的，都有下列三個屬性：

• icon: 如何在工具欄中顯示
• title: 就是 title 啦
• result: 一個函數，會賦給按鈕做爲點擊事件，調用以前所提到的 exec() 函數來對文本進行操做

如今已有了 actions 對象，那麼如何使用它呢？這就要看看 init() 函數了，它會根據必定的規則從 actions 對象中選出元素組成一個數組，數組的每一項都會生成一個按鈕。下面代碼中的 settings.actions 即爲此數組，其中的每一個元素都對應一個顯示在工具欄上的按鈕。settings.actions 的生成規則會在後面進行解釋。

// 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 時，將會用 <span style="font-weight: bold;"></span> 代替 <b></b>
• actions
• onChange

其中最重要的是 actions，它是一個數組，包含了你想在工具欄顯示的按鈕列表。

actions 數組中能夠有這幾種元素：

• 一個字符串
• 一個有 name 屬性的對象
• 一個對象，沒有 name 屬性，但有生成一個按鈕的必需屬性 icon，result 等

actions: [
  'bold',
  'underline',
  'italic',
  {
    name: 'image',
    result: () => {
      const url = window.prompt('Enter the image URL')
      if (url) window.pell.exec('insertImage', ensureHTTP(url))
    }
  },
  // ...
]

在 init() 函數中會把這個 actions參數 和 pell.js 中定義的 actions對象組合起來，能夠將 actions 對象看成一個默認設置，看如下代碼：

// pell.js 中的 init() 函數
settings.actions = settings.actions
    ? settings.actions.map(action => {

        if (typeof action === 'string') return actions[action]

        // 若是參數中傳入的 action 已經在默認設置中存在，用傳入的參數覆蓋默認設置
        else if (actions[action.name]) {
            return { ...actions[action.name], ...action }
        }

        return action
    })
    : Object.keys(actions).map(action => actions[action])

若是參數對象 setting 中不包含 actions 數組, 則會默認使用以前定義的 actions 對象來初始化。

init() 函數裏還有一個重要的部分，就是建立一個可編輯區域，這裏建立了一個 div 元素，將其 contentEditable 屬性設爲 true，從而能夠在這裏使用以前提到的 document.execCommand() 命令了。

// 建立編輯區域的元素
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)

流程整理

最後以「插入連接」爲例來梳理下整個編輯器的流程：

1、在調用 init() 函數時，在參數對象的 action 數組中加入如下一項

{
    name: 'link',
    result: () => {
        const url = window.prompt('Enter the link URL')
        if (url) window.pell.exec('createLink', ensureHTTP(url))
    }
}

2、在 init() 的運行過程當中，會檢查已定義的 actions 對象中是否有 link 這個屬性。經檢查屬性確實存在

link: {
    icon: '🔗',
    title: 'Link',
    result: () => {
        const url = window.prompt('Enter the link URL')
        if (url) exec('createLink', url)
    }
}

由於傳入的參數中有 result 這一項，因此用傳入的 result 來代替 link 對象中的默認值，而後將修改過的 link 對象放入 settings.actions 數組中。

3、對 settings.actions 數組進行一次迭代來生成工具欄，link 對象做爲其中的一項生成了一個「插入連接」的按鈕。result 屬性成爲其點擊事件。

4、點擊「插入連接」的按鈕後，會讓你輸入一個 url，而後調用 exec('createLink', url) 在編輯區域插入該連接。

編輯器其它按鈕的功能流程也相似。

這樣 Pell 編輯器的大部份內容就講解完畢了，剩餘部分還須要本身去看源碼。畢竟項目的代碼不長，以此做爲文本編輯器的入門倒不錯。

---

2017年的最後一篇文章了，再見，2017。

本文原地址