前段時間在尋找一些關(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ù)
Document.execCommand()
先從最簡單的部分看起, 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 對象
文件中定義了一個名為 actions 的對象,對應(yīng)的是下圖工具欄上的這一行按鈕, 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 的三個對象屬性叉信,對應(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ù)組中的每個元素就都生成了一個工具欄上的按鈕了祟峦。
init() 初始化函數(shù)
想使用 pell 編輯器時罚斗,只要調(diào)用 init() 函數(shù)來初始化一個編輯器即可。它接收一個 setting 對象作為參數(shù)宅楞,其中包含這樣的一些屬性:
element: 編輯器的 DOM 元素
styleWithCSS: 設(shè)置為 true 時针姿,將會用 代替
actions
onChange
其中最重要的是 actions,它是一個數(shù)組厌衙,包含了你想在工具欄顯示的按鈕列表距淫。
actions 數(shù)組中可以有這幾種元素:
一個字符串
一個有 name 屬性的對象
一個對象,沒有 name 屬性婶希,但有生成一個按鈕的必需屬性 icon榕暇,result 等
在 init() 函數(shù)中會把這個 actions參數(shù) 和 pell.js 中定義的 actions對象組合起來,可以將 actions 對象當(dāng)作一個默認設(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ù)對象 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
// 當(dāng)用戶輸入時业栅,更新頁面的相應(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)容就講解完畢了萍程,剩余部分還需要自己去看源碼。畢竟項目的代碼不長兔仰,以此作為文本編輯器的入門倒不錯茫负。