建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
前段時(shí)間在尋找一些關(guān)于富文本編輯器的資料，然后發(fā)現(xiàn)了這個(gè)名為 Pell 的項(xiàng)目，它是一個(gè)所見(jiàn)即所得（WYSIWYG）的文本編輯器，雖然它的功能很簡(jiǎn)單，但是令人吃驚的是它只有 1kb 大小。而項(xiàng)目最核心的文件 pell.js 只有130行，即使加上其它部分，總的 js 數(shù)量也不到200行。這引起了我的興趣，決定看看它的源碼是如何做到這一點(diǎn)的。
九原網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
項(xiàng)目的主要代碼在 pell.js 文件中，其結(jié)構(gòu)很簡(jiǎn)單，主要功能的實(shí)現(xiàn)依賴(lài)于以下的幾個(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)的用戶(hù)界面
- aValueArgument 有些命令需要額外的輸入，如插入圖片、鏈接時(shí)需要給出地址
注：經(jīng)過(guò)我的試驗(yàn)，在 Chrome 下改變 aShowDefaultUI 的值并未發(fā)現(xiàn)影響，這個(gè) stackoverflow 的問(wèn)題中提到這是一個(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)于工具欄中前方的加粗、斜體、下劃線(xiàn)按鈕，可以看出它們的結(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ì)象，沒(méi)有 name 屬性，但有生成一個(gè)按鈕的必需屬性 icon，result 等
在 init() 函數(shù)中會(huì)把這個(gè) actions參數(shù) 和 pell.js 中定義的 actions對(duì)象組合起來(lái)，可以將 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ì)象來(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)用戶(hù)輸入時(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)行過(guò)程中，會(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)值，然后將修改過(guò)的 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ū)域插入該鏈接。
編輯器其它按鈕的功能流程也類(lèi)似。
這樣 Pell 編輯器的大部分內(nèi)容就講解完畢了，剩余部分還需要自己去看源碼。畢竟項(xiàng)目的代碼不長(zhǎng)，以此作為文本編輯器的入門(mén)倒不錯(cuò)。
本文題目：不到200行JavaScript代碼如何實(shí)現(xiàn)富文本編輯器
文章URL：http://m.5511xx.com/article/dpscgii.html
