溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript中怎么實(shí)現(xiàn)富文本編輯器

發(fā)布時(shí)間:2021-08-10 16:17:37 來源:億速云 閱讀:154 作者:Leah 欄目:web開發(fā)

JavaScript中怎么實(shí)現(xiàn)富文本編輯器,相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。

Document.execCommand()

先從最簡(jiǎn)單的部分看起, exec() 函數(shù)只有下面三行:

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

它將 document.execCommand() 進(jìn)行了一個(gè)簡(jiǎn)單的包裝,Document.execCommand() 就是這個(gè)編輯器的核心,其語法如下

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
  • aCommandName 是表示想執(zhí)行的命令的字符串,比如:加粗 ‘bold’,創(chuàng)建鏈接 ‘createLink’,改變字體大小 ‘fontSize’ 等等

  • aShowDefaultUI 是否顯示默認(rèn)的用戶界面

  • aValueArgument 有些命令需要額外的輸入,如插入圖片、鏈接時(shí)需要給出地址

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

actions 對(duì)象

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

JavaScript中怎么實(shí)現(xiàn)富文本編輯器

部分代碼:

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 的三個(gè)對(duì)象屬性,對(duì)應(yīng)于工具欄中前方的加粗、斜體、下劃線按鈕,可以看出它們的結(jié)構(gòu)是相同的,都有下列三個(gè)屬性:

  • icon: 如何在工具欄中顯示

  • title: 就是 title 啦

  • result: 一個(gè)函數(shù),會(huì)賦給按鈕作為點(diǎn)擊事件,調(diào)用之前所提到的 exec() 函數(shù)來對(duì)文本進(jìn)行操作

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

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

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

init() 初始化函數(shù)

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

  • element: 編輯器的 DOM 元素

  • styleWithCSS: 設(shè)置為 true 時(shí),將會(huì)用 代替

  • actions

  • onChange

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

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

  • 一個(gè)字符串

  • 一個(gè)有 name 屬性的對(duì)象

  • 一個(gè)對(duì)象,沒有 name 屬性,但有生成一個(gè)按鈕的必需屬性 icon,result 等

在 init() 函數(shù)中會(huì)把這個(gè) actions參數(shù) 和 pell.js 中定義的 actions對(duì)象組合起來,可以將 actions 對(duì)象當(dāng)作一個(gè)默認(rèn)設(shè)置,看以下代碼:

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

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

init() 函數(shù)里還有一個(gè)重要的部分,就是創(chuàng)建一個(gè)可編輯區(qū)域,這里創(chuàng)建了一個(gè) 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  // 當(dāng)用戶輸入時(shí),更新頁面的相應(yīng)部分  settings.element.content.oninput = event =>      settings.onChange(event.target.innerHTML)  settings.element.content.onkeydown = preventTab  settings.element.appendChild(settings.element.content)

流程整理

***以“插入鏈接”為例來梳理下整個(gè)編輯器的流程:

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

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

二、在 init() 的運(yùn)行過程中,會(huì)檢查已定義的 actions 對(duì)象中是否有 link 這個(gè)屬性。經(jīng)檢查屬性確實(shí)存在

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

因?yàn)閭魅氲膮?shù)中有 result 這一項(xiàng),所以用傳入的 result 來代替 link 對(duì)象中的默認(rèn)值,然后將修改過的 link 對(duì)象放入 settings.actions 數(shù)組中。

看完上述內(nèi)容,你們掌握J(rèn)avaScript中怎么實(shí)現(xiàn)富文本編輯器的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI