diff --git a/im-uniapp/common/str.js b/im-uniapp/common/str.js new file mode 100644 index 0000000..3f6de92 --- /dev/null +++ b/im-uniapp/common/str.js @@ -0,0 +1,14 @@ +let html2Escape = (strText) => { + return strText.replace(/[<>&"]/g, function(c) { + return { + '<': '<', + '>': '>', + '&': '&', + '"': '"' + } [c]; + }); +} + +export default { + html2Escape +} \ No newline at end of file diff --git a/im-uniapp/components/chat-item/chat-item.vue b/im-uniapp/components/chat-item/chat-item.vue index b2c019d..9c9b1c3 100644 --- a/im-uniapp/components/chat-item/chat-item.vue +++ b/im-uniapp/components/chat-item/chat-item.vue @@ -16,8 +16,7 @@ {{ atText }} {{ chat.sendNickName + ': ' }} {{chat.lastContent}} - + @@ -84,6 +83,10 @@ export default { let messageType = this.chat.messages[idx].type; return messageType == this.$enums.MESSAGE_TYPE.TEXT; }, + nodesText() { + let text = this.$str.html2Escape(this.chat.lastContent); + return this.$emo.transform(text, 'emoji-small') + } } } diff --git a/im-uniapp/components/chat-message-item/chat-message-item.vue b/im-uniapp/components/chat-message-item/chat-message-item.vue index 060ac0a..88d6db8 100644 --- a/im-uniapp/components/chat-message-item/chat-message-item.vue +++ b/im-uniapp/components/chat-message-item/chat-message-item.vue @@ -236,7 +236,8 @@ export default { }, nodesText() { let color = this.msgInfo.selfSend ? 'white' : ''; - let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color) + let text = this.$str.html2Escape(this.msgInfo.content) + text = this.$url.replaceURLWithHTMLLinks(text, color) return this.$emo.transform(text, 'emoji-normal') } } diff --git a/im-uniapp/main.js b/im-uniapp/main.js index 59de0a9..8fa350a 100644 --- a/im-uniapp/main.js +++ b/im-uniapp/main.js @@ -2,7 +2,8 @@ import App from './App' import request from './common/request'; import emotion from './common/emotion.js'; import url from './common/url.js'; -import * as enums from './common/enums.js'; +import str from './common/str.js'; +import * as enums from './common/enums.js'; import * as date from './common/date'; import * as socketApi from './common/wssocket'; import * as messageType from './common/messageType'; @@ -21,10 +22,10 @@ import switchBar from '@/components/bar/switch-bar' // #ifdef H5 import * as recorder from './common/recorder-h5'; import ImageResize from "quill-image-resize-mp"; -import Quill from "quill"; +import Quill from "quill"; // 以下组件用于兼容部分手机聊天边框无法输入的问题 -window.Quill = Quill; -window.ImageResize = { default: ImageResize }; +window.Quill = Quill; +window.ImageResize = { default: ImageResize }; // 调试器 // import VConsole from 'vconsole' // new VConsole(); @@ -33,31 +34,32 @@ window.ImageResize = { default: ImageResize }; import * as recorder from './common/recorder-app'; // #endif export function createApp() { - const app = createSSRApp(App) - app.use(uviewPlus); - app.use(pinia.createPinia()); - app.component('bar-group', barGroup); - app.component('arrow-bar', arrowBar); - app.component('btn-bar', btnBar); - app.component('switch-bar', switchBar); - app.config.globalProperties.$http = request; - app.config.globalProperties.$wsApi = socketApi; - app.config.globalProperties.$msgType = messageType; - app.config.globalProperties.$emo = emotion; - app.config.globalProperties.$url = url; - app.config.globalProperties.$enums = enums; - app.config.globalProperties.$date = date; - app.config.globalProperties.$rc = recorder; - // 初始化时再挂载store对象 - app.config.globalProperties.$mountStore = () => { - app.config.globalProperties.chatStore = useChatStore(); - app.config.globalProperties.friendStore = useFriendStore(); - app.config.globalProperties.groupStore = useGroupStore(); - app.config.globalProperties.configStore = useConfigStore(); - app.config.globalProperties.userStore = useUserStore(); - } - return { - app, - pinia - } -} + const app = createSSRApp(App) + app.use(uviewPlus); + app.use(pinia.createPinia()); + app.component('bar-group', barGroup); + app.component('arrow-bar', arrowBar); + app.component('btn-bar', btnBar); + app.component('switch-bar', switchBar); + app.config.globalProperties.$http = request; + app.config.globalProperties.$wsApi = socketApi; + app.config.globalProperties.$msgType = messageType; + app.config.globalProperties.$emo = emotion; + app.config.globalProperties.$url = url; + app.config.globalProperties.$str = str; + app.config.globalProperties.$enums = enums; + app.config.globalProperties.$date = date; + app.config.globalProperties.$rc = recorder; + // 初始化时再挂载store对象 + app.config.globalProperties.$mountStore = () => { + app.config.globalProperties.chatStore = useChatStore(); + app.config.globalProperties.friendStore = useFriendStore(); + app.config.globalProperties.groupStore = useGroupStore(); + app.config.globalProperties.configStore = useConfigStore(); + app.config.globalProperties.userStore = useUserStore(); + } + return { + app, + pinia + } +} \ No newline at end of file diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue index 926d58b..0a6c342 100644 --- a/im-uniapp/pages/chat/chat-box.vue +++ b/im-uniapp/pages/chat/chat-box.vue @@ -299,7 +299,7 @@ export default { let receiptText = this.isReceipt ? "【回执消息】" : ""; let atText = this.createAtText(); let msgInfo = { - content: receiptText + this.html2Escape(sendText) + atText, + content: receiptText + sendText + atText, atUserIds: this.atUserIds, receipt: this.isReceipt, type: 0 @@ -735,16 +735,6 @@ export default { let px = info.windowWidth * rpx / 750; return Math.floor(rpx); }, - html2Escape(strHtml) { - return strHtml.replace(/[<>&"]/g, function(c) { - return { - '<': '<', - '>': '>', - '&': '&', - '"': '"' - } [c]; - }); - }, sendMessageRequest(msgInfo) { return new Promise((resolve, reject) => { // 请求入队列,防止请求"后发先至",导致消息错序 diff --git a/im-web/src/api/str.js b/im-web/src/api/str.js new file mode 100644 index 0000000..3f6de92 --- /dev/null +++ b/im-web/src/api/str.js @@ -0,0 +1,14 @@ +let html2Escape = (strText) => { + return strText.replace(/[<>&"]/g, function(c) { + return { + '<': '<', + '>': '>', + '&': '&', + '"': '"' + } [c]; + }); +} + +export default { + html2Escape +} \ No newline at end of file diff --git a/im-web/src/components/chat/ChatInput.vue b/im-web/src/components/chat/ChatInput.vue index 37be300..a597661 100644 --- a/im-web/src/components/chat/ChatInput.vue +++ b/im-web/src/components/chat/ChatInput.vue @@ -367,16 +367,6 @@ export default { // 记录光标所在位置 this.updateRange(); }, - html2Escape(strHtml) { - return strHtml.replace(/[<>&"]/g, function(c) { - return { - '<': '<', - '>': '>', - '&': '&', - '"': '"' - } [c]; - }); - }, submit() { let nodes = this.$refs.content.childNodes; let fullList = []; @@ -389,7 +379,7 @@ export default { continue; } if (node.nodeType === 3) { - tempText += this.html2Escape(node.textContent); + tempText += node.textContent; continue; } let nodeName = node.nodeName.toLowerCase(); diff --git a/im-web/src/components/chat/ChatItem.vue b/im-web/src/components/chat/ChatItem.vue index 07ee6b2..c050020 100644 --- a/im-web/src/components/chat/ChatItem.vue +++ b/im-web/src/components/chat/ChatItem.vue @@ -16,7 +16,7 @@
{{ atText }}
{{ chat.sendNickName + ': ' }}
-
+
diff --git a/im-web/src/components/chat/ChatMessageItem.vue b/im-web/src/components/chat/ChatMessageItem.vue index c6d719e..07244d5 100644 --- a/im-web/src/components/chat/ChatMessageItem.vue +++ b/im-web/src/components/chat/ChatMessageItem.vue @@ -193,7 +193,8 @@ export default { }, htmlText() { let color = this.msgInfo.selfSend ? 'white' : ''; - let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color) + let text = this.$str.html2Escape(this.msgInfo.content) + text = this.$url.replaceURLWithHTMLLinks(text, color) return this.$emo.transform(text, 'emoji-normal') } } diff --git a/im-web/src/main.js b/im-web/src/main.js index 6f48d62..9a95449 100644 --- a/im-web/src/main.js +++ b/im-web/src/main.js @@ -10,6 +10,7 @@ import * as socketApi from './api/wssocket'; import * as messageType from './api/messageType'; import emotion from './api/emotion.js'; import url from './api/url.js'; +import str from './api/str.js'; import element from './api/element.js'; import * as enums from './api/enums.js'; import * as date from './api/date.js'; @@ -31,6 +32,7 @@ Vue.prototype.$date = date; Vue.prototype.$http = httpRequest // http请求方法 Vue.prototype.$emo = emotion; // emo表情 Vue.prototype.$url = url; // url转换 +Vue.prototype.$str = str; // 字符串相关 Vue.prototype.$elm = element; // 元素操作 Vue.prototype.$enums = enums; // 枚举 Vue.prototype.$eventBus = new Vue(); // 全局事件