不到200行 JavaScript 代碼實現富文字編輯器的方法，200行javascript

不到200行 JavaScript 代碼實現富文字編輯器的方法，200行javascript

前段時間在尋找一些關於富文字編輯器的資料，然後發現了這個名為 Pell 的項目，它是一個所見即所得 (WYSIWYG)（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 = truesettings.element.content.className = settings.classes.content// 當使用者輸入時，更新頁面的相應部分settings.element.content.oninput = event=>   settings.onChange(event.target.innerHTML)settings.element.content.onkeydown = preventTabsettings.element.appendChild(settings.element.content)

流程整理

最後以“插入連結”為例來梳理下整個編輯器的流程：

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

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

二、在 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 數組中。

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

四、點擊“插入連結”的按鈕後，會讓你輸入一個 url，然後調用 exec('createLink', url) 在編輯地區插入該連結。

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

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

總結

以上所述是小編給大家介紹的不到200行 JavaScript 代碼實現富文字編輯器的方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！