摘要：初始化函數(shù)想使用編輯器時，只要調(diào)用函數(shù)來初始化一個編輯器即可。三對數(shù)組進行一次迭代來生成工具欄，對象作為其中的一項生成了一個插入鏈接的按鈕。畢竟項目的代碼不長，以此作為文本編輯器的入門倒不錯。

前段時間在尋找一些關(guān)于富文本編輯器的資料，然后發(fā)現(xiàn)了這個名為 Pell 的項目，它是一個所見即所得（WYSIWYG）的文本編輯器，雖然它的功能很簡單，但是令人吃驚的是它只有 1kb 大小。而項目最核心的文件 pell.js 只有130行，即使加上其它部分，總的 js 數(shù)量也不到200行。這引起了我的興趣，決定看看它的源碼是如何做到這一點的。

項目的主要代碼在 pell.js 文件中，其結(jié)構(gòu)很簡單，主要功能的實現(xiàn)依賴于以下的幾個部分

actions 對象

exec() 函數(shù)

init() 函數(shù)

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

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

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

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

aCommandName 是表示想執(zhí)行的命令的字符串，比如：加粗 "bold"，創(chuàng)建鏈接 "createLink"，改變字體大小 "fontSize" 等等

aShowDefaultUI 是否顯示默認的用戶界面

aValueArgument 有些命令需要額外的輸入，如插入圖片、鏈接時需要給出地址

注：經(jīng)過我的試驗，在 Chrome 下改變 aShowDefaultUI 的值并未發(fā)現(xiàn)影響，這個 stackoverflow 的問題中提到這是一個來自于舊版 IE 的參數(shù)，所以這里設(shè)置為默認的 false 即可。

文件中定義了一個名為 actions 的對象，對應(yīng)的是下圖工具欄上的這一行按鈕， actions 中的每個子對象都保存了一個按鈕的屬性。

部分代碼：

const actions = {
    bold: {
        icon: "B",
        title: "Bold",
        result: () => exec("bold")
    },
    italic: {
        icon: "I",
        title: "Italic",
        result: () => exec("italic")
    },
    underline: {
        icon: "U",
        title: "Underline",
        result: () => exec("underline")
    },
    // …
}

這段代碼中顯示了名為 bold，italic，underline 的三個對象屬性，對應(yīng)于工具欄中前方的加粗、斜體、下劃線按鈕，可以看出它們的結(jié)構(gòu)是相同的，都有下列三個屬性：

icon: 如何在工具欄中顯示

title: 就是 title 啦

result: 一個函數(shù)，會賦給按鈕作為點擊事件，調(diào)用之前所提到的 exec() 函數(shù)來對文本進行操作

現(xiàn)在已有了 actions 對象，那么如何使用它呢？這就要看看 init() 函數(shù)了，它會根據(jù)一定的規(guī)則從 actions 對象中選出元素組成一個數(shù)組，數(shù)組的每一項都會生成一個按鈕。下面代碼中的 settings.actions 即為此數(shù)組，其中的每個元素都對應(yīng)一個顯示在工具欄上的按鈕。settings.actions 的生成規(guī)則會在后面進行解釋。

// pell.js 中的 init() 函數(shù)
settings.actions.forEach(action => {
    // 新建一個按鈕元素
    const button = document.createElement("button")
    // 給按鈕加上 css 樣式
    button.className = settings.classes.button
    // 把 icon 屬性作為內(nèi)容顯示出來
    button.innerHTML = action.icon
    button.title = action.title
    // 把 result 屬性賦給按鈕作為點擊事件
    button.onclick = action.result
    // 將創(chuàng)建的按鈕添加到工具欄上
    actionbar.appendChild(button)
})

這樣數(shù)組中的每個元素就都生成了一個工具欄上的按鈕了。

想使用 pell 編輯器時，只要調(diào)用 init() 函數(shù)來初始化一個編輯器即可。它接收一個 setting 對象作為參數(shù)，其中包含這樣的一些屬性：

element: 編輯器的 DOM 元素

styleWithCSS: 設(shè)置為 true 時，將會用 代替

actions

onChange

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

actions 數(shù)組中可以有這幾種元素：

一個字符串

一個有 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() 函數(shù)中會把這個 actions參數(shù) 和 pell.js 中定義的 actions對象組合起來，可以將 actions 對象當作一個默認設(shè)置，看以下代碼：

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

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

        // 如果參數(shù)中傳入的 action 已經(jīng)在默認設(shè)置中存在，用傳入的參數(shù)覆蓋默認設(shè)置
        else if (actions[action.name]) {
            return { ...actions[action.name], ...action }
        }

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

如果參數(shù)對象 setting 中不包含 actions 數(shù)組, 則會默認使用之前定義的 actions 對象來初始化。

init() 函數(shù)里還有一個重要的部分，就是創(chuàng)建一個可編輯區(qū)域，這里創(chuàng)建了一個 div 元素，將其 contentEditable 屬性設(shè)為 true，從而可以在這里使用之前提到的 document.execCommand() 命令了。

// 創(chuàng)建編輯區(qū)域的元素
settings.element.content = document.createElement("div")
// 讓 div 成為可編輯狀態(tài)
settings.element.content.contentEditable = true
settings.element.content.className = settings.classes.content
// 當用戶輸入時，更新頁面的相應(yīng)部分
settings.element.content.oninput = event => 
    settings.onChange(event.target.innerHTML)
settings.element.content.onkeydown = preventTab
settings.element.appendChild(settings.element.content)

最后以“插入鏈接”為例來梳理下整個編輯器的流程：

一、在調(diào)用 init() 函數(shù)時，在參數(shù)對象的 action 數(shù)組中加入以下一項

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

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

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

因為傳入的參數(shù)中有 result 這一項，所以用傳入的 result 來代替 link 對象中的默認值，然后將修改過的 link 對象放入 settings.actions 數(shù)組中。

三、對 settings.actions 數(shù)組進行一次迭代來生成工具欄，link 對象作為其中的一項生成了一個“插入鏈接”的按鈕。result 屬性成為其點擊事件。

四、點擊“插入鏈接”的按鈕后，會讓你輸入一個 url，然后調(diào)用 exec("createLink", url) 在編輯區(qū)域插入該鏈接。

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

這樣 Pell 編輯器的大部分內(nèi)容就講解完畢了，剩余部分還需要自己去看源碼。畢竟項目的代碼不長，以此作為文本編輯器的入門倒不錯。

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

本文原地址