建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹JavaScript如何實(shí)現(xiàn)富文本編輯器，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了信宜免費(fèi)建站歡迎大家使用！
前段時(shí)間在尋找一些關(guān)于富文本編輯器的資料，然后發(fā)現(xiàn)了這個(gè)名為 Pell 的項(xiàng)目，它是一個(gè)所見即所得（WYSIWYG）的文本編輯器，雖然它的功能很簡(jiǎn)單，但是令人吃驚的是它只有 1kb 大小。而項(xiàng)目最核心的文件 pell.js 只有130行，即使加上其它部分，總的 js 數(shù)量也不到200行。這引起了我的興趣，決定看看它的源碼是如何做到這一點(diǎn)的。
項(xiàng)目的主要代碼在 pell.js 文件中，其結(jié)構(gòu)很簡(jiǎn)單，主要功能的實(shí)現(xiàn)依賴于以下的幾個(gè)部分
actions 對(duì)象
exec() 函數(shù)
init() 函數(shù)
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è)編輯器的核心，其語(yǔ)法如下
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è)來(lái)自于舊版 IE 的參數(shù)，所以這里設(shè)置為默認(rèn)的 false 即可。
actions 對(duì)象
文件中定義了一個(gè)名為 actions 的對(duì)象，對(duì)應(yīng)的是下圖工具欄上的這一行按鈕， actions 中的每個(gè)子對(duì)象都保存了一個(gè)按鈕的屬性。
部分代碼：
const actions = {
bold: {
icon: 'B',
title: 'Bold',
result: ()=> exec('bold')
},
italic: {
icon: 'I',
title: 'Italic',
result: ()=> exec('italic')
},
underline: {
icon: '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ù)來(lái)對(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)容顯示出來(lá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ù)來(lái)初始化一個(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 等
actions: [
'bold',
'underline',
'italic',
{
name: 'image',
result: ()=> {
const url = window.prompt('Enter the image URL')
if (url) window.pell.exec('insertImage', ensureHTTP(url))
}
},
// ...
]在 init() 函數(shù)中會(huì)把這個(gè) actions 參數(shù) 和 pell.js 中定義的 actions 對(duì)象組合起來(lái)，可以將 actions 對(duì)象當(dāng)作一個(gè)默認(rèn)設(shè)置，看以下代碼：
// pell.js 中的 init() 函數(shù)
settings.actions = settings.actions
? settings.actions.map(action=> {
if (typeof action === 'string') return actions[action]
// 如果參數(shù)中傳入的 action 已經(jīng)在默認(rèn)設(shè)置中存在，用傳入的參數(shù)覆蓋默認(rèn)設(shè)置
else if (actions[action.name]) {
return { ...actions[action.name], ...action }
}
return action
})
: Object.keys(actions).map(action=> actions[action])如果參數(shù)對(duì)象 setting 中不包含 actions 數(shù)組, 則會(huì)默認(rèn)使用之前定義的 actions 對(duì)象來(lái)初始化。
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è)面的相應(yīng)部分
settings.element.content.oninput = event=>
settings.onChange(event.target.innerHTML)
settings.element.content.onkeydown = preventTab
settings.element.appendChild(settings.element.content)流程整理
最后以“插入鏈接”為例來(lái)梳理下整個(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 來(lái)代替 link 對(duì)象中的默認(rèn)值，然后將修改過的 link 對(duì)象放入 settings.actions 數(shù)組中。
三、對(duì) settings.actions 數(shù)組進(jìn)行一次迭代來(lái)生成工具欄， link 對(duì)象作為其中的一項(xiàng)生成了一個(gè)“插入鏈接”的按鈕。 result 屬性成為其點(diǎn)擊事件。
四、點(diǎn)擊“插入鏈接”的按鈕后，會(huì)讓你輸入一個(gè) url，然后調(diào)用 exec('createLink', url) 在編輯區(qū)域插入該鏈接。
編輯器其它按鈕的功能流程也類似。
這樣 Pell 編輯器的大部分內(nèi)容就講解完畢了，剩余部分還需要自己去看源碼。
以上是“JavaScript如何實(shí)現(xiàn)富文本編輯器”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站題目：JavaScript如何實(shí)現(xiàn)富文本編輯器
文章來(lái)源：http://fisionsoft.com.cn/article/gddhod.html
