留言板表情包

package.json

@@ -29,6 +29,7 @@
 		"path-to-regexp": "2.4.0",
 		"qrcode.vue": "^1.6.2",
 		"qs": "^6.9.3",
+		"quill-emoji": "^0.1.8",
 		"quill-image-extend-module": "^1.1.2",
 		"recordrtc": "^5.5.9",
 		"script-loader": "^0.7.2",

src/components/QuillEditor/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="className">
     <quill-editor
       ref="editor"
       v-model="content"
@@ -16,8 +16,11 @@
 <script>
 import { quillEditor, Quill } from 'vue-quill-editor';
 import 'quill/dist/quill.snow.css';
+import QuillEmoji from 'quill-emoji';
+import 'quill-emoji/dist/quill-emoji.css';
 import { ImageExtend, QuillWatch} from 'quill-image-extend-module';
 Quill.register('modules/ImageExtend', ImageExtend);
+Quill.register('modules/quillEmoji', QuillEmoji);
 export default {
     components: {
         quillEditor
@@ -39,13 +42,17 @@ export default {
             type: Number,
             default: 80
         },
-        unloadImg: {
-            type: Boolean,
-            default: false
-        },
         noHandleP: {
             type: Boolean,
             defalut: false
+        },
+        editorType: {
+            type: String,
+            default: 'default'
+        },
+        className: {
+            type: String,
+            default: 'commonClass'
         }
     },
     data() {
@@ -59,7 +66,10 @@ export default {
         },
         options() {
             const that = this;
-            return this.unloadImg ? {
+            let optionValue = {};
+            switch (this.editorType) {
+            case 'imgEmoji':
+                optionValue = {
                     modules: {
                         ImageExtend: {
                             loading: true,
@@ -72,6 +82,8 @@ export default {
                             error: () => { that.$message.error('图片上传失败，请检查网络状态'); },
                             sizeError: () => { that.$message.error('图片上传失败，图片大小限制3MB'); } // 图片超过大小的回调
                         },
+                        'emoji-toolbar': true,
+                        'emoji-shortname': true,
                         toolbar: {
                             container: [
                                 ['bold', 'italic', 'underline', 'strike'],
@@ -86,7 +98,7 @@ export default {
                                 [{'font': []}],
                                 [{'align': []}],
                                 ['clean'],
-                            ['image']
+                                ['image', 'emoji']
                             ],
                             handlers: {
                                 'image': function () {
@@ -96,7 +108,22 @@ export default {
                         }
                     },
                     placeholder: '请输入'
-            } : {
+                };
+                break;
+            case 'onlyEmoji':
+                optionValue = {
+                    modules: {
+                        'emoji-toolbar': true,
+                        'emoji-shortname': true,
+                        toolbar: {
+                            container: [['emoji']]
+                        }
+                    },
+                    placeholder: this.placeholder
+                };
+                break;
+            case 'default':
+                optionValue = {
                     modules: {
                         toolbar: [
                             ['bold', 'italic', 'underline', 'strike'],
@@ -114,6 +141,9 @@ export default {
                         ]
                     }
                 };
+                break;
+            }
+            return optionValue;
         },
         titleConfig () {
             return {
@@ -173,7 +203,29 @@ export default {
         },
         getFocus() {
             this.$refs.editor.quill.focus();
+        },
+        getText() {
+            return this.$refs.editor.quill.getText();
+        },
+        setContents(val) {
+            this.$refs.editor.quill.setContents(val);
         }
     }
 };
 </script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.answer_input{
+		/deep/ .ql-toolbar.ql-snow{
+			padding: 0;
+			border: 0;
+			border-top: 1px solid #c0c0c0;
+			height: 0;
+			text-align: left;
+			.ql-emoji{
+				position: relative;
+				left: -30px;
+			}
+		}
+	}
+
+</style>

src/scripts/ProjectConfig.js

@@ -447,7 +447,3 @@ export const ProjectList = [
     {value: 'bjd', label: '北交大'},
     {value: 'urtss', label: '陪标项目'}
 ];
-export const ProjectPostIdMap = {
-    drts: 1,
-    bjd: 2
-};

src/views/newMap/displayNew/demon/messageBoard.vue

@@ -29,7 +29,7 @@
                 <template v-for="(elem,j) in allCommentList">
                   <div :key="j" style="font-size: 14px;margin-top: 10px;">
                     <span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
-                    <span style="margin-right: 15px;">{{ elem.content }}</span>
+                    <span style="margin-right: 15px;" v-html="$escapeHTML(`${elem.content}`)" />
                     <span style="margin-right: 10px;">{{ elem.commentTime }}</span>
                     <span style="color:#409EFF;cursor: pointer;margin-right: 10px;" @click="replyLeaveMessage(item.id, i,elem.id, elem.userNickname)">回复</span>
                     <span v-if="userId == elem.userId || superAdmin" style="color:#409EFF;cursor: pointer;" type="text" @click="deleteComment(item.id, i, elem.id)">删除</span>
@@ -40,7 +40,7 @@
                 <template v-for="(elem,j) in item.comments.list">
                   <div :key="j" style="font-size: 14px;margin-top: 18px;">
                     <span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
-                    <span style="margin-right: 15px;">{{ elem.content }}</span>
+                    <span style="margin-right: 15px;" v-html="$escapeHTML(`${elem.content}`)" />
                     <span style="margin-right: 10px;">{{ elem.commentTime }}</span>
                     <span style="color:#409EFF;cursor: pointer;margin-right: 10px;" @click="replyLeaveMessage(item.id, i,elem.id, elem.userNickname)">回复</span>
                     <span v-if="userId == elem.userId || superAdmin" style="color:#409EFF;cursor: pointer;" type="text" @click="deleteComment(item.id, i, elem.id)">删除</span>
@@ -52,8 +52,18 @@
               </div>
             </div>
             <div v-if="replyMessageId == item.id" style="width: 80%;margin-left: 10%;text-align: center;">
-              <el-input :id="'answerInput' + item.id" v-model="commentContent" type="textarea" placeholder="请输入内容" maxlength="300" style="margin-top: 10px;" :autosize="{ minRows: 2, maxRows: 4}" show-word-limit @input="changeCommentContent" />
+              <quill-editor
-              <div style="margin-top: 10px;">
+                :ref="'answerInput' + item.id"
+                v-model="commentContent"
+                style="width: 80%;margin-left: 10%;margin-top: 10px;"
+                class-name="answer_input"
+                :margin-bottom="20"
+                editor-type="onlyEmoji"
+                :no-handle-p="true"
+                :height="100"
+                :placeholder="replyUserName"
+              />
+              <div>
                 <el-button type="danger" size="small" @click="commentMessage">回复</el-button>
                 <el-button size="small" @click="cancelComment">取消</el-button>
               </div>
@@ -74,11 +84,10 @@
         />
       </div>
     </el-card>
-    <quill-editor ref="quillEditor" v-model="content" style="width: 80%;margin-left: 10%;" placeholder="请输入内容" :margin-bottom="20" :unload-img="true" :no-handle-p="true" />
+    <quill-editor ref="quillEditor" v-model="content" style="width: 80%;margin-left: 10%;" :margin-bottom="20" editor-type="imgEmoji" :no-handle-p="true" />
     <span id="boardBottom" class="dialog-footer">
       <el-button @click="handleClear">清空</el-button>
       <el-button type="danger" @click="commitComment">留言</el-button>
-      <!--<el-button type="danger" @click="dialogVisible = false">返回</el-button>-->
     </span>
     <el-button size="mini" type="danger" style="position: fixed; right: 100px;top: 80px;width: 90px;" @click="goSlide">我要留言</el-button>
     <el-button size="mini" style="position: fixed; right: 100px;top: 120px;width: 90px;" @click="dialogVisible = false">退出留言板</el-button>
@@ -89,7 +98,8 @@
 </template>
 
 <script>
-import { answerPost, queryMessagePagingByProjectCode, deleteMessageByAdmin, deleteMessageBySelf, commentLevelMessage, commentComents, queryMessageCommentList, deleteCommentByAdmin, deleteCommentBySelf, getPostByProjectCode } from '@/api/learn';
+import { answerPost, queryMessagePagingByProjectCode, deleteMessageByAdmin, deleteMessageBySelf, commentLevelMessage, commentComents,
+    queryMessageCommentList, deleteCommentByAdmin, deleteCommentBySelf, getPostByProjectCode } from '@/api/learn';
 import lick_icon from '@/assets/like.png';
 import unlike_icon from '@/assets/unlike.png';
 import reply_icon from '@/assets/reply.png';
@@ -119,7 +129,6 @@ export default {
             allCommentList: [],
             moreMessageId: '',
             replyUserName: '',
-            commentContentNoName: '',
             postId: ''
         };
     },
@@ -159,19 +168,20 @@ export default {
         },
         commitComment() {
             const images = this.content.match(/<img/g);
+            const answerContent = this.handleEmojiContent(this.content);
             if (images && images.length > 3) {
                 this.$message.error('留言内容使用图片应小于三张！');
                 return;
             }
-            if (this.content.length > 1000) {
+            if (answerContent.length > 1000) {
                 this.$message.error('留言内容超出最大长度！');
                 return;
             }
-            if (!this.content) {
+            if (!answerContent) {
                 this.$message.error('留言内容不能为空！');
                 return;
             }
-            answerPost({postId: this.postId, content: this.content}).then(resp => {
+            answerPost({postId: this.postId, content: answerContent}).then(resp => {
                 this.pageNum = 1;
                 this.handleCurrentChange();
                 this.content = '';
@@ -184,13 +194,25 @@ export default {
             queryMessagePagingByProjectCode(this.projectCode, {pageSize: this.pageSize, pageNum: this.pageNum}).then(resp => {
                 this.postCommentList = [];
                 (resp.data.list || []).forEach(item => {
-                    const value = item.content.replace(/<img/g, '<img style="width: 100px;height: auto;cursor: zoom-in;" onclick="handleZoomImg()"');
+                    item.content = this.replaceEmoji(item.content);
-                    item.content = value;
+                    item.comments && item.comments.list && item.comments.list.forEach(elem => {
+                        elem.content = this.replaceEmoji(elem.content);
+                    });
                     this.postCommentList.push(item);
                 });
                 this.total = resp.data.total;
             });
         },
+        replaceEmoji(content) {
+            let value = content.replace(/<img/g, '<img style="width: 100px;height: auto;cursor: zoom-in;" onclick="handleZoomImg()"');
+            const list = value.match(/<<<([^>]*)>>>/g);
+            (list || []).forEach(elem => {
+                const targetValue = elem.substring(3, elem.length - 3);
+                value = value.replace(elem, `<span class="ql-emojiblot" data-name="${targetValue}"><span contenteditable="false"><span class="ap ap-${targetValue}">ss</span></span></span>`);
+            });
+            console.log(content, list, list);
+            return value;
+        },
         goSlide() {
             const bottom = document.getElementById('boardBottom');
             const element = document.getElementById('elDialog').childNodes[0];
@@ -219,10 +241,10 @@ export default {
             this.replyMessageIndex = messageIndex;
             if (commentId) {
                 this.replyUserName = '@' + userNickname + ' ';
-                this.commentContent = this.replyUserName + this.commentContentNoName;
+                this.commentContent = '';
             }
             this.$nextTick(()=>{
-                document.getElementById('answerInput' + messageId).focus();
+                this.$refs['answerInput' + messageId][0].getFocus();
             });
         },
         cancelComment() {
@@ -231,38 +253,47 @@ export default {
             this.replyCommentId = '';
             this.replyMessageIndex = '';
             this.replyUserName = '';
-            this.commentContentNoName = '';
         },
         commentMessage() {
+            const contentValue = this.handleEmojiContent(this.commentContent);
+            if (contentValue.length > 300) {
+                this.$message.error('回复内容超出最大长度！');
+                return;
+            }
             if (this.replyCommentId) {
-                commentComents(this.replyMessageId, this.replyCommentId, {content:this.commentContentNoName}).then(resp => {
+                commentComents(this.replyMessageId, this.replyCommentId, {content:contentValue}).then(resp => {
                     this.getCommentList(this.replyMessageId, this.replyMessageIndex);
                     this.cancelComment();
                 }).catch(error => {
-                    this.$message.error('评论留言失败！');
+                    this.$message.error('评论回复失败！');
                     console.error(error);
                 });
             } else {
-                commentLevelMessage(this.replyMessageId, {content:this.commentContentNoName}).then(resp => {
+                commentLevelMessage(this.replyMessageId, {content:contentValue}).then(resp => {
                     this.getCommentList(this.replyMessageId, this.replyMessageIndex);
                     this.cancelComment();
                 }).catch(error => {
-                    this.$message.error('评论留言失败！');
+                    this.$message.error('评论回复失败！');
                     console.error(error);
                 });
             }
         },
         getCommentList(messageId, messageIndex) {
             queryMessageCommentList(messageId).then(resp => {
+                const replaceValue = [];
+                resp.data && resp.data.forEach(item => {
+                    item.content = this.replaceEmoji(item.content);
+                    replaceValue.push(item);
+                });
                 if (this.moreMessageId == messageId) {
-                    this.allCommentList = resp.data;
+                    this.allCommentList = replaceValue;
                 }
-                if (resp.data.length > 3) {
+                if (replaceValue.length > 3) {
-                    this.postCommentList[messageIndex].comments.list = resp.data.slice(0, 3);
+                    this.postCommentList[messageIndex].comments.list = replaceValue.slice(0, 3);
-                    this.postCommentList[messageIndex].comments.total = resp.data.length;
+                    this.postCommentList[messageIndex].comments.total = replaceValue.length;
                 } else {
-                    this.postCommentList[messageIndex].comments.list = resp.data;
+                    this.postCommentList[messageIndex].comments.list = replaceValue;
-                    this.postCommentList[messageIndex].comments.total = resp.data.length;
+                    this.postCommentList[messageIndex].comments.total = replaceValue.length;
                 }
             }).catch(error => {
                 this.$message.error('更新回复失败！');
@@ -314,20 +345,24 @@ export default {
         },
         viewMoreComment(data) {
             queryMessageCommentList(data.id).then(resp => {
-                this.allCommentList = resp.data;
+                this.allCommentList = [];
+                resp.data && resp.data.forEach(item => {
+                    item.content = this.replaceEmoji(item.content);
+                    this.allCommentList.push(item);
+                });
                 this.moreMessageId = data.id;
             }).catch(error => {
                 console.error(error);
             });
         },
-        changeCommentContent(val) {
+        handleEmojiContent(content) {
-            if (this.replyUserName && val.startsWith(this.replyUserName)) {
+            const list = content.match(/<span class="ql-emojiblot" data-name="(\S*)"><span contenteditable="false"><span class="ap ap-(\S*)<\/span><\/span><\/span>/g);
-                this.commentContentNoName = val.slice(this.replyUserName.length);
+            (list || []).forEach(item => {
-            } else if (this.replyUserName) {
+                let targetValue = item.split(' ')[2];
-                this.commentContent = this.replyUserName + this.commentContentNoName;
+                targetValue = targetValue.substring(11, targetValue.length - 8);
-            } else {
+                content = content.replace(item, '<<<' + targetValue + '>>>');
-                this.commentContentNoName = this.commentContent;
+            });
-            }
+            return content;
         }
     }
 };