前段時間在尋找一些關於富文本編輯器的資料，然後發現了這個名為Pell 的項目，它是一個所見即所得（WYSIWYG）的文本編輯器，雖然它的功能很簡單，但是令人吃驚的是它只有1kb 大小。而專案最核心的檔案 pell.js 只有130行，即使加上其它部分，總的 js 數量也不到200行。本文主要介紹了不到200行 JavaScript 程式碼實作富文本編輯器的方法,需要的朋友可以參考下，希望能幫助到大家。
專案的主要程式碼在pell.js 檔案中，其結構很簡單，主要功能的實作依賴以下的幾個部分
actions 物件
exec() 函數
init() 函數
Document.execCommand()
先從最簡單的部分看起， exec() 函數只有下面三行：
export const exec = (command, value =null) => {
document.execCommand(command, false, value);
};它將document.execCommand() 進行了一個簡單的包裝， Document.execCommand() 就是這個編輯器的核心，其語法如下
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
aCommandName 是表示想執行的命令的字串，例如：加粗'bold'，建立連結'createLink'，改變字體大小'fontSize' 等等
aShowDefaultUI 是否顯示預設的使用者介面
aValueArgument 有些指令需要額外的輸入，如插入圖片、連結時需要給出地址
註：經過我的試驗，在Chrome 下改變aShowDefaultUI 的值並未發現影響， 這個stackoverflow 的問題中提到這是一個來自於舊版IE 的參數，所以這裡設定為預設的false 即可。
actions 物件
檔案中定義了一個名為actions 的對象，對應的是下圖工具列上的這一行按鈕， 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 的三個物件屬性，對應於工具列中前方的加粗、 斜體、底線按鈕，可以看出它們的結構是相同的，都有下列三個屬性：
icon : 如何在工具列中顯示
title : 就是title 啦
result : 一個函數，會賦給按鈕作為點擊事件，呼叫之前所提到的exec() 函數來對文字進行動作
#現在已有了actions 對象，那麼要如何使用它呢？這就要看看 init() 函數了，它會依照一定的規則從 actions 物件中選出元素組成一個數組，數組的每一項都會產生一個按鈕。下面程式碼中的 settings.actions 即為此數組，其中的每個元素都對應一個顯示在工具列上的按鈕。 settings.actions 的生成規則會在後面解釋。
// pell.js 中的 init() 函数
settings.actions.forEach(action=> {
// 新建一个按钮元素
const button = document.createElement('button')
// 给按钮加上 css 样式
button.className = settings.classes.button
// 把 icon 属性作为内容显示出来
button.innerHTML = action.icon
button.title = action.title
// 把 result 属性赋给按钮作为点击事件
button.onclick = action.result
// 将创建的按钮添加到工具栏上
actionbar.appendChild(button)
})這樣數組中的每個元素就都產生了一個工具列上的按鈕了。
init() 初始化函數
想使用 pell 編輯器時，只要呼叫 init() 函數來初始化一個編輯器即可。它接收一個setting 物件作為參數，其中包含這樣的一些屬性：
element : 編輯器的DOM 元素
styleWithCSS : 設為true 時，會以 取代
#actions
onChange
#其中最重要的是actions ，它是一個陣列，包含了你想在工具列顯示的按鈕清單。
actions 陣列中可以有這幾個元素：
一個字串
一個有name 屬性的物件
一個對象，沒有name 屬性，但有產生一個按鈕的必要屬性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()函數中會把這個actions 參數和pell.js 中定義的actions 物件組合起來，可以將actions 物件當作一個預設設置，看以下程式碼：
// pell.js 中的 init() 函数
settings.actions = settings.actions
? settings.actions.map(action=> {
if (typeof action === 'string') return actions[action]
// 如果参数中传入的 action 已经在默认设置中存在，用传入的参数覆盖默认设置
else if (actions[action.name]) {
return { ...actions[action.name], ...action }
}
return action
})
: Object.keys(actions).map(action=> actions[action])如果參數物件setting 中不包含actions 陣列,則會預設使用先前定義的actions 物件來初始化。
init() 函數裡還有一個重要的部分，就是建立一個可編輯區域，這裡創建了一個p 元素，將其contentEditable 屬性設為true ，從而可以在這裡使用之前提到的document .execCommand() 命令了。
// 创建编辑区域的元素
settings.element.content = document.createElement('p')
// 让 p 成为可编辑状态
settings.element.content.contentEditable = true
settings.element.content.className = settings.classes.content
// 当用户输入时，更新页面的相应部分
settings.element.content.oninput = event=>
settings.onChange(event.target.innerHTML)
settings.element.content.onkeydown = preventTab
settings.element.appendChild(settings.element.content)流程整理
最後以「插入連結」為例來梳理下整個編輯器的流程：
一、在呼叫init() 函數時，在參數物件的action 陣列中加入以下一項
{
name: 'link',
result: ()=> {
const url = window.prompt('Enter the link URL')
if (url) window.pell.exec('createLink', ensureHTTP(url))
}
}二、在init() 的運行過程中，會檢查已定義的actions 物件中是否有link 這個屬性。經檢查屬性確實存在
link: {
icon: '',
title: 'Link',
result: ()=> {
const url = window.prompt('Enter the link URL')
if (url) exec('createLink', url)
}
}因為傳入的參數中有result 這一項，所以用傳入的result 來代替link 物件中的預設值，然後將修改過的link 物件放入settings. actions 數組中。
三、對 settings.actions 陣列進行一次迭代來產生工具欄， link 物件作為其中的一項產生了一個「插入連結」的按鈕。 result 屬性成為其點擊事件。
四、點擊「插入連結」的按鈕後，會讓你輸入一個 url，然後呼叫 exec('createLink', url) 在編輯區域插入該連結。
編輯器其它按鈕的功能流程也類似。
這樣 Pell 編輯器的大部分內容就講解完畢了，剩餘部分還需要自己去看原始碼。畢竟專案的程式碼不長，以此作為文字編輯器的入門倒不錯。
相關推薦：
JavaScript實作輸入框編輯器語法高亮想法及程式碼詳解
#以上是簡單實作JavaScript 富文本編輯器的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
