JavaScript 代碼如何實現(xiàn)富文本編輯器

前段時間在尋找一些關(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 中的每個子對象都保存了一個按鈕的屬性认境。

image

部分代碼:

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)容就講解完畢了萍程,剩余部分還需要自己去看源碼。畢竟項目的代碼不長兔仰,以此作為文本編輯器的入門倒不錯茫负。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末具被,一起剝皮案震驚了整個濱河市严嗜,隨后出現(xiàn)的幾起案子葛躏,更是在濱河造成了極大的恐慌移宅,老刑警劉巖蝗砾,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件薄料,死亡現(xiàn)場離奇詭異熬苍,居然都是意外死亡管嬉,警方通過查閱死者的電腦和手機羹蚣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進店門原探,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人顽素,你說我怎么就攤上這事咽弦。” “怎么了胁出?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵型型,是天一觀的道長。 經(jīng)常有香客問我划鸽,道長输莺,這世上最難降的妖魔是什么戚哎? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮嫂用,結(jié)果婚禮上型凳,老公的妹妹穿的比我還像新娘。我一直安慰自己嘱函,他們只是感情好甘畅,可當(dāng)我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著往弓,像睡著了一般疏唾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上函似,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天槐脏,我揣著相機與錄音,去河邊找鬼撇寞。 笑死顿天,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蔑担。 我是一名探鬼主播牌废,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼啤握!你這毒婦竟也來了鸟缕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤排抬,失蹤者是張志新(化名)和其女友劉穎懂从,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體畜埋,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡莫绣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了悠鞍。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片对室。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖咖祭,靈堂內(nèi)的尸體忽然破棺而出掩宜,到底是詐尸還是另有隱情,我是刑警寧澤么翰,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布牺汤,位于F島的核電站,受9級特大地震影響浩嫌,放射性物質(zhì)發(fā)生泄漏檐迟。R本人自食惡果不足惜补胚,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望追迟。 院中可真熱鬧溶其,春花似錦、人聲如沸敦间。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽廓块。三九已至厢绝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間带猴,已是汗流浹背昔汉。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留浓利,地道東北人挤庇。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像贷掖,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子渴语,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品苹威,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式驾凶。簡單...
    舟漁行舟閱讀 7,761評論 2 17
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理牙甫,服務(wù)發(fā)現(xiàn),斷路器调违,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 每一個胖子都有一部辛酸的減肥史技肩,然而且轨,還是那么胖,淚奔~ 本人已經(jīng)嘗試過很多次減肥虚婿,然而屢戰(zhàn)屢敗旋奢,以往減肥都是減食...
    fishstar閱讀 248評論 6 2
  • 楚喬傳正在熱播當(dāng)中,世子黑化然痊,星月組合總算在一起秀恩愛啦至朗。隨著劇情的推進,可憐的墨兒一上線就失去了親人剧浸,被星月救下...
    琴音花語閱讀 484評論 0 0
  • 娛樂圈里總是流傳著若干年后你未嫁吨艇,我未娶,我們就在一起的故事張國榮對梅艷芳說過:“等我們到40歲初澎,你未嫁秸应,我未娶,...
    一只貓的日常閱讀 321評論 0 0