<template>
<div id="app">
<at :members="members" name-key="name" v-model="html">
<!--<template slot="item" scope="s">
<span v-text="s.item.name"></span>
</template>-->
<template slot="embeddedItem" slot-scope="s">
<a target="_blank" :href="s.current.avatar" class="tag">@{{ s.current.name }}</a>
</template>
<template slot="item" slot-scope="s">
<span v-text="s.item.name"></span>
</template>
<div class="editor" contenteditable></div>
</at>
<br/>
</div>
</template>
<script>
import At from './At.vue'
let members = ["小明", "小花", "小浩", "小剛", "小龍", "小木", "小二"];
members = members.map((v, i) => {
return {
avatar: 'https://weibo.com',
name: v
}
})
export default {
components: {
At
},
name: 'app',
data() {
return {
members,
html: `<div>深度學習模型訓練的過程本質是對weight（即引數W）進行更新，這需要每個引數有相應的初始值。</div><div>對一些簡單的機器學習模型，或當optimization function是convex function時. </div>`
}
}
}
</script>
<style>
* {
padding: 0px;
margin: 0px;
border: 0px;
}
li {
list-style: none;
}
ul,
ol {
list-style-type: none;
}
select,
input,
img,
select {
vertical-align: middle;
}
img {
border: none;
display: inline-block
}
i {
font-style: normal
}
a {
text-decoration: none;
-webkit-appearance: none;
}
#app{
margin-top: 300px;
}
.editor {
width: 400px;
height: 200px;
overflow: auto;
white-space: pre-wrap;
border: solid 1px rgba(0, 0, 0, .5);
}
</style>
複製程式碼<template>
<div ref="wrap" class="atwho-wrap" @input="handleInput()" @keydown="handleKeyDown">
<div v-if="atwho" class="atwho-panel" :style="style">
<div class="atwho-inner">
<div class="atwho-view">
<ul class="atwho-ul">
<li v-for="(item, index) in atwho.list" class="atwho-li" :key="index" :class="isCur(index) && 'atwho-cur'" :ref="isCur(index) && 'cur'" :data-index="index" @mouseenter="handleItemHover" @click="handleItemClick">
<slot name="item" :item="item">
<span v-text="itemName(item)"></span>
</slot>
</li>
<li>群成員</li>
</ul>
</div>
</div>
</div>
<span v-show="false" ref="embeddedItem">
<slot name="embeddedItem" :current="currentItem"></slot>
</span>
<slot></slot>
</div>
</template>
<script>
import {
closest,
getOffset,
getPrecedingRange,
getRange,
applyRange,
scrollIntoView,
getAtAndIndex
} from './util'
export default {
props: {
value: {
type: String,
default: null
},
at: {
type: String,
default: null
},
ats: {
type: Array,
default: () => ['@']
},
suffix: { //插入字元連結
type: String,
default: ' '
},
loop: {
type: Boolean,
default: true
},
allowSpaces: {
type: Boolean,
default: true
},
tabSelect: {
type: Boolean,
default: false
},
avoidEmail: {
type: Boolean,
default: true
},
hoverSelect: {
type: Boolean,
default: true
},
members: {
type: Array,
default: () => []
},
nameKey: {
type: String,
default: ''
},
filterMatch: {
type: Function,
default: (name, chunk, at) => {
return name.toLowerCase()
.indexOf(chunk.toLowerCase()) > -1
}
},
deleteMatch: {
type: Function,
default: (name, chunk, suffix) => {
return chunk === name + suffix
}
},
scrollRef: {
type: String,
default: ''
}
},
data() {
return {
bindsValue: this.value != null,
customsEmbedded: false,
atwho: null
}
},
computed: {
atItems() {
return this.at ? [this.at] : this.ats
},
currentItem() {
if(this.atwho) {
return this.atwho.list[this.atwho.cur];
}
return '';
},
style() {
if(this.atwho) {
const {
list,
cur,
x,
y
} = this.atwho
const {
wrap
} = this.$refs
if(wrap) {
const offset = getOffset(wrap)
const scrollLeft = this.scrollRef ? document.querySelector(this.scrollRef).scrollLeft : 0
const scrollTop = this.scrollRef ? document.querySelector(this.scrollRef).scrollTop : 0
const left = x + scrollLeft + window.pageXOffset - offset.left + 'px'
const top = y + scrollTop + window.pageYOffset - offset.top + [this.members.length+2]*27+ 'px'
return {
left,
top
}
}
}
return null
}
},
watch: {
'atwho.cur' (index) {
if(index != null) { // cur index exists
this.$nextTick(() => {
this.scrollToCur()
})
}
},
members() {
this.handleInput(true)
},
value(value, oldValue) {
if(this.bindsValue) {
this.handleValueUpdate(value)
}
}
},
mounted() {
if(this.$scopedSlots.embeddedItem) {
this.customsEmbedded = true
}
if(this.bindsValue) {
this.handleValueUpdate(this.value)
}
},
methods: {
itemName(v) {
const {
nameKey
} = this
return nameKey ? v[nameKey] : v
},
isCur(index) {
return index === this.atwho.cur
},
handleValueUpdate(value) {
const el = this.$el.querySelector('[contenteditable]')
if(value !== el.innerHTML) {
el.innerHTML = value
}
},
handleItemHover(e) {
if(this.hoverSelect) {
this.selectByMouse(e)
}
},
handleItemClick(e) {
this.selectByMouse(e)
this.insertItem()
},
handleDelete(e) {
const range = getPrecedingRange()
if(range) {
if(this.customsEmbedded && range.endOffset >= 1) {
let a = range.endContainer.childNodes[range.endOffset] ||
range.endContainer.childNodes[range.endOffset - 1]
if(!a || a.nodeType === Node.TEXT_NODE && !/^\s?$/.test(a.data)) {
return
} else if(a.nodeType === Node.TEXT_NODE) {
if(a.previousSibling) a = a.previousSibling
} else {
if(a.previousElementSibling) a = a.previousElementSibling
}
let ch = [].slice.call(a.childNodes)
ch = [].reverse.call(ch)
ch.unshift(a)
let last;
[].some.call(ch, c => {
if(c.getAttribute && c.getAttribute('data-at-embedded') != null) {
last = c
return true
}
})
if(last) {
e.preventDefault()
e.stopPropagation()
const r = getRange()
if(r) {
r.setStartBefore(last)
r.deleteContents()
applyRange(r)
this.handleInput()
}
}
return
}
const {
atItems,
members,
suffix,
deleteMatch,
itemName
} = this
const text = range.toString()
const {
at,
index
} = getAtAndIndex(text, atItems)
if(index > -1) {
const chunk = text.slice(index + at.length)
const has = members.some(v => {
const name = itemName(v)
return deleteMatch(name, chunk, suffix)
})
if(has) {
e.preventDefault()
e.stopPropagation()
const r = getRange()
if(r) {
r.setStart(r.endContainer, index)
r.deleteContents()
applyRange(r)
this.handleInput()
}
}
}
}
},
handleKeyDown(e) {
const {
atwho
} = this
if(atwho) {
if(e.keyCode === 38 || e.keyCode === 40) { // ↑/↓
if(!(e.metaKey || e.ctrlKey)) {
e.preventDefault()
e.stopPropagation()
this.selectByKeyboard(e)
}
return
}
if(e.keyCode === 13 || (this.tabSelect && e.keyCode === 9)) { // enter or tab
this.insertItem()
e.preventDefault()
e.stopPropagation()
return
}
if(e.keyCode === 27) { // esc
this.closePanel()
return
}
}
// 為了相容ie ie9~11 editable無input事件 只能靠keydown觸發 textarea正常
// 另 ie9 textarea的delete不觸發input
const isValid = e.keyCode >= 48 && e.keyCode <= 90 || e.keyCode === 8
if(isValid) {
setTimeout(() => {
this.handleInput()
}, 50)
}
if(e.keyCode === 8) { //刪除
this.handleDelete(e)
}
},
handleInput(keep) {
const el = this.$el.querySelector('[contenteditable]')
this.$emit('input', el.innerHTML)
const range = getPrecedingRange()
if(range) {
const {
atItems,
avoidEmail,
allowSpaces
} = this
let show = true
const text = range.toString()
const {
at,
index
} = getAtAndIndex(text, atItems)
if(index < 0) show = false
const prev = text[index - 1]
const chunk = text.slice(index + at.length, text.length)
if(avoidEmail) {
// 上一個字元不能為字母數字 避免與郵箱衝突
// 微信則是避免 所有字母數字及半形符號
if(/^[a-z0-9]$/i.test(prev)) show = false
}
if(!allowSpaces && /\s/.test(chunk)) {
show = false
}
// chunk以空白字元開頭不匹配 避免`@ `也匹配
if(/^\s/.test(chunk)) show = false
if(!show) {
this.closePanel()
} else {
const {
members,
filterMatch,
itemName
} = this
if(!keep && chunk) { // fixme: should be consistent with AtTextarea.vue
this.$emit('at', chunk)
console.log('at',chunk);
}
const matched = members.filter(v => {
const name = itemName(v)
return filterMatch(name, chunk, at)
})
if(matched.length) {
this.openPanel(matched, range, index, at)
} else {
this.closePanel()
}
}
}
},
closePanel() {
if(this.atwho) {
this.atwho = null
}
},
openPanel(list, range, offset, at) {
const fn = () => {
const r = range.cloneRange()
r.setStart(r.endContainer, offset + at.length) // 從@後第一位開始
// todo: 根據視窗空間 判斷向上或是向下展開
const rect = r.getClientRects()[0]
this.atwho = {
range,
offset,
list,
x: rect.left,
y: rect.top - 4,
cur: 0 // todo: 儘可能記錄
}
}
if(this.atwho) {
fn()
} else { // 焦點超出了顯示區域 需要提供延時以移動指標 再計算位置
setTimeout(fn, 10)
}
},
scrollToCur() {
const curEl = this.$refs.cur[0]
const scrollParent = curEl.parentElement.parentElement
scrollIntoView(curEl, scrollParent)
},
selectByMouse(e) {
const el = closest(e.target, d => {
return d.getAttribute('data-index')
})
const cur = +el.getAttribute('data-index')
this.atwho = {
...this.atwho,
cur
}
},
selectByKeyboard(e) {
const offset = e.keyCode === 38 ? -1 : 1
const {
cur,
list
} = this.atwho
const nextCur = this.loop ?
(cur + offset + list.length) % list.length :
Math.max(0, Math.min(cur + offset, list.length - 1))
this.atwho = {
...this.atwho,
cur: nextCur
}
},
// todo: 抽離成庫並測試
insertText(text, r) {
r.deleteContents()
const node = r.endContainer
if(node.nodeType === Node.TEXT_NODE) {
const cut = r.endOffset
node.data = node.data.slice(0, cut) +
text + node.data.slice(cut)
r.setEnd(node, cut + text.length)
} else {
const t = document.createTextNode(text)
r.insertNode(t)
r.setEndAfter(t)
}
r.collapse(false) // 引數在IE下必傳
applyRange(r)
},
insertHtml(html, r) {
r.deleteContents()
const node = r.endContainer
var newElement = document.createElement('span')
newElement.appendChild(document.createTextNode(' '))
newElement.appendChild(this.htmlToElement(html))
newElement.appendChild(document.createTextNode(' '))
newElement.setAttribute('data-at-embedded', '')
newElement.setAttribute("contenteditable", false)
if(node.nodeType === Node.TEXT_NODE) {
const cut = r.endOffset
var secondPart = node.splitText(cut);
node.parentNode.insertBefore(newElement, secondPart);
r.setEndBefore(secondPart)
} else {
const t = document.createTextNode(suffix)
r.insertNode(newElement)
r.setEndAfter(newElement)
r.insertNode(t)
r.setEndAfter(t)
}
r.collapse(false) // 引數在IE下必傳
applyRange(r)
},
insertItem() {
const {
range,
offset,
list,
cur
} = this.atwho
const {
suffix,
atItems,
itemName,
customsEmbedded
} = this
const r = range.cloneRange()
const text = range.toString()
const {
at,
index
} = getAtAndIndex(text, atItems)
const start = customsEmbedded ? index : index + at.length
r.setStart(r.endContainer, start)
// hack: 連續兩次 可以確保click後 focus回來 range真正生效
applyRange(r)
applyRange(r)
const curItem = list[cur]
if(customsEmbedded) {
const html = this.$refs.embeddedItem.innerHTML
this.insertHtml(html, r);
} else {
const t = itemName(curItem) + suffix
this.insertText(t, r);
}
this.$emit('insert', curItem)
console.log('insert', curItem);
this.handleInput()
},
htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
}
}
</script>
<style lang="less" scoped="scoped">
.atwho-wrap {
position: relative;
.atwho-panel {
position: absolute;
.atwho-inner {
position: relative;
}
}
.atwho-view {
color: black;
z-index: 11110 !important;
border-radius: 6px;
box-shadow: 0 0 10px 0 rgba(101, 111, 122, .5);
position: absolute;
bottom: 0;
left: -0.8em;
cursor: default;
background-color: rgba(255, 255, 255, .94);
width: 170px;
max-height: 312px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 11px;
height: 11px;
}
&::-webkit-scrollbar-track {
background-color: #F5F5F5;
}
&::-webkit-scrollbar-thumb {
min-height: 36px;
border: 2px solid transparent;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
background-clip: padding-box;
border-radius: 7px;
background-color: #C4C4C4;
}
}
.atwho-ul {
list-style: none;
padding: 0;
margin: 0;
li {
display: block;
box-sizing: border-box;
height: 27px;
padding: 0 12px;
white-space: nowrap;
display: flex;
align-items: center;
padding: 0 4px;
padding-left: 8px;
&.atwho-cur {
background: #5BB8FF;
color: white;
}
span {
overflow: hidden;
text-overflow: ellipsis;
}
img {
height: 100%;
width: auto;
-webkit-transform: scale(.8);
}
}
}
}
</style>
複製程式碼
export function scrollIntoView(el, scrollParent) {
if(el.scrollIntoViewIfNeeded) {
el.scrollIntoViewIfNeeded(false) // alignToCenter=false
} else {
const diff = el.offsetTop - scrollParent.scrollTop
if(diff < 0 || diff > scrollParent.offsetHeight - el.offsetHeight) {
scrollParent = scrollParent || el.parentElement
scrollParent.scrollTop = el.offsetTop
}
}
}
export function applyRange(range) {
const selection = window.getSelection()
if(selection) { // 容錯
selection.removeAllRanges()
selection.addRange(range)
}
}
export function getRange() {
const selection = window.getSelection()
if(selection && selection.rangeCount > 0) {
return selection.getRangeAt(0)
}
}
export function getAtAndIndex(text, ats) {
return ats.map((at) => {
return {
at,
index: text.lastIndexOf(at)
}
}).reduce((a, b) => {
return a.index > b.index ? a : b
})
}
export function getOffset(element, target) {
target = target || window
var offset = {
top: element.offsetTop,
left: element.offsetLeft
},
parent = element.offsetParent;
while(parent != null && parent != target) {
offset.left += parent.offsetLeft;
offset.top += parent.offsetTop;
parent = parent.offsetParent;
}
return offset;
}
export function closest(el, predicate) {
do
if(predicate(el)) return el;
while (el = el && el.parentNode);
}
// http://stackoverflow.com/questions/15157435/get-last-character-before-caret-position-in-javascript
// 修復 "空格+表情+空格+@" range報錯 應設(endContainer, 0)
// stackoverflow上的這段程式碼有bug
export function getPrecedingRange() {
const r = getRange()
if(r) {
const range = r.cloneRange()
range.collapse(true)
range.setStart(range.endContainer, 0)
return range
}
}
複製程式碼
轉自Web聊天工具的富文字輸入框
最近折騰 Websocket，打算開發一個聊天室應用練練手。在應用開發的過程中發現可以插入 emoji ，貼上圖片的富文字輸入框其實蘊含著許多有趣的知識，於是便打算記錄下來和大家分享。
倉庫地址：chat-input-box
預覽地址：codepen
首先來看看 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 來展示實時的結果。
新建 paste.js 檔案：
const onPaste = (e) => {
// 如果剪貼簿沒有資料則直接返回if (!(e.clipboardData && e.clipboardData.items)) {
return
}
// 用Promise封裝便於將來使用returnnewPromise((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)
})
// 圖片格式內容處理
} elseif (item.kind === 'file') {
const pasteFile = item.getAsFile()
// 處理pasteFile// TODO(pasteFile)
} else {
reject(newError('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 回撥函式
*/functiontoPreviewer (dataUrl, cb) {
cb && cb(dataUrl)
}
/**
* 圖片壓縮函式
*
* @param {*} img 圖片物件
* @param {*} fileType 圖片型別
* @param {*} maxWidth 圖片最大寬度
* @returns base64字串
*/functioncompress (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 = nullreturn base64data
}
/**
* 選擇圖片函式
*
* @param {*} e input.onchange事件物件
* @param {*} cb 回撥函式
* @param {number} [maxsize=200 * 1024] 圖片最大體積
*/functionchooseImg (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)
}
exportdefault 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 = 0const 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 僅僅完成了輸入框最基礎的部分，關於複製貼上還有很多細節要處理（比如把別處的行內樣式也複製了進來等等），在這裡就不一一展開了，感興趣的讀者可以自行研究，更歡迎和我留言交流~