Web聊天工具的富文字輸入框
最近折騰 Websocket,打算開發一個聊天室應用練練手。在應用開發的過程中發現可以插入 emoji ,貼上圖片的富文字輸入框其實蘊含著許多有趣的知識,於是便打算記錄下來和大家分享。
倉庫地址: chat-input-box
預覽地址: https://codepen.io/jrainlau/p...
首先來看看 demo 效果:
是不是覺得很神奇?接下來我會一步步講解這裡面的功能都是如何實現的。
輸入框富文字化
傳統的輸入框都是使用 <textarea>
來製作的,它的優勢是非常簡單,但最大的缺陷卻是無法展示圖片。為了能夠讓輸入框能夠展示圖片(富文字化),我們可以採用設定了 contenteditable="true"
屬性的 <div>
來實現這裡面的功能。
簡單建立一個 index.html
檔案,然後寫入如下內容:
<div class="editor" contenteditable="true"> <img src="https://static.easyicon.net/preview/121/1214124.gif" alt=""> </div>
開啟瀏覽器,就能看到一個預設已經帶了一張圖片的輸入框:
游標可以在圖片前後移動,同時也可以輸入內容,甚至通過退格鍵刪除這張圖片——換句話說,圖片也是可編輯內容的一部分,也意味著輸入框的富文字化已經體現出來了。
接下來的任務,就是思考如何直接通過 control + v
把圖片貼上進去了。
處理貼上事件
任何通過“複製”或者 control + c
所複製的內容(包括螢幕截圖)都會儲存在剪貼簿,在貼上的時候可以在輸入框的 onpaste
事件裡面監聽到。
document.querySelector('.editor').addEventListener('paste', (e) => { console.log(e.clipboardData.items) })
而剪貼簿的的內容則存放在 DataTransferItemList
物件中,可以通過 e.clipboardData.items
訪問到:
細心的讀者會發現,如果直接在控制檯點開 DataTransferItemList
前的小箭頭,會發現物件的 length
屬性為0。說好的剪貼簿內容呢?其實這是 Chrome 除錯的一個小坑。在開發者工具裡面, console.log
出來的物件是一個引用,會隨著原始資料的改變而改變。由於剪貼簿的資料已經被“貼上”進輸入框了,所以展開小箭頭以後看到的 DataTransferItemList
就變成空的了。為此,我們可以改用 console.table
來展示實時的結果。
在明白了剪貼簿資料的存放位置以後,就可以編寫程式碼來處理它們了。由於我們的富文字輸入框比較簡單,所以只需要處理兩類資料即可,其一是普通的文字型別資料,包括 emoji 表情;其二則是圖片型別資料。
新建 paste.js
檔案:
const onPaste = (e) => { // 如果剪貼簿沒有資料則直接返回 if (!(e.clipboardData && e.clipboardData.items)) { return } // 用Promise封裝便於將來使用 return new Promise((resolve, reject) => { // 複製的內容在剪貼簿裡位置不確定,所以通過遍歷來保證資料準確 for (let i = 0, len = e.clipboardData.items.length; i < len; i++) { const item = e.clipboardData.items[i] // 文字格式內容處理 if (item.kind === 'string') { item.getAsString((str) => { resolve(str) }) // 圖片格式內容處理 } 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) })
上面的程式碼支援文字格式,接下來就要對圖片格式進行處理了。玩過 <input type="file">
的同學會知道,包括圖片在內的所有檔案格式內容都會儲存在 File
物件裡面,這在剪貼簿裡面也是一樣的。於是我們可以編寫一套通用的函式,專門來讀取 File
物件裡的圖片內容,並把它轉化成 base64
字串。
貼上圖片
為了更好地在輸入框裡展示圖片,必須限制圖片的大小,所以這個圖片處理函式不僅能夠讀取 File
物件裡面的圖片,還能夠對其進行壓縮。
新建一個 chooseImg.js
檔案:
/** * 預覽函式 * * @param {*} dataUrl base64字串 * @param {*} cb 回撥函式 */ function toPreviewer (dataUrl, cb) { cb && cb(dataUrl) } /** * 圖片壓縮函式 * * @param {*} img 圖片物件 * @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 } /** * 選擇圖片函式 * * @param {*} e input.onchange事件物件 * @param {*} cb 回撥函式 * @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 compressedDataUrl = compress(img, file.type, maxsize / 1024) toPreviewer(compressedDataUrl, cb) img = null } img.src = result } reader.readAsDataURL(file) } export default chooseImg
關於使用 canvas
壓縮圖片和使用 FileReader
讀取檔案的內容在這裡就不贅述了,感興趣的讀者可以自行查閱。
回到上一步的 paste.js
函式,把其中的 TODO()
改寫成 chooseImg()
即可:
const imgEvent = { target: { files: [pasteFile] } } chooseImg(imgEvent, (url) => { resolve(url) })
回到瀏覽器,如果我們複製一張圖片並在輸入框中執行貼上的動作,將可以在控制檯看到打印出了以 data:image/png;base64
開頭的圖片地址。
輸入框中插入內容
經過前面兩個步驟,我們後已經可以讀取剪貼簿中的文字內容和圖片內容了,接下來就是把它們正確的插入輸入框的游標位置當中。
對於插入內容,我們可以直接通過 document.execCommand
方法進行。關於這個方法詳細用法可以在 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
方法可能會失效,這時候便可以採用另外一種方法,利用 Selection
來實現。而之後選擇並插入 emoji 的操作也會用到它,因此不妨先來了解一下。
當我們在程式碼中呼叫 window.getSelection()
後會獲得一個 Selection
物件。如果在頁面中選中一些文字,然後在控制檯執行 window.getSelection().toString()
,就會看到輸出是你所選擇的那部分文字。
與這部分割槽域文字相對應的,是一個 range
物件,使用 window.getSelection().getRangeAt(0)
即可以訪問它。 range
不僅包含了選中區域文字的內容,還包括了區域的起點位置 startOffset
和終點位置 endOffset
。
我們也可以通過 document.createRange()
的辦法手動建立一個 range
,往它裡面寫入內容並展示在輸入框中。
對於插入圖片來說,要先從 window.getSelection()
獲取 range
,然後往裡面插入圖片。
document.querySelector('.editor').addEventListener('paste', async (e) => { // 讀取剪貼簿的內容 const result = await onPaste(e) const imgRegx = /^data:image\/png;base64,/ // 如果是圖片格式(base64),則通過構造range的辦法把<img>標籤插入正確的位置 // 如果是文字格式,則通過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) } })
這種辦法也能很好地完成貼上圖片的功能,並且通用性會更好。接下來我們還會利用 Selection
,來完成 emoji 的插入。
插入 emoji
不管是貼上文字也好,還是圖片也好,我們的輸入框始終是處於聚焦(focus)狀態。而當我們從表情面板裡選擇 emoji 表情的時候,輸入框會先失焦(blur),然後再重新聚焦。由於 document.execCommand
方法必須在輸入框聚焦狀態下才能觸發,所以對於處理 emoji 插入來說就無法使用了。
上一小節講過, Selection
可以讓我們拿到聚焦狀態下所選文字的起點位置 startOffset
和終點位置 endOffset
,如果沒有選擇文字而僅僅處於聚焦狀態,那麼這兩個位置的值相等(相當於選擇文字為空),也就是游標的位置。只要我們能夠在失焦前記錄下這個位置,那麼就能夠通過 range
把 emoji 插入正確的地方了。
首先編寫兩個工具方法。新建一個 cursorPosition.js
檔案:
/** * 獲取游標位置 * @param {DOMElement} element 輸入框的dom節點 * @return {Number} 游標位置 */ 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 } /** * 設定游標位置 * @param {DOMElement} element 輸入框的dom節點 * @param {Number} cursorPosition 游標位置的值 */ 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) }
有了這兩個方法以後,就可以放入 editor 節點裡面使用了。首先在節點的 keyup
和 click
事件裡記錄游標位置:
let cursorPosition = 0 const editor = document.querySelector('.editor') editor.addEventListener('click', async (e) => { cursorPosition = getCursorPosition(editor) }) editor.addEventListener('keyup', async (e) => { cursorPosition = getCursorPosition(editor) })
記錄下游標位置後,便可通過呼叫 insertEmoji()
方法插入 emoji 字元了。
insertEmoji (emoji) { const text = editor.innerHTML // 插入 emoji editor.innerHTML = text.slice(0, cursorPosition) + emoji + text.slice(cursorPosition, text.length) // 游標位置後挪一位,以保證在剛插入的 emoji 後面 setCursorPosition(editor, this.cursorPosition + 1) // 更新本地儲存的游標位置變數(注意 emoji 佔兩個位元組大小,所以要加1) cursorPosition = getCursorPosition(editor) + 1 //emoji 佔兩位 }
尾聲
文章涉及的程式碼已經上傳到 倉庫 ,為了簡便起見採用 VueJS
處理了一下,不影響閱讀。最後想說的是,這個 Demo 僅僅完成了輸入框最基礎的部分,關於複製貼上還有很多細節要處理(比如把別處的行內樣式也複製了進來等等),在這裡就不一一展開了,感興趣的讀者可以自行研究,更歡迎和我留言交流~