JavaScript中怎么實現富文本編輯器

JavaScript中怎么實現富文本編輯器，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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')      },      // &hellip;  }

這段代碼中顯示了名為 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 時，將會用 代替

• actions

• onChange

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

actions 數組中可以有這幾種元素：

• 一個字符串

• 一個有 name 屬性的對象

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

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

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() 命令了。

// 創建編輯區域的元素  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 數組中加入以下一項

{      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 數組中。

看完上述內容，你們掌握JavaScript中怎么實現富文本編輯器的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！