<template>
|
<div>
|
<el-container class="editor-container">
|
<el-header class="no-padding toolbar" height="35px">
|
<ul>
|
<li v-popover:popoverEmoticon>
|
<i class="iconfont icon-icon_im_face" style="font-size: 15px" />
|
<p class="tip-title">表情符号</p>
|
</li>
|
<!-- <li @click="codeBlock.isShow = true">
|
<i class="iconfont icon-daima" />
|
<p class="tip-title">代码片段</p>
|
</li>
|
<li @click="recorder = true">
|
<i class="el-icon-headset" />
|
<p class="tip-title">语音消息</p>
|
</li> -->
|
<!-- #TODO 发图片功能暂时隐藏 此处会涉及到token过期 -->
|
<!-- <li @click="$refs.restFile.click()">
|
<i class="el-icon-picture-outline-round" />
|
<p class="tip-title">图片</p>
|
</li> -->
|
<!-- <li @click="$refs.restFile2.click()">
|
<i class="el-icon-folder" />
|
<p class="tip-title">附件</p>
|
</li>
|
<li @click="filesManager.isShow = true">
|
<i class="el-icon-folder-opened" />
|
<p class="tip-title">上传管理</p>
|
</li>
|
<li v-show="isGroupTalk" @click="vote.isShow = true">
|
<i class="el-icon-s-data" />
|
<p class="tip-title">发起投票</p>
|
</li> -->
|
|
<!-- <p class="text-tips no-select">-->
|
<!-- <span>按Enter发送 / Shift+Enter 换行</span>-->
|
<!-- <el-popover placement="top-end" width="600" trigger="click">-->
|
<!-- <div class="editor-books">-->
|
<!-- <div class="books-title">编辑说明:</div>-->
|
<!-- <p>-->
|
<!-- 1.-->
|
<!-- 支持上传QQ及微信截图，在QQ或微信中截图后使用Ctrl+v上传图片。-->
|
<!-- </p>-->
|
<!-- <p>-->
|
<!-- 2.-->
|
<!-- 支持浏览器及Word文档中的图片复制上传、复制后使用Ctrl+v上传图片。-->
|
<!-- </p>-->
|
<!-- <p>3. 支持图片拖拽上传。</p>-->
|
<!-- <p>4. 支持文件上传 ( 文件小于100M ) 。</p>-->
|
<!-- <p>5. 按Enter发送 / Shift+Enter 换行。</p>-->
|
<!-- <p>-->
|
<!-- 6.-->
|
<!-- 注意：当文件正在上传时，请勿关闭网页或离开当前对话框，否则将导致文件停止上传或上传失败。-->
|
<!-- </p>-->
|
<!-- </div>-->
|
<!-- <i class="el-icon-info" slot="reference" />-->
|
<!-- </el-popover>-->
|
<!-- </p>-->
|
</ul>
|
|
<el-popover ref="popoverEmoticon" placement="top-start" trigger="click" width="300"
|
popper-class="no-padding el-popover-em">
|
<MeEditorEmoticon ref="editorEmoticon" @selected="selecteEmoticon" />
|
</el-popover>
|
|
<form enctype="multipart/form-data" style="display: none" ref="fileFrom">
|
<input type="file" ref="restFile" accept="image/*" @change="uploadImageChange" />
|
<input type="file" ref="restFile2" @change="uploadFileChange" />
|
</form>
|
</el-header>
|
<el-main class="no-padding textarea">
|
<textarea ref="textarea" v-paste="pasteImage" v-drag="dragPasteImage" v-model.trim="editorText" rows="6"
|
placeholder="你想要的聊点什么呢 ..." @keydown="keydownEvent($event)" @input="inputEvent($event)" />
|
</el-main>
|
</el-container>
|
|
<!-- 图片查看器 -->
|
<MeEditorImageView ref="imageViewer" v-model="imageViewer.isShow" :file="imageViewer.file"
|
@confirm="confirmUploadImage" />
|
|
<MeEditorRecorder v-if="recorder" @close="recorder = false" />
|
|
<!-- 代码块编辑器 -->
|
<TalkCodeBlock v-if="codeBlock.isShow" :edit-mode="codeBlock.editMode" @close="codeBlock.isShow = false"
|
@confirm="confirmCodeBlock" />
|
|
<!-- 文件上传管理器 -->
|
<MeEditorFileManage ref="filesManager" v-model="filesManager.isShow" />
|
|
<MeEditorVote v-if="vote.isShow" @close="
|
() => {
|
this.vote.isShow = false;
|
}
|
" />
|
</div>
|
</template>
|
|
<script>
|
import MeEditorEmoticon from "./MeEditorEmoticon";
|
import MeEditorFileManage from "./MeEditorFileManage";
|
import MeEditorImageView from "./MeEditorImageView";
|
import MeEditorRecorder from "./MeEditorRecorder";
|
import MeEditorVote from "./MeEditorVote";
|
import TalkCodeBlock from "@/components/chat/TalkCodeBlock";
|
import { getPasteImgs, getDragPasteImg } from "@/utils/editor";
|
import { findTalk } from "@/utils/talk";
|
|
import {
|
ServeSendTalkCodeBlock,
|
ServeSendTalkImage,
|
ServeSendEmoticon,
|
} from "@/api/chat";
|
|
export default {
|
name: "MeEditor",
|
components: {
|
MeEditorEmoticon,
|
MeEditorFileManage,
|
MeEditorImageView,
|
TalkCodeBlock,
|
MeEditorRecorder,
|
MeEditorVote,
|
},
|
computed: {
|
talkUser () {
|
return this.$store.state.dialogue.index_name;
|
},
|
isGroupTalk () {
|
return this.$store.state.dialogue.talk_type == 2;
|
},
|
},
|
watch: {
|
talkUser (n_index_name) {
|
this.$refs.filesManager.clear();
|
this.editorText = this.getDraftText(n_index_name);
|
},
|
},
|
data () {
|
return {
|
// 当前编辑的内容
|
editorText: "",
|
|
// 图片查看器相关信息
|
imageViewer: {
|
isShow: false,
|
file: null,
|
},
|
|
codeBlock: {
|
isShow: false,
|
editMode: true,
|
},
|
|
filesManager: {
|
isShow: false,
|
},
|
|
vote: {
|
isShow: false,
|
},
|
|
// 录音器
|
recorder: false,
|
|
// 上次发送消息的时间
|
sendtime: 0,
|
|
// 发送间隔时间（默认1秒）
|
interval: 1000,
|
};
|
},
|
methods: {
|
// 读取对话编辑草稿信息 并赋值给当前富文本
|
getDraftText (index_name) {
|
return findTalk(index_name)?.draft_text || "";
|
},
|
|
//复制粘贴图片回调方法
|
pasteImage (e) {
|
let files = getPasteImgs(e);
|
if (files.length == 0) return;
|
|
this.openImageViewer(files[0]);
|
},
|
|
//拖拽上传图片回调方法
|
dragPasteImage (e) {
|
let files = getDragPasteImg(e);
|
if (files.length == 0) return;
|
|
this.openImageViewer(files[0]);
|
},
|
|
inputEvent (e) {
|
this.$emit("keyboard-event", e.target.value);
|
},
|
|
// 键盘按下监听事件
|
keydownEvent (e) {
|
if (e.keyCode == 13 && this.editorText == "") {
|
e.preventDefault();
|
}
|
|
// 回车发送消息
|
if (e.keyCode == 13 && e.shiftKey == false && this.editorText != "") {
|
let currentTime = new Date().getTime();
|
|
if (this.sendtime > 0) {
|
// 判断 1秒内只能发送一条消息
|
if (currentTime - this.sendtime < this.interval) {
|
e.preventDefault();
|
return false;
|
}
|
}
|
|
this.$emit("send", this.editorText);
|
this.editorText = "";
|
this.sendtime = currentTime;
|
e.preventDefault();
|
}
|
},
|
|
// 选择图片文件后回调方法
|
uploadImageChange (e) {
|
this.openImageViewer(e.target.files[0]);
|
this.$refs.restFile.value = null;
|
},
|
|
// 选择文件回调事件
|
uploadFileChange (e) {
|
let maxsize = 100 * 1024 * 1024;
|
if (e.target.files.length == 0) {
|
return false;
|
}
|
|
let file = e.target.files[0];
|
if (/\.(gif|jpg|jpeg|png|webp|GIF|JPG|PNG|WEBP)$/.test(file.name)) {
|
this.openImageViewer(file);
|
return;
|
}
|
|
if (file.size > maxsize) {
|
this.$notify.info({
|
title: "消息",
|
message: "上传文件不能大于100M",
|
});
|
return;
|
}
|
|
this.filesManager.isShow = true;
|
this.$refs.restFile2.value = null;
|
this.$refs.filesManager.upload(file);
|
},
|
|
// 打开图片查看器
|
openImageViewer (file) {
|
this.imageViewer.isShow = true;
|
this.imageViewer.file = file;
|
},
|
|
// 代码块编辑器确认完成回调事件
|
confirmCodeBlock (data) {
|
const { talk_type, receiver_id } = this.$store.state.dialogue;
|
ServeSendTalkCodeBlock({
|
talk_type,
|
receiver_id,
|
code: data.code,
|
lang: data.language,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.codeBlock.isShow = false;
|
} else {
|
this.$notify({
|
title: "友情提示",
|
message: res.message,
|
type: "warning",
|
});
|
}
|
});
|
},
|
|
// 确认上传图片消息回调事件
|
confirmUploadImage () {
|
let fileData = new FormData();
|
fileData.append("file", this.imageViewer.file);
|
|
let ref = this.$refs.imageViewer;
|
|
ServeSendTalkImage(fileData)
|
.then((res) => {
|
ref.loading = false;
|
if (res.code == 200) {
|
ref.closeBox();
|
} else {
|
this.$notify({
|
title: "友情提示",
|
message: res.message,
|
type: "warning",
|
});
|
}
|
})
|
.finally(() => {
|
ref.loading = false;
|
});
|
},
|
|
// 选中表情包回调事件
|
selecteEmoticon (data) {
|
if (data.type == 1) {
|
let value = this.editorText;
|
let el = this.$refs.textarea;
|
let startPos = el.selectionStart;
|
let endPos = el.selectionEnd;
|
let newValue =
|
value.substring(0, startPos) +
|
data.value +
|
value.substring(endPos, value.length);
|
|
this.editorText = newValue;
|
|
if (el.setSelectionRange) {
|
setTimeout(() => {
|
let index = startPos + data.value.length;
|
el.setSelectionRange(index, index);
|
el.focus();
|
}, 0);
|
}
|
} else {
|
const { talk_type, receiver_id } = this.$store.state.dialogue;
|
ServeSendEmoticon({
|
talk_type,
|
receiver_id,
|
emoticon_id: data.value,
|
});
|
}
|
|
this.$refs.popoverEmoticon.doClose();
|
},
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
.editor-container {
|
height: 160px;
|
width: 100%;
|
background-color: white;
|
}
|
|
.editor-container .toolbar {
|
line-height: 35px;
|
border-bottom: 1px solid #f5f0f0;
|
border-top: 1px solid #f5f0f0;
|
}
|
|
.editor-container .toolbar li {
|
list-style: none;
|
float: left;
|
width: 35px;
|
margin-left: 3px;
|
cursor: pointer;
|
text-align: center;
|
line-height: 35px;
|
position: relative;
|
color: #8d8d8d;
|
}
|
|
.editor-container .toolbar li .tip-title {
|
display: none;
|
position: absolute;
|
top: 38px;
|
left: 0px;
|
height: 26px;
|
line-height: 26px;
|
background-color: rgba(31, 35, 41, 0.9);
|
color: white;
|
min-width: 30px;
|
font-size: 10px;
|
padding: 0 5px;
|
border-radius: 2px;
|
white-space: pre;
|
text-align: center;
|
user-select: none;
|
z-index: 1;
|
}
|
|
.editor-container .toolbar li:hover .tip-title {
|
display: block;
|
}
|
|
.editor-container .toolbar li:hover {
|
background-color: #f7f5f5;
|
}
|
|
.editor-container .toolbar .text-tips {
|
float: right;
|
margin-right: 15px;
|
font-size: 12px;
|
color: #ccc;
|
}
|
|
.editor-container .toolbar .text-tips i {
|
font-size: 14px;
|
cursor: pointer;
|
margin-left: 5px;
|
color: rgb(255, 181, 111);
|
}
|
|
.editor-container .textarea {
|
overflow: hidden;
|
position: relative;
|
}
|
|
textarea {
|
width: calc(100% - 10px);
|
width: -moz-calc(100% - 10px);
|
width: -webkit-calc(100% - 10px);
|
height: calc(100% - 10px);
|
height: -moz-calc(100% - 10px);
|
height: -webkit-calc(100% - 10px);
|
border: 0 none;
|
outline: none;
|
resize: none;
|
font-size: 15px;
|
overflow-y: auto;
|
color: #464545;
|
padding: 5px;
|
position: relative;
|
}
|
|
textarea::-webkit-scrollbar {
|
width: 4px;
|
height: 1px;
|
}
|
|
textarea::-webkit-scrollbar-thumb {
|
background: #d5cfcf;
|
}
|
|
textarea::-webkit-scrollbar-track {
|
background: #ededed;
|
}
|
|
textarea::-webkit-input-placeholder {
|
color: #dccdcd;
|
font-size: 12px;
|
font-weight: 400;
|
}
|
|
/* 编辑器文档说明 --- start */
|
.editor-books .books-title {
|
font-size: 16px;
|
height: 30px;
|
line-height: 22px;
|
margin-top: 10px;
|
margin-bottom: 10px;
|
border-bottom: 1px solid #cbcbcb;
|
color: #726f6f;
|
font-weight: 400;
|
margin-left: 11px;
|
}
|
|
.editor-books p {
|
text-indent: 10px;
|
font-size: 12px;
|
height: 30px;
|
line-height: 30px;
|
color: #7f7c7c;
|
}
|
|
/* 编辑器文档说明 --- end */
|
</style>
|
