|
|
@ -1,24 +1,11 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="chat-input-area"> |
|
|
<div class="chat-input-area"> |
|
|
<div :class="['edit-chat-container',isEmpty?'':'not-empty']" contenteditable="true" |
|
|
<div :class="['edit-chat-container',isEmpty?'':'not-empty']" contenteditable="true" @paste.prevent="onPaste" |
|
|
@paste.prevent="onPaste" |
|
|
@keydown="onKeydown" @compositionstart="compositionFlag=true" @compositionend="onCompositionEnd" |
|
|
@keydown="onKeydown" |
|
|
@input="onEditorInput" @mousedown="onMousedown" ref="content" @blur="onBlur"> |
|
|
@compositionstart="compositionFlag=true" |
|
|
|
|
|
@compositionend="compositionFlag=false;updateRange()" |
|
|
|
|
|
@input="onEditorInput" |
|
|
|
|
|
@mousedown="onMousedown" |
|
|
|
|
|
v-html="contentHtml" |
|
|
|
|
|
ref="content" |
|
|
|
|
|
@blur="onBlur" |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<chat-at-box @select="onAtSelect" |
|
|
<chat-at-box @select="onAtSelect" :search-text="atSearchText" ref="atBox" :ownerId="ownerId" |
|
|
:search-text="atSearchText" |
|
|
:members="groupMembers"></chat-at-box> |
|
|
ref="atBox" |
|
|
|
|
|
:ownerId="ownerId" |
|
|
|
|
|
:members="groupMembers" |
|
|
|
|
|
|
|
|
|
|
|
></chat-at-box> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -31,35 +18,29 @@ export default { |
|
|
props: { |
|
|
props: { |
|
|
ownerId: { |
|
|
ownerId: { |
|
|
type: Number, |
|
|
type: Number, |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
groupMembers: { |
|
|
groupMembers: { |
|
|
type: Array, |
|
|
type: Array, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
const defaultContentHtml = '<div></div>'; |
|
|
|
|
|
return { |
|
|
return { |
|
|
// contentList: [], |
|
|
|
|
|
// content: null, |
|
|
|
|
|
defaultContentHtml, |
|
|
|
|
|
contentHtml: defaultContentHtml + '', |
|
|
|
|
|
imageList: [], |
|
|
imageList: [], |
|
|
fileList: [], |
|
|
fileList: [], |
|
|
currentId: 0, |
|
|
currentId: 0, |
|
|
atSearchText: null, |
|
|
atSearchText: null, |
|
|
compositionFlag: false, |
|
|
compositionFlag: false, |
|
|
history: [defaultContentHtml], |
|
|
|
|
|
atIng: false, |
|
|
atIng: false, |
|
|
isEmpty: true, |
|
|
isEmpty: true, |
|
|
changeStored: true, |
|
|
changeStored: true, |
|
|
blurRange: null |
|
|
blurRange: null |
|
|
} |
|
|
} |
|
|
}, methods: { |
|
|
}, |
|
|
|
|
|
methods: { |
|
|
onPaste(e) { |
|
|
onPaste(e) { |
|
|
|
|
|
this.isEmpty = false; |
|
|
let txt = e.clipboardData.getData('Text') |
|
|
let txt = e.clipboardData.getData('Text') |
|
|
let range = window.getSelection().getRangeAt(0) |
|
|
let range = window.getSelection().getRangeAt(0) |
|
|
|
|
|
|
|
|
if (range.startContainer !== range.endContainer || range.startOffset !== range.endOffset) { |
|
|
if (range.startContainer !== range.endContainer || range.startOffset !== range.endOffset) { |
|
|
range.deleteContents(); |
|
|
range.deleteContents(); |
|
|
} |
|
|
} |
|
|
@ -67,6 +48,7 @@ export default { |
|
|
if (txt && typeof(txt) == 'string') { |
|
|
if (txt && typeof(txt) == 'string') { |
|
|
let textNode = document.createTextNode(txt); |
|
|
let textNode = document.createTextNode(txt); |
|
|
range.insertNode(textNode) |
|
|
range.insertNode(textNode) |
|
|
|
|
|
range.collapse(); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
let items = (e.clipboardData || window.clipboardData).items |
|
|
let items = (e.clipboardData || window.clipboardData).items |
|
|
@ -80,21 +62,15 @@ export default { |
|
|
url: URL.createObjectURL(file) |
|
|
url: URL.createObjectURL(file) |
|
|
}; |
|
|
}; |
|
|
this.imageList[imagePush.fileId] = (imagePush); |
|
|
this.imageList[imagePush.fileId] = (imagePush); |
|
|
|
|
|
let line = this.newLine(); |
|
|
let divElement = this.newLine(); |
|
|
|
|
|
let text = document.createTextNode('\u00A0'); |
|
|
|
|
|
divElement.appendChild(text); |
|
|
|
|
|
|
|
|
|
|
|
let imageElement = document.createElement('img'); |
|
|
let imageElement = document.createElement('img'); |
|
|
imageElement.className = 'chat-image no-text'; |
|
|
imageElement.className = 'chat-image no-text'; |
|
|
imageElement.src = imagePush.url; |
|
|
imageElement.src = imagePush.url; |
|
|
imageElement.dataset.imgId = imagePush.fileId; |
|
|
imageElement.dataset.imgId = imagePush.fileId; |
|
|
|
|
|
line.appendChild(imageElement); |
|
|
divElement.appendChild(imageElement); |
|
|
|
|
|
let after = document.createTextNode('\u00A0'); |
|
|
let after = document.createTextNode('\u00A0'); |
|
|
divElement.appendChild(after); |
|
|
line.appendChild(after); |
|
|
this.selectElement(after, 1); |
|
|
this.selectElement(after, 1); |
|
|
// range.insertNode(divElement); |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
let asFile = items[i].getAsFile(); |
|
|
let asFile = items[i].getAsFile(); |
|
|
if (!asFile) { |
|
|
if (!asFile) { |
|
|
@ -103,26 +79,20 @@ export default { |
|
|
let filePush = { fileId: this.generateId(), file: asFile }; |
|
|
let filePush = { fileId: this.generateId(), file: asFile }; |
|
|
this.fileList[filePush.fileId] = (filePush) |
|
|
this.fileList[filePush.fileId] = (filePush) |
|
|
let line = this.newLine(); |
|
|
let line = this.newLine(); |
|
|
let text = document.createTextNode('\u00A0'); |
|
|
|
|
|
line.appendChild(text); |
|
|
|
|
|
|
|
|
|
|
|
let fileElement = this.createFile(filePush); |
|
|
let fileElement = this.createFile(filePush); |
|
|
line.appendChild(fileElement); |
|
|
line.appendChild(fileElement); |
|
|
|
|
|
|
|
|
let after = document.createTextNode('\u00A0'); |
|
|
let after = document.createTextNode('\u00A0'); |
|
|
line.appendChild(after); |
|
|
line.appendChild(after); |
|
|
this.selectElement(after, 1); |
|
|
this.selectElement(after, 1); |
|
|
// fileElement.insertAdjacentHTML('afterend', '\u00A0'); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
range.collapse(); |
|
|
range.collapse(); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
selectElement(element, endOffset) { |
|
|
selectElement(element, endOffset) { |
|
|
let selection = window.getSelection(); |
|
|
let selection = window.getSelection(); |
|
|
// 插入元素可能不是立即执行的，vue可能会在插入元素后再更新dom |
|
|
// 插入元素可能不是立即执行的，vue可能会在插入元素后再更新dom |
|
|
setTimeout(() => { |
|
|
this.$nextTick(() => { |
|
|
let t1 = document.createRange(); |
|
|
let t1 = document.createRange(); |
|
|
t1.setStart(element, 0); |
|
|
t1.setStart(element, 0); |
|
|
t1.setEnd(element, endOffset || 0); |
|
|
t1.setEnd(element, endOffset || 0); |
|
|
@ -130,7 +100,6 @@ export default { |
|
|
t1.selectNodeContents(element.firstChild); |
|
|
t1.selectNodeContents(element.firstChild); |
|
|
} |
|
|
} |
|
|
t1.collapse(); |
|
|
t1.collapse(); |
|
|
|
|
|
|
|
|
selection.removeAllRanges(); |
|
|
selection.removeAllRanges(); |
|
|
selection.addRange(t1); |
|
|
selection.addRange(t1); |
|
|
// 需要时自动聚焦 |
|
|
// 需要时自动聚焦 |
|
|
@ -139,6 +108,10 @@ export default { |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
onCompositionEnd(e) { |
|
|
|
|
|
this.compositionFlag = false; |
|
|
|
|
|
this.onEditorInput(e); |
|
|
|
|
|
}, |
|
|
onKeydown(e) { |
|
|
onKeydown(e) { |
|
|
if (e.keyCode === 13) { |
|
|
if (e.keyCode === 13) { |
|
|
e.preventDefault(); |
|
|
e.preventDefault(); |
|
|
@ -148,10 +121,11 @@ export default { |
|
|
this.$refs.atBox.select(); |
|
|
this.$refs.atBox.select(); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (e.shiftKey) { |
|
|
if (e.ctrlKey) { |
|
|
let divElement = this.newLine(); |
|
|
let line = this.newLine(); |
|
|
|
|
|
let after = document.createTextNode('\u00A0'); |
|
|
this.selectElement(divElement); |
|
|
line.appendChild(after); |
|
|
|
|
|
this.selectElement(line.childNodes[0], 0); |
|
|
} else { |
|
|
} else { |
|
|
// 中文输入标记 |
|
|
// 中文输入标记 |
|
|
if (this.compositionFlag) { |
|
|
if (this.compositionFlag) { |
|
|
@ -161,42 +135,15 @@ export default { |
|
|
} |
|
|
} |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (e.keyCode === 90) { |
|
|
|
|
|
// Ctrl+Z，这里兼容mac的command+z |
|
|
|
|
|
if (e.ctrlKey || e.metaKey) { |
|
|
|
|
|
// 阻止默认的ctrl+z，浏览器的ctrl+z很low |
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
e.stopPropagation(); |
|
|
|
|
|
if (this.history.length <= 1) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
if (this.changeStored) { |
|
|
|
|
|
this.history.pop(); |
|
|
|
|
|
} |
|
|
|
|
|
let last = this.history.pop(); |
|
|
|
|
|
// console.log('回滚为：', last); |
|
|
|
|
|
this.contentHtml = last; |
|
|
|
|
|
if (this.history.length === 0) { |
|
|
|
|
|
// 保底 |
|
|
|
|
|
this.history.push(this.defaultContentHtml); |
|
|
|
|
|
} |
|
|
|
|
|
// 等待刷新dom |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
let t = this.$refs.content.lastElementChild.lastChild; |
|
|
|
|
|
if (!t || !t.textContent) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
this.selectElement(t, t.textContent.length); |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
// 删除键 |
|
|
// 删除键 |
|
|
if (e.keyCode === 8) { |
|
|
if (e.keyCode === 8) { |
|
|
|
|
|
console.log("delete") |
|
|
// 等待dom更新 |
|
|
// 等待dom更新 |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
let s = this.$refs.content.innerHTML.trim(); |
|
|
let s = this.$refs.content.innerHTML.trim(); |
|
|
// 空dom时，需要刷新dom |
|
|
// 空dom时，需要刷新dom |
|
|
if (s === '' || s === '<br>' || s === '<div><br></div>' || s === '<div><br/></div>') { |
|
|
console.log(s); |
|
|
|
|
|
if (s === '' || s === '<br>' || s === '<div> </div>' ) { |
|
|
// 拼接随机长度的空格，以刷新dom |
|
|
// 拼接随机长度的空格，以刷新dom |
|
|
this.empty(); |
|
|
this.empty(); |
|
|
this.isEmpty = true; |
|
|
this.isEmpty = true; |
|
|
@ -219,24 +166,27 @@ export default { |
|
|
this.$refs.atBox.moveDown(); |
|
|
this.$refs.atBox.moveDown(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
onAtSelect(member) { |
|
|
onAtSelect(member) { |
|
|
this.atIng = false; |
|
|
this.atIng = false; |
|
|
|
|
|
|
|
|
// 选中输入的 @xx 符 |
|
|
// 选中输入的 @xx 符 |
|
|
let blurRange = this.blurRange; |
|
|
let blurRange = this.blurRange; |
|
|
let startOffset = blurRange.endOffset - this.atSearchText.length - 1; |
|
|
let endContainer = blurRange.endContainer |
|
|
|
|
|
let startOffset = endContainer.data.indexOf("@"+this.atSearchText); |
|
|
|
|
|
let endOffset = startOffset + this.atSearchText.length + 1; |
|
|
blurRange.setStart(blurRange.endContainer, startOffset); |
|
|
blurRange.setStart(blurRange.endContainer, startOffset); |
|
|
|
|
|
blurRange.setEnd(blurRange.endContainer, endOffset); |
|
|
blurRange.deleteContents() |
|
|
blurRange.deleteContents() |
|
|
blurRange.collapse(); |
|
|
blurRange.collapse(); |
|
|
|
|
|
console.log("onAtSelect") |
|
|
this.focus(); |
|
|
this.focus(); |
|
|
// 创建元素节点 |
|
|
// 创建元素节点 |
|
|
let element = document.createElement('SPAN') |
|
|
let element = document.createElement('SPAN') |
|
|
element.className = "chat-at-user"; |
|
|
element.className = "chat-at-user"; |
|
|
element.dataset.id = member.userId; |
|
|
element.dataset.id = member.userId; |
|
|
element.contentEditable = 'false' |
|
|
element.contentEditable = 'false' |
|
|
element.innerText = `@${member.aliasName}` |
|
|
element.innerText = `@${member.showNickName}` |
|
|
blurRange.insertNode(element) |
|
|
blurRange.insertNode(element) |
|
|
// 光标移动到末尾 |
|
|
// 光标移动到末尾 |
|
|
blurRange.collapse() |
|
|
blurRange.collapse() |
|
|
@ -250,10 +200,8 @@ export default { |
|
|
this.selectElement(textNode, 1); |
|
|
this.selectElement(textNode, 1); |
|
|
}, |
|
|
}, |
|
|
onEditorInput(e) { |
|
|
onEditorInput(e) { |
|
|
// 加timeout是为了先响应compositionend事件 |
|
|
|
|
|
this.isEmpty = false; |
|
|
this.isEmpty = false; |
|
|
this.changeStored = false; |
|
|
this.changeStored = false; |
|
|
setTimeout(() => { |
|
|
|
|
|
if (this.$props.groupMembers && !this.compositionFlag) { |
|
|
if (this.$props.groupMembers && !this.compositionFlag) { |
|
|
let selection = window.getSelection() |
|
|
let selection = window.getSelection() |
|
|
let range = selection.getRangeAt(0); |
|
|
let range = selection.getRangeAt(0); |
|
|
@ -273,8 +221,7 @@ export default { |
|
|
this.$refs.atBox.close(); |
|
|
this.$refs.atBox.close(); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
// 打开选择弹窗 |
|
|
|
|
|
this.showAtBox(e) |
|
|
|
|
|
let endIndex = endOffset; |
|
|
let endIndex = endOffset; |
|
|
for (let i = endOffset; i < textContent.length; i++) { |
|
|
for (let i = endOffset; i < textContent.length; i++) { |
|
|
if (textContent[i] === ' ') { |
|
|
if (textContent[i] === ' ') { |
|
|
@ -283,11 +230,16 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
this.atSearchText = textContent.substring(startIndex + 1, endIndex).trim(); |
|
|
this.atSearchText = textContent.substring(startIndex + 1, endIndex).trim(); |
|
|
|
|
|
// 打开选择弹窗 |
|
|
|
|
|
if (this.atSearchText == '') { |
|
|
|
|
|
this.showAtBox(e) |
|
|
} |
|
|
} |
|
|
}) |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
onBlur(e) { |
|
|
onBlur(e) { |
|
|
this.updateRange(); |
|
|
this.updateRange(); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
onMousedown() { |
|
|
onMousedown() { |
|
|
if (this.atIng) { |
|
|
if (this.atIng) { |
|
|
@ -337,8 +289,7 @@ export default { |
|
|
container.appendChild(left); |
|
|
container.appendChild(left); |
|
|
|
|
|
|
|
|
let icon = document.createElement('div'); |
|
|
let icon = document.createElement('div'); |
|
|
icon.className = 'file-icon'; |
|
|
icon.className = 'el-icon-document'; |
|
|
icon.innerText = '?'; |
|
|
|
|
|
left.appendChild(icon); |
|
|
left.appendChild(icon); |
|
|
|
|
|
|
|
|
let right = document.createElement('div'); |
|
|
let right = document.createElement('div'); |
|
|
@ -376,24 +327,18 @@ export default { |
|
|
newLine() { |
|
|
newLine() { |
|
|
let selection = window.getSelection(); |
|
|
let selection = window.getSelection(); |
|
|
let range = selection.getRangeAt(0); |
|
|
let range = selection.getRangeAt(0); |
|
|
|
|
|
|
|
|
let divElement = document.createElement('div'); |
|
|
let divElement = document.createElement('div'); |
|
|
|
|
|
|
|
|
let endContainer = range.endContainer; |
|
|
let endContainer = range.endContainer; |
|
|
let parentElement = endContainer.parentElement; |
|
|
let parentElement = endContainer.parentElement; |
|
|
|
|
|
if (parentElement.parentElement === this.$refs.content) { |
|
|
let newText = endContainer.textContent.substring(range.endOffset).trim(); |
|
|
divElement.innerHTML = endContainer.textContent.substring(range.endOffset).trim(); |
|
|
endContainer.textContent = endContainer.textContent.substring(0, range.endOffset); |
|
|
endContainer.textContent = endContainer.textContent.substring(0, range.endOffset); |
|
|
divElement.innerHTML = newText || ''; |
|
|
|
|
|
|
|
|
|
|
|
// 有时候at完或者插入图片、文件后，可能parent可能直接是编辑器本身了，这里直接追加就可以了，可能有bug，但在所难免 |
|
|
|
|
|
if (parentElement === this.$refs.content) { |
|
|
|
|
|
this.$refs.content.append(divElement); |
|
|
|
|
|
} else { |
|
|
|
|
|
// 插入到当前div（当前行）后面 |
|
|
// 插入到当前div（当前行）后面 |
|
|
parentElement.insertAdjacentElement('afterend', divElement); |
|
|
parentElement.insertAdjacentElement('afterend', divElement); |
|
|
|
|
|
} else { |
|
|
|
|
|
divElement.innerHTML = ''; |
|
|
|
|
|
this.$refs.content.append(divElement); |
|
|
} |
|
|
} |
|
|
this.isEmpty = false; |
|
|
|
|
|
return divElement; |
|
|
return divElement; |
|
|
}, |
|
|
}, |
|
|
clear() { |
|
|
clear() { |
|
|
@ -402,12 +347,11 @@ export default { |
|
|
this.fileList = []; |
|
|
this.fileList = []; |
|
|
}, |
|
|
}, |
|
|
empty() { |
|
|
empty() { |
|
|
let emptyCount = Math.random() * 100 + 5; |
|
|
this.$refs.content.innerHTML = ""; |
|
|
let content = ''; |
|
|
let line = this.newLine(); |
|
|
for (let i = 0; i < emptyCount; i++) { |
|
|
let after = document.createTextNode('\u00A0'); |
|
|
content += ' '; |
|
|
line.appendChild(after); |
|
|
} |
|
|
this.$nextTick(()=>this.selectElement(after)); |
|
|
this.contentHtml = this.defaultContentHtml + content; |
|
|
|
|
|
}, |
|
|
}, |
|
|
showAtBox(e) { |
|
|
showAtBox(e) { |
|
|
this.atIng = true; |
|
|
this.atIng = true; |
|
|
@ -424,17 +368,21 @@ export default { |
|
|
// 记录光标所在位置 |
|
|
// 记录光标所在位置 |
|
|
this.updateRange(); |
|
|
this.updateRange(); |
|
|
}, |
|
|
}, |
|
|
|
|
|
html2Escape(strHtml) { |
|
|
|
|
|
return strHtml.replace(/[<>&"]/g, function(c) { |
|
|
|
|
|
return { |
|
|
|
|
|
'<': '<', |
|
|
|
|
|
'>': '>', |
|
|
|
|
|
'&': '&', |
|
|
|
|
|
'"': '"' |
|
|
|
|
|
} [c]; |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
submit() { |
|
|
submit() { |
|
|
// console.log(this.content) |
|
|
|
|
|
let nodes = this.$refs.content.childNodes; |
|
|
let nodes = this.$refs.content.childNodes; |
|
|
let textList = []; |
|
|
|
|
|
let imageList = []; |
|
|
|
|
|
let fileList = []; |
|
|
|
|
|
|
|
|
|
|
|
let fullList = []; |
|
|
let fullList = []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let tempText = ''; |
|
|
let tempText = ''; |
|
|
|
|
|
let atUserIds = []; |
|
|
let each = (nodes) => { |
|
|
let each = (nodes) => { |
|
|
for (let i = 0; i < nodes.length; i++) { |
|
|
for (let i = 0; i < nodes.length; i++) { |
|
|
let node = nodes[i]; |
|
|
let node = nodes[i]; |
|
|
@ -442,7 +390,7 @@ export default { |
|
|
continue; |
|
|
continue; |
|
|
} |
|
|
} |
|
|
if (node.nodeType === 3) { |
|
|
if (node.nodeType === 3) { |
|
|
tempText += node.textContent; |
|
|
tempText += this.html2Escape(node.textContent); |
|
|
continue; |
|
|
continue; |
|
|
} |
|
|
} |
|
|
let nodeName = node.nodeName.toLowerCase(); |
|
|
let nodeName = node.nodeName.toLowerCase(); |
|
|
@ -456,16 +404,16 @@ export default { |
|
|
if (text) { |
|
|
if (text) { |
|
|
fullList.push({ |
|
|
fullList.push({ |
|
|
type: 'text', |
|
|
type: 'text', |
|
|
content: text |
|
|
content: text, |
|
|
|
|
|
atUserIds: atUserIds |
|
|
}) |
|
|
}) |
|
|
|
|
|
tempText = ''; |
|
|
|
|
|
atUserIds = [] |
|
|
} |
|
|
} |
|
|
fullList.push({ |
|
|
fullList.push({ |
|
|
type: 'image', |
|
|
type: 'image', |
|
|
content: this.imageList[imgId] |
|
|
content: this.imageList[imgId] |
|
|
}) |
|
|
}) |
|
|
imageList.push(this.imageList[imgId]); |
|
|
|
|
|
textList.push(text); |
|
|
|
|
|
tempText = ''; |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
let emojiCode = node.dataset.emojiCode; |
|
|
let emojiCode = node.dataset.emojiCode; |
|
|
tempText += emojiCode; |
|
|
tempText += emojiCode; |
|
|
@ -477,33 +425,27 @@ export default { |
|
|
if (text) { |
|
|
if (text) { |
|
|
fullList.push({ |
|
|
fullList.push({ |
|
|
type: 'text', |
|
|
type: 'text', |
|
|
content: text |
|
|
content: text, |
|
|
|
|
|
atUserIds: atUserIds |
|
|
}) |
|
|
}) |
|
|
|
|
|
tempText = ''; |
|
|
|
|
|
atUserIds = [] |
|
|
} |
|
|
} |
|
|
fullList.push({ |
|
|
fullList.push({ |
|
|
type: 'file', |
|
|
type: 'file', |
|
|
content: this.fileList[fileId] |
|
|
content: this.fileList[fileId] |
|
|
}) |
|
|
}) |
|
|
fileList.push(this.fileList[fileId]); |
|
|
|
|
|
textList.push(text); |
|
|
|
|
|
tempText = ''; |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
tempText += '\n'; |
|
|
tempText += '\n'; |
|
|
each(node.childNodes); |
|
|
each(node.childNodes); |
|
|
} |
|
|
} |
|
|
} else if (nodeName === 'span') { |
|
|
} else if (nodeName === 'span') { |
|
|
let userId = node.dataset.id; |
|
|
if(node.dataset.id){ |
|
|
if (userId !== null && userId !== undefined) { |
|
|
tempText += node.innerHTML; |
|
|
tempText += node.outerHTML; |
|
|
atUserIds.push(node.dataset.id) |
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
console.warn('未处理的标签'); |
|
|
|
|
|
if (getComputedStyle(node).display === 'block') { |
|
|
|
|
|
tempText += '\n'; |
|
|
|
|
|
}else { |
|
|
}else { |
|
|
tempText += ' '; |
|
|
tempText += node.outerHtml; |
|
|
} |
|
|
} |
|
|
each(node.childNodes); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -512,38 +454,16 @@ export default { |
|
|
if (text !== '') { |
|
|
if (text !== '') { |
|
|
fullList.push({ |
|
|
fullList.push({ |
|
|
type: 'text', |
|
|
type: 'text', |
|
|
content: text |
|
|
content: text, |
|
|
|
|
|
atUserIds: atUserIds |
|
|
}) |
|
|
}) |
|
|
textList.push(text); |
|
|
|
|
|
} |
|
|
} |
|
|
// console.log(textList, imageList, fileList) |
|
|
this.$emit('submit', fullList); |
|
|
|
|
|
|
|
|
this.$emit('submit', fullList, textList, imageList, fileList); |
|
|
|
|
|
}, |
|
|
}, |
|
|
focus() { |
|
|
focus() { |
|
|
this.$refs.content.focus(); |
|
|
this.$refs.content.focus(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
mounted() { |
|
|
|
|
|
// console.log(this.$props.groupMembers) |
|
|
|
|
|
// this.$refs.content.firstElementChild.focus(); |
|
|
|
|
|
this.selectElement(this.$refs.content.firstElementChild); |
|
|
|
|
|
setInterval(() => { |
|
|
|
|
|
if (!this.$refs.content) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
// 输入中文时不记录 |
|
|
|
|
|
if (this.compositionFlag) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
let last = this.history[this.history.length - 1]; |
|
|
|
|
|
let newContent = this.$refs.content.innerHTML; |
|
|
|
|
|
if (last !== newContent) { |
|
|
|
|
|
this.history.push(newContent); |
|
|
|
|
|
} |
|
|
|
|
|
this.changeStored = true; |
|
|
|
|
|
}, 1000); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
@ -555,8 +475,6 @@ export default { |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
|
|
|
.edit-chat-container { |
|
|
.edit-chat-container { |
|
|
//width: 100%; |
|
|
|
|
|
//height: 100%; |
|
|
|
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
top: 0; |
|
|
left: 0; |
|
|
left: 0; |
|
|
@ -564,16 +482,11 @@ export default { |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
border: 1px solid #c3c3c3; |
|
|
border: 1px solid #c3c3c3; |
|
|
outline: none; |
|
|
outline: none; |
|
|
padding: 10px 0; |
|
|
padding: 5px; |
|
|
line-height: 30px; |
|
|
line-height: 30px; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
text-align: left; |
|
|
text-align: left; |
|
|
|
|
|
overflow-y: scroll; |
|
|
> div { |
|
|
|
|
|
padding-left: 10px; |
|
|
|
|
|
//width: 1px; |
|
|
|
|
|
min-height: 30px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 单独一行时，无法在前面输入的bug |
|
|
// 单独一行时，无法在前面输入的bug |
|
|
>div:before { |
|
|
>div:before { |
|
|
@ -585,11 +498,11 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chat-image { |
|
|
.chat-image { |
|
|
|
|
|
display: block; |
|
|
max-width: 200px; |
|
|
max-width: 200px; |
|
|
max-height: 100px; |
|
|
max-height: 100px; |
|
|
border: 1px solid #e6e6e6; |
|
|
border: 1px solid #e6e6e6; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
//margin-left: 10px; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chat-emoji { |
|
|
.chat-emoji { |
|
|
@ -600,63 +513,56 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chat-file-container { |
|
|
.chat-file-container { |
|
|
width: 200px; |
|
|
max-width: 65%; |
|
|
//height: 100px; |
|
|
padding: 10px; |
|
|
padding: 5px 7px; |
|
|
border: 2px solid #587ff0; |
|
|
border: 1px solid #4cd964; |
|
|
|
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
background: #eeeC; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
|
|
|
.file-position-left { |
|
|
.file-position-left { |
|
|
width: 30%; |
|
|
display: flex; |
|
|
flex: 1; |
|
|
width: 80px; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.file-icon { |
|
|
.el-icon-document { |
|
|
width: 30px; |
|
|
font-size: 40px; |
|
|
height: 30px; |
|
|
|
|
|
text-align: center; |
|
|
text-align: center; |
|
|
justify-content: center; |
|
|
color: #d42e07; |
|
|
align-items: center; |
|
|
|
|
|
vertical-align: center; |
|
|
|
|
|
border: 1px solid #e6e6e6; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.file-position-right { |
|
|
.file-position-right { |
|
|
width: 70%; |
|
|
flex: 1; |
|
|
flex: 3; |
|
|
|
|
|
|
|
|
|
|
|
.file-name { |
|
|
.file-name { |
|
|
font-size: 14px; |
|
|
font-size: 16px; |
|
|
color: #333; |
|
|
font-weight: 600; |
|
|
|
|
|
color: #66b1ff; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.file-size { |
|
|
.file-size { |
|
|
font-size: 12px; |
|
|
font-size: 14px; |
|
|
color: #666; |
|
|
font-weight: 600; |
|
|
|
|
|
color: black; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chat-at-user { |
|
|
.chat-at-user { |
|
|
background-color: #4cd964; |
|
|
color: #00f; |
|
|
padding: 2px 5px; |
|
|
font-weight: 600; |
|
|
color: white; |
|
|
|
|
|
//border: 1px solid #c3c3c3; |
|
|
|
|
|
border-radius: 3px; |
|
|
border-radius: 3px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.edit-chat-container > div:nth-of-type(1):empty:after { |
|
|
.edit-chat-container>div:nth-of-type(1):after { |
|
|
content: '请输入消息（按Shift+Enter键换行）'; |
|
|
content: '请输入消息（按Ctrl+Enter键换行）'; |
|
|
color: gray; |
|
|
color: gray; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.edit-chat-container > div:nth-of-type(1):focus:after { |
|
|
|
|
|
content: none; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.edit-chat-container.not-empty>div:nth-of-type(1):after { |
|
|
.edit-chat-container.not-empty>div:nth-of-type(1):after { |
|
|
content: none; |
|
|
content: none; |
|
|
} |
|
|
} |
|
|
|
xsx
2 years ago