最近折騰 Websocket，打算開發(fā)一個(gè)聊天室應(yīng)用練練手。在應(yīng)用開發(fā)的過(guò)程中發(fā)現(xiàn)可以插入 emoji ，粘貼圖片的富文本輸入框其實(shí)蘊(yùn)含著許多有趣的知識(shí)，于是便打算記錄下來(lái)和大家分享。

輸入框富文本化

傳統(tǒng)的輸入框都是使用 <textarea> 來(lái)制作的，它的優(yōu)勢(shì)是非常簡(jiǎn)單，但***的缺陷卻是無(wú)法展示圖片。為了能夠讓輸入框能夠展示圖片（富文本化），我們可以采用設(shè)置了 contenteditable="true" 屬性的 <div> 來(lái)實(shí)現(xiàn)這里面的功能。

簡(jiǎn)單創(chuàng)建一個(gè) index.html 文件，然后寫入如下內(nèi)容： 

<div class="editor" contenteditable="true">  
  <img src="https://static.easyicon.net/preview/121/1214124.gif" alt="">  
</div> 

打開瀏覽器，就能看到一個(gè)默認(rèn)已經(jīng)帶了一張圖片的輸入框：

光標(biāo)可以在圖片前后移動(dòng)，同時(shí)也可以輸入內(nèi)容，甚至通過(guò)退格鍵刪除這張圖片——換句話說(shuō)，圖片也是可編輯內(nèi)容的一部分，也意味著輸入框的富文本化已經(jīng)體現(xiàn)出來(lái)了。

接下來(lái)的任務(wù)，就是思考如何直接通過(guò) control + v 把圖片粘貼進(jìn)去了。

處理粘貼事件

任何通過(guò)“復(fù)制”或者 control + c 所復(fù)制的內(nèi)容（包括屏幕截圖）都會(huì)儲(chǔ)存在剪貼板，在粘貼的時(shí)候可以在輸入框的 onpaste 事件里面監(jiān)聽到。 

<div class="editor" contenteditable="true">  
  <img src="https://static.easyicon.net/preview/121/1214124.gif" alt="">  
</div> 

而剪貼板的的內(nèi)容則存放在 DataTransferItemList 對(duì)象中，可以通過(guò) e.clipboardData.items 訪問(wèn)到：

細(xì)心的讀者會(huì)發(fā)現(xiàn)，如果直接在控制臺(tái)點(diǎn)開 DataTransferItemList 前的小箭頭，會(huì)發(fā)現(xiàn)對(duì)象的 length 屬性為0。說(shuō)好的剪貼板內(nèi)容呢？其實(shí)這是 Chrome 調(diào)試的一個(gè)小坑。在開發(fā)者工具里面，console.log 出來(lái)的對(duì)象是一個(gè)引用，會(huì)隨著原始數(shù)據(jù)的改變而改變。由于剪貼板的數(shù)據(jù)已經(jīng)被“粘貼”進(jìn)輸入框了，所以展開小箭頭以后看到的 DataTransferItemList 就變成空的了。為此，我們可以改用 console.table 來(lái)展示實(shí)時(shí)的結(jié)果。

在明白了剪貼板數(shù)據(jù)的存放位置以后，就可以編寫代碼來(lái)處理它們了。由于我們的富文本輸入框比較簡(jiǎn)單，所以只需要處理兩類數(shù)據(jù)即可，其一是普通的文本類型數(shù)據(jù)，包括 emoji 表情；其二則是圖片類型數(shù)據(jù)。

新建 paste.js 文件： 

const onPaste = (e) => {  
  // 如果剪貼板沒有數(shù)據(jù)則直接返回  
  if (!(e.clipboardData && e.clipboardData.items)) {  
    return  
  }  
  // 用Promise封裝便于將來(lái)使用  
  return new Promise((resolve, reject) => {  
    // 復(fù)制的內(nèi)容在剪貼板里位置不確定，所以通過(guò)遍歷來(lái)保證數(shù)據(jù)準(zhǔn)確  
    for (let i = 0, len = e.clipboardData.items.length; i < len; i++) {  
      const item = e.clipboardData.items[i]  
      // 文本格式內(nèi)容處理  
      if (item.kind === 'string') {  
        item.getAsString((str) => {  
          resolve(str)  
        })  
      // 圖片格式內(nèi)容處理  
      } else if (item.kind === 'file') {  
        const pasteFile = item.getAsFile()  
        // 處理pasteFile  
        // TODO(pasteFile)  
      } else {  
        reject(new Error('Not allow to paste this type!'))  
      }  
    }  
  })  
}  
export default onPaste 

然后就可以在 onPaste 事件里面直接使用了： 

document.querySelector('.editor').addEventListener('paste', async (e) => {  
    const result = await onPaste(e)  
    console.log(result)  
}) 

上面的代碼支持文本格式，接下來(lái)就要對(duì)圖片格式進(jìn)行處理了。玩過(guò) <input type="file"> 的同學(xué)會(huì)知道，包括圖片在內(nèi)的所有文件格式內(nèi)容都會(huì)儲(chǔ)存在 File 對(duì)象里面，這在剪貼板里面也是一樣的。于是我們可以編寫一套通用的函數(shù)，專門來(lái)讀取 File 對(duì)象里的圖片內(nèi)容，并把它轉(zhuǎn)化成 base64 字符串。

粘貼圖片

為了更好地在輸入框里展示圖片，必須限制圖片的大小，所以這個(gè)圖片處理函數(shù)不僅能夠讀取 File 對(duì)象里面的圖片，還能夠?qū)ζ溥M(jìn)行壓縮。

新建一個(gè) chooseImg.js 文件： 

/**  
 * 預(yù)覽函數(shù)  
 *  
 * @param {*} dataUrl base64字符串  
 * @param {*} cb 回調(diào)函數(shù)  
 */  
function toPreviewer (dataUrl, cb) {  
  cb && cb(dataUrl)  
}  
/**  
 * 圖片壓縮函數(shù)  
 *  
 * @param {*} img 圖片對(duì)象  
 * @param {*} fileType  圖片類型  
 * @param {*} maxWidth 圖片***寬度  
 * @returns base64字符串  
 */  
function compress (img, fileType, maxWidth) {  
  let canvas = document.createElement('canvas')  
  let ctx = canvas.getContext('2d')  
  const proportion = img.width / img.height  
  const width = maxWidth  
  const height = maxWidth / proportion  
  canvas.width = width  
  canvas.height = height  
  ctx.fillStyle = '#fff'  
  ctx.fillRect(0, 0, canvas.width, canvas.height)  
  ctx.drawImage(img, 0, 0, width, height)  
  const base64data = canvas.toDataURL(fileType, 0.75)  
  canvas = ctx = null  
  return base64data  
}  
/**  
 * 選擇圖片函數(shù)  
 *  
 * @param {*} e input.onchange事件對(duì)象  
 * @param {*} cb 回調(diào)函數(shù)  
 * @param {number} [maxsize=200 * 1024] 圖片***體積  
 */  
function chooseImg (e, cb, maxsize = 200 * 1024) {  
  const file = e.target.files[0]  
  if (!file || !/\/(?:jpeg|jpg|png)/i.test(file.type)) {  
    return  
  }  
  const reader = new FileReader()  
  reader.onload = function () {  
    const result = this.result  
    let img = new Image()  
    if (result.length <= maxsize) {  
      toPreviewer(result, cb)  
      return  
    }  
    img.onload = function () {  
      const compresscompressedDataUrl = compress(img, file.type, maxsize / 1024)  
      toPreviewer(compressedDataUrl, cb)  
      img = null  
    }   
    img.src = result  
  }  
  reader.readAsDataURL(file)  
}  
export default chooseImg 

關(guān)于使用 canvas 壓縮圖片和使用 FileReader 讀取文件的內(nèi)容在這里就不贅述了，感興趣的讀者可以自行查閱。

回到上一步的 paste.js 函數(shù)，把其中的 TODO() 改寫成 chooseImg() 即可： 

const imgEvent = {  
  target: {  
    files: [pasteFile]  
  }  
}  
chooseImg(imgEvent, (url) => {  
  resolve(url)  
}) 

回到瀏覽器，如果我們復(fù)制一張圖片并在輸入框中執(zhí)行粘貼的動(dòng)作，將可以在控制臺(tái)看到打印出了以 data:image/png;base64 開頭的圖片地址。

輸入框中插入內(nèi)容

經(jīng)過(guò)前面兩個(gè)步驟，我們后已經(jīng)可以讀取剪貼板中的文本內(nèi)容和圖片內(nèi)容了，接下來(lái)就是把它們正確的插入輸入框的光標(biāo)位置當(dāng)中。

對(duì)于插入內(nèi)容，我們可以直接通過(guò) document.execCommand 方法進(jìn)行。關(guān)于這個(gè)方法詳細(xì)用法可以在MDN文檔里面找到，在這里我們只需要使用 insertText 和 insertImage 即可。 

document.querySelector('.editor').addEventListener('paste', async (e) => {  
    const result = await onPaste(e)  
    const imgRegx = /^data:image\/png;base64,/  
    const command = imgRegx.test(result) ? 'insertImage': 'insertText'   
    document.execCommand(command, false, result)  
}) 

但是在某些版本的 Chrome 瀏覽器下，insertImage 方法可能會(huì)失效，這時(shí)候便可以采用另外一種方法，利用 Selection 來(lái)實(shí)現(xiàn)。而之后選擇并插入 emoji 的操作也會(huì)用到它，因此不妨先來(lái)了解一下。

當(dāng)我們?cè)诖a中調(diào)用 window.getSelection() 后會(huì)獲得一個(gè) Selection 對(duì)象。如果在頁(yè)面中選中一些文字，然后在控制臺(tái)執(zhí)行 window.getSelection().toString()，就會(huì)看到輸出是你所選擇的那部分文字。

與這部分區(qū)域文字相對(duì)應(yīng)的，是一個(gè) range 對(duì)象，使用 window.getSelection().getRangeAt(0) 即可以訪問(wèn)它。range 不僅包含了選中區(qū)域文字的內(nèi)容，還包括了區(qū)域的起點(diǎn)位置 startOffset 和終點(diǎn)位置 endOffset。

我們也可以通過(guò) document.createRange() 的辦法手動(dòng)創(chuàng)建一個(gè) range，往它里面寫入內(nèi)容并展示在輸入框中。

對(duì)于插入圖片來(lái)說(shuō)，要先從 window.getSelection() 獲取 range ，然后往里面插入圖片。 

document.querySelector('.editor').addEventListener('paste', async (e) => {  
  // 讀取剪貼板的內(nèi)容  
  const result = await onPaste(e)  
  const imgRegx = /^data:image\/png;base64,/  
  // 如果是圖片格式（base64），則通過(guò)構(gòu)造range的辦法把<img>標(biāo)簽插入正確的位置  
  // 如果是文本格式，則通過(guò)document.execCommand('insertText')方法把文本插入  
  if (imgRegx.test(result)) {  
    const sel = window.getSelection()  
    if (sel && sel.rangeCount === 1 && sel.isCollapsed) {  
      const range = sel.getRangeAt(0)  
      const img = new Image()  
      img.src = result  
      range.insertNode(img)  
      range.collapse(false)  
      sel.removeAllRanges()  
      sel.addRange(range)  
    }  
  } else {  
    document.execCommand('insertText', false, result)  
  }  
}) 

這種辦法也能很好地完成粘貼圖片的功能，并且通用性會(huì)更好。接下來(lái)我們還會(huì)利用 Selection，來(lái)完成 emoji 的插入。

插入 emoji

不管是粘貼文本也好，還是圖片也好，我們的輸入框始終是處于聚焦（focus）狀態(tài)。而當(dāng)我們從表情面板里選擇 emoji 表情的時(shí)候，輸入框會(huì)先失焦(blur），然后再重新聚焦。由于 document.execCommand 方法必須在輸入框聚焦?fàn)顟B(tài)下才能觸發(fā)，所以對(duì)于處理 emoji 插入來(lái)說(shuō)就無(wú)法使用了。

上一小節(jié)講過(guò)，Selection 可以讓我們拿到聚焦?fàn)顟B(tài)下所選文本的起點(diǎn)位置 startOffset 和終點(diǎn)位置 endOffset，如果沒有選擇文本而僅僅處于聚焦?fàn)顟B(tài)，那么這兩個(gè)位置的值相等（相當(dāng)于選擇文本為空），也就是光標(biāo)的位置。只要我們能夠在失焦前記錄下這個(gè)位置，那么就能夠通過(guò) range 把 emoji 插入正確的地方了。

首先編寫兩個(gè)工具方法。新建一個(gè) cursorPosition.js 文件： 

/**  
 * 獲取光標(biāo)位置  
 * @param {DOMElement} element 輸入框的dom節(jié)點(diǎn)  
 * @return {Number} 光標(biāo)位置  
 */  
export const getCursorPosition = (element) => {  
  let caretOffset = 0  
  const doc = element.ownerDocument || element.document  
  const win = doc.defaultView || doc.parentWindow  
  const sel = win.getSelection()  
  if (sel.rangeCount > 0) {  
    const range = win.getSelection().getRangeAt(0)  
    const preCaretRange = range.cloneRange()  
    preCaretRange.selectNodeContents(element)  
    preCaretRange.setEnd(range.endContainer, range.endOffset)  
    caretOffset = preCaretRange.toString().length  
  }  
  return caretOffset  
}  
/**  
 * 設(shè)置光標(biāo)位置  
 * @param {DOMElement} element 輸入框的dom節(jié)點(diǎn)  
 * @param {Number} cursorPosition 光標(biāo)位置的值  
 */  
export const setCursorPosition = (element, cursorPosition) => {  
  const range = document.createRange()  
  range.setStart(element.firstChild, cursorPosition)  
  range.setEnd(element.firstChild, cursorPosition)  
  const sel = window.getSelection()  
  sel.removeAllRanges()  
  sel.addRange(range)  
} 

有了這兩個(gè)方法以后，就可以放入 editor 節(jié)點(diǎn)里面使用了。首先在節(jié)點(diǎn)的 keyup 和 click 事件里記錄光標(biāo)位置： 

let cursorPosition = 0  
const editor = document.querySelector('.editor')  
editor.addEventListener('click', async (e) => {  
  cursorPosition = getCursorPosition(editor)  
})  
editor.addEventListener('keyup', async (e) => {  
  cursorPosition = getCursorPosition(editor)  
}) 

記錄下光標(biāo)位置后，便可通過(guò)調(diào)用 insertEmoji() 方法插入 emoji 字符了。 

insertEmoji (emoji) {  
  const text = editor.innerHTML  
  // 插入 emoji  
  editor.innerHTML = text.slice(0, cursorPosition) + emoji + text.slice(cursorPosition, text.length)  
  // 光標(biāo)位置后挪一位，以保證在剛插入的 emoji 后面  
  setCursorPosition(editor, this.cursorPosition + 1)  
  // 更新本地保存的光標(biāo)位置變量（注意 emoji 占兩個(gè)字節(jié)大小，所以要加1）  
  cursorPosition = getCursorPosition(editor) + 1 //  emoji 占兩位  
} 

尾聲

文章涉及的代碼已經(jīng)上傳到倉(cāng)庫(kù)，為了簡(jiǎn)便起見采用 VueJS 處理了一下，不影響閱讀。***想說(shuō)的是，這個(gè) Demo 僅僅完成了輸入框最基礎(chǔ)的部分，關(guān)于復(fù)制粘貼還有很多細(xì)節(jié)要處理（比如把別處的行內(nèi)樣式也復(fù)制了進(jìn)來(lái)等等），在這里就不一一展開了，感興趣的讀者可以自行研究，更歡迎和我留言交流~