您好,登錄后才能下訂單哦!
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è)按鈕的屬性。
部分代碼:
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 的三個(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è)資訊頻道,感謝各位的閱讀!
免責(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)容。