1、该插件具有发送语音,发送表情,发送图片等功能的 融云聊天UI 2、该插件需要集成 rongCloudIM 插件 和 UIChatBox插件 + imageBrowser插件,支持语音+图片+表情文字的聊天窗口,使用时注意添加以上插件
vue.js,rongCloudIM插件,UIChatBox插件,imageBrowser插件
section class="aui-chat" id="chat_message_body" style="margin-top:50px;">
<div class="aui-chat-header"><a id="user_msg_time">暂无消息</a></div>
<div class="app-chat-data-list" id="chat_message_html">
<div v-cloak v-for="(vo,index) in list">
<div v-if="user_id != vo.user_id">
<div class="app-chat-data-list-left-msg">
<div class="app-chat-data-list-left-msg-l"><img :src="vo.head_portrait"></div>
<div class="app-chat-data-list-left-msg-r">
<div v-if="vo.msg_type == 'RC:TxtMsg'">
<i style="top:25px;"><img src="./image/msg_l.png"></i>
<p v-html="vo.user_msg"></p>
</div>
<div v-else-if="vo.msg_type == 'RC:VcMsg'">
<i style="top:25px;"><img src="./image/msg_l.png"></i>
<p class="yuyin yuyin_left" @click="video_click" v-duration="vo.duration" :video_src="vo.user_video" :message_id="vo.message_id" video_type="left">
<img src="./image/yuyin_left.png">
<a v-if="vo.read_state!='1'"></a>
<b style="text-align: left;">{{vo.duration}}"</b>
</p>
</div>
<div v-else-if="vo.msg_type == 'RC:ImgMsg'">
<p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
</div>
</div>
</div>
</div>
<div v-else>
<div class="app-chat-data-list-right-msg">
<div class="app-chat-data-list-right-msg-l"><img :src="vo.head_portrait"></div>
<div class="app-chat-data-list-right-msg-r">
<div v-if="vo.msg_type == 'RC:TxtMsg'">
<i style="top:25px;"><img src="./image/msg_r.png"></i>
<p v-html="vo.user_msg"></p>
</div>
<div v-else-if="vo.msg_type == 'RC:VcMsg'">
<i style="top:25px;"><img src="./image/msg_r.png"></i>
<p class="yuyin yuyin_right" @click="video_click" v-duration="vo.duration" :video_src="vo.user_video" :message_id="vo.message_id" video_type="right">
<img src="./image/yuyin_right.png">
<a v-if="vo.read_state!='1'"></a>
<b style="text-align: right; right:0px;left:-24px;">{{vo.duration}}"</b>
</p>
</div>
<div v-else-if="vo.msg_type == 'RC:ImgMsg'">
<p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="app-chat-open-mai-box" id="start_del_mai">
<div class="app-chat-open-mai-data">
<div class="app-chat-open-mai">
<h2><img style="width:58px;height:58px; margin-left:26px;" src="./image/chat_mai.png"><img id="chat_yin" style="width:40px;height:40px; margin-top:18px;" src="./image/chat_yin.png"></h2>
<p>手指上滑,取消发送</p>
</div>
</div>
</div>
<div class="app-chat-open-mai-box" id="end_del_mai">
<div class="app-chat-open-mai-data">
<div class="app-chat-open-mai">
<h2><img style="width:58px;height:58px; margin-left:46px;" src="./image/del_mai.png"></h2>
<p><a style="background:#863935; height:20px; line-height:20px; border-radius:4px; color:#fff; padding:0px 6px;">松开手指,取消发送</a></p>
</div>
</div>
</div>
<script type="text/javascript">
apiready = function(){
// 注意, 用户id 和 token 仅供演示,实际项目需要使用者跟进实情配置真实的参数
// 当前用户id
var get_user_id = '47';
var get_user_head_portrait = './image/user_1.png';
// 目标用户id
var target_user_id = '1';
var target_user_head_portrait = './image/user_2.png';
var user_token = 'plNA3XDOITrSRvZP24L5AWRmf7MNMXtPsXk+1SycgW4E+nRgH0bCuw9Dw8WjkkiYgYb+EtD8QOWRQ1191DdP+Hx6BIY37Lbt';
var chat_message_html = new Vue({
el: '#chat_message_html',
data: {
user_id:get_user_id,
list: [{
message_id:1,
user_id:target_user_id,
user_name:'',
head_portrait:'./image/user_2.png',
user_msg:'你好,此插件有哪些功能!',
user_image:'',
image_url:'',
user_video:'',
duration:'',
msg_type:'RC:TxtMsg',
read_state:1,
},{
message_id:1,
user_id:get_user_id,
user_name:'',
head_portrait:'./image/user_1.png',
user_msg:'你好,该插件需要集成 rongCloudIM 插件 和 UIChatBox插件 + imageBrowser插件,支持语音+图片+表情文字的聊天窗口',
user_image:'',
image_url:'',
user_video:'',
duration:'',
msg_type:'RC:TxtMsg',
read_state:1,
}]
},
methods:{
video_click:function(event){
var message_id = $api.attr(event.target,'message_id');
var video_src = $api.attr(event.target,'video_src');
var video_type = $api.attr(event.target,'video_type');
$api.attr($api.dom('.yuyin_left img'),'src','./image/yuyin_left.png');
$api.attr($api.dom('.yuyin_right img'),'src','./image/yuyin_right.png');
api.stopPlay();
if(video_src){
$api.attr($api.first(event.target,'img'),'src','./image/yuyin_'+video_type+'_gif.gif');
api.startPlay({
path:video_src
}, function(ret, err) {
$api.attr($api.first(event.target,'img'),'src','./image/yuyin_'+video_type+'.png');
});
}else{
$api.attr(event.target,'src','./image/icon/yuyin_'+$api.attr($api.closest(event.target, 'p'),'video_type')+'_gif.gif');
api.startPlay({
path:$api.attr($api.closest(event.target, 'p'),'video_src')
}, function(ret, err) {
$api.attr(event.target,'src','./image/yuyin_'+$api.attr($api.closest(event.target, 'p'),'video_type')+'.png');
});
}
var rong = api.require('rongCloudIM');
rong.setMessageReceivedStatus({
messageId: message_id,
receivedStatus: 'LISTENED'
}, function(ret, err) {
});
$apiutil.css($api.dom(event.target,'a'),'display:none');
},
image_click:function(event){
var image_src = $api.attr(event.target,'image_src');
if(image_src){
var imageBrowser = api.require('imageBrowser');
imageBrowser.openImages({
imageUrls: [image_src],
showList:false,
activeIndex:0
});
}
}
}
});
// 初始化聊天室
var rong = api.require('rongCloudIM');
rong.init(function(ret, err) {
});
rong.configurationParameter({
showNickname:true
});
rong.setConnectionStatusListener(function(ret, err) {
});
rong.connect({
token: user_token
},function(ret, err) {
if (ret.status == 'success'){
}
});
// 已读消息
rong.clearMessagesUnreadStatus({
conversationType: 'PRIVATE',
targetId:get_user_id
}, function(ret, err) {
});
var UIChatBox = api.require('UIChatBox');
UIChatBox.open({
placeholder: '',
maxRows: 4,
emotionPath: 'widget://libs/img/emotion',
texts: {
recordBtn: {
normalTitle: '按住说话',
activeTitle: '松开结束'
},
sendBtn: {
title: '发送'
}
},
styles: {
topDivider:{
width:0,
color:'#E6E6E6'
},
inputBar: {
borderColor: '#A5ABAF',
bgColor: '#FFFFFF'
},
inputBox: {
borderColor: '#A5ABAF',
bgColor: '#FFFFFF'
},
emotionBtn: {
normalImg: 'widget://libs/img/emotion/chat01.png'
},
extrasBtn: {
normalImg: 'widget://libs/img/emotion/chat02.png'
},
keyboardBtn: {
normalImg: 'widget://libs/img/emotion/chat03.png'
},
speechBtn: {
normalImg: 'widget://libs/img/emotion/mai.png'
},
recordBtn: {
normalBg: 'widget://image/icon/mai_bj.png',
activeBg: 'widget://image/icon/mai_bj_ok.png',
color: '#000',
size: 14
},
indicator: {
target: 'both',
color: '#c4c4c4',
activeColor: '#9e9e9e'
},
sendBtn: {
titleColor: '#ffffff',
bg: '#DD4338',
activeBg: '#DD4338',
titleSize: 14
}
},
extras: {
titleSize: 10,
titleColor: '#a3a3a3',
btns: [{
title: '图片',
normalImg: 'widget://libs/img/emotion/image_a.png',
activeImg: 'widget://libs/img/emotion/image_b.png'
}, {
title: '拍照',
normalImg: 'widget://libs/img/emotion/shooting_a.png',
activeImg: 'widget://libs/img/emotion/shooting_b.png'
}]
}
}, function(ret, err) {
if (ret) {
if(ret.eventType=='send'){
if(ret.msg){
send_rong('text',target_user_id,ret.msg,0);
}
UIChatBox.closeKeyboard();
UIChatBox.closeBoard();
}else if(ret.click==true){
if(ret.index==0 && ret.eventType=='clickExtras'){
api.getPicture({
sourceType: 'album',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
allowEdit: false,
quality: 90,
saveToPhotoAlbum: false
}, function(ret, err) {
if (ret) {
if(ret.data){
send_rong('image',target_user_id,ret.data,0);
UIChatBox.closeBoard();
}
}
});
}else if(ret.index==1 && ret.eventType=='clickExtras'){
api.getPicture({
sourceType: 'camera',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
allowEdit: false,
quality: 90,
saveToPhotoAlbum: false
}, function(ret, err) {
if (ret) {
if(ret.data){
send_rong('image',target_user_id,ret.data,0);
UIChatBox.closeBoard();
}
}
});
}
}else if(ret.eventType=='show'){
$apiutil.css($api.dom('#chat_message_body'),'height:'+(api.frameHeight - ret.inputBarHeight - 55)+'px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;');
}
}
});
UIChatBox.addEventListener({
target: 'recordBtn',
name: 'press'
}, function(ret, err) {
if (ret) {
$apiutil.css($api.dom('#start_del_mai'),'display:block');
// 开始录音
$api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.gif');
var time = new Date().getTime();
api.startRecord({
path: 'fs://lemon/chat/chat_record_'+time+'.amr'
});
}
});
UIChatBox.addEventListener({
target: 'recordBtn',
name: 'move_out'
}, function(ret, err) {
if (ret) {
$apiutil.css($api.dom('#start_del_mai'),'display:none');
$apiutil.css($api.dom('#end_del_mai'),'display:block');
api.stopRecord(function(ret, err) {});
$api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
}
});
UIChatBox.addEventListener({
target: 'recordBtn',
name: 'move_out_cancel'
}, function(ret, err) {
if (ret) {
$apiutil.css($api.dom('#start_del_mai'),'display:none');
$apiutil.css($api.dom('#end_del_mai'),'display:none');
api.stopRecord(function(ret, err) {});
$api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
}
});
UIChatBox.addEventListener({
target: 'recordBtn',
name: 'press_cancel'
}, function(ret, err) {
if (ret) {
$apiutil.css($api.dom('#start_del_mai'),'display:none');
$apiutil.css($api.dom('#end_del_mai'),'display:none');
// 发送语音
api.stopRecord(function(ret, err) {
if (ret) {
var path = ret.path;
var duration = ret.duration;
send_rong('video',target_user_id,path,duration);
$api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
}
});
}
});
// 统一接收融云会话加
api.addEventListener({
name: 'get_rong_message_data'
}, function(rrr, eee) {
var ret = rrr.value;
if(ret.result.message.conversationType=='PRIVATE' && ret.result.message.senderUserId==target_user_id){
$lemon.css('#user_msg_time','display:none');
// 接受消息
var rong = api.require('rongCloudIM');
rong.clearMessagesUnreadStatus({
conversationType: 'PRIVATE',
targetId:target_user_id
}, function(ret, err) {
});
if(api.systemType=='ios'){
if(ret.result.message.receivedStatus=='LISTENED'){
var read_state = 1;
}else{
var read_state = 0;
}
}else{
if(ret.result.message.isListened==true){
var read_state = 1;
}else{
var read_state = 0;
}
}
if(ret.result.message.objectName=='RC:TxtMsg'){
chat_message_html.list.push({
message_id:ret.result.message.messageId,
user_id:target_user_id,
user_name:'',
head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
user_msg:emotion_replace(ret.result.message.content.text),
user_image:'',
image_url:'',
user_video:'',
duration:'',
msg_type:'RC:TxtMsg',
read_state:ret.result.message.receivedStatus,
});
}else if(ret.result.message.objectName=='RC:VcMsg'){
chat_message_html.list.push({
message_id:ret.result.message.messageId,
user_id:target_user_id,
user_name:'',
head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
user_msg:'',
user_image:'',
image_url:'',
user_video:ret.result.message.content.voicePath,
duration:ret.result.message.content.duration,
msg_type:'RC:VcMsg',
read_state:ret.result.message.receivedStatus,
});
}else if(ret.result.message.objectName=='RC:ImgMsg'){
chat_message_html.list.push({
message_id:ret.result.message.messageId,
user_id:target_user_id,
user_name:'',
head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
user_msg:'',
user_image:ret.result.message.content.thumbPath,
image_url:ret.result.message.content.imageUrl,
user_video:'',
duration:'',
msg_type:'RC:ImgMsg',
read_state:ret.result.message.receivedStatus,
});
}
setTimeout(function(){
$apiutil.css($api.dom('#chat_message_body'),'display:block');
var div = document.getElementById('chat_message_body');
div.scrollTop = div.scrollHeight;
},300);
}
});
// 监听键盘
$api.setStorage('s_frameHeight',api.frameHeight);
UIChatBox.addEventListener({
target: 'inputBar',
name: 'move'
}, function(ret, err) {
if (ret) {
var win_height = ret.panelHeight;
$apiutil.css($api.dom('#chat_message_body'),'height:'+(api.frameHeight - ret.inputBarHeight - 55)+'px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;');
setTimeout(function(){
var div = document.getElementById('chat_message_body');
div.scrollTop = div.scrollHeight;
},100);
}
});
function send_rong(type,target_id,target_msg,duration){
var rong = api.require('rongCloudIM');
if(type=='text'){
rong.sendTextMessage({
conversationType: 'PRIVATE',
targetId: target_user_id,
text: target_msg,
extra:'{userInfo:{nickName:"自定义用户名称"}}'
}, function(ret, err) {
if(ret.status=='success'){
var data = ret.result.message;
if(data){
chat_message_html.list.push({
message_id:data.messageId,
user_id:get_user_id,
user_name:'',
head_portrait:get_user_head_portrait,
user_msg:emotion_replace(target_msg),
user_image:'',
image_url:'',
user_video:'',
duration:'',
msg_type:'RC:TxtMsg',
read_state:'READ',
});
setTimeout(function(){
var div = document.getElementById('chat_message_body');
div.scrollTop = div.scrollHeight;
},300);
}
}
});
}else if(type=='video'){
rong.sendVoiceMessage({
conversationType: 'PRIVATE',
targetId: target_user_id,
voicePath: target_msg,
duration: duration,
extra:'{userInfo:{nickName:"自定义用户名称"}}'
}, function(ret, err) {
if(ret.status=='success'){
rong.setMessageReceivedStatus({
messageId:ret.result.message.messageId,
receivedStatus: 'LISTENED'
}, function(ret, err) {
});
var data = ret.result.message;
chat_message_html.list.push({
message_id:data.messageId,
user_id:get_user_id,
user_name:'',
head_portrait:get_user_head_portrait,
user_msg:'',
user_image:'',
image_url:'',
user_video:target_msg,
duration:duration,
msg_type:'RC:VcMsg',
read_state:'READ',
});
setTimeout(function(){
var div = document.getElementById('chat_message_body');
div.scrollTop = div.scrollHeight;
},300);
}
});
}else if(type=='image'){
rong.sendImageMessage({
conversationType: 'PRIVATE',
targetId: target_user_id,
imagePath:target_msg,
extra:'{userInfo:{nickName:"自定义用户名称"}}'
}, function(ret, err) {
if(ret.status=='success'){
var data = ret.result.message;
chat_message_html.list.push({
message_id:data.messageId,
user_id:get_user_id,
user_name:'',
head_portrait:get_user_head_portrait,
user_msg:'',
user_image:target_msg,
image_url:target_msg,
user_video:'',
duration:'',
msg_type:'RC:ImgMsg',
read_state:'READ',
});
setTimeout(function(){
var div = document.getElementById('chat_message_body');
div.scrollTop = div.scrollHeight;
},300);
}
});
}
}
// 表情字典替换
function emotion_replace(str){
var face = {
"[微笑]":"./libs/img/emotion/Expression_1.png",
"[撇嘴]":"./libs/img/emotion/Expression_2.png",
"[色]":"./libs/img/emotion/Expression_3.png",
"[发呆]":"./libs/img/emotion/Expression_4.png",
"[得意]":"./libs/img/emotion/Expression_5.png",
"[流泪]":"./libs/img/emotion/Expression_6.png",
"[害羞]":"./libs/img/emotion/Expression_7.png",
"[闭嘴]":"./libs/img/emotion/Expression_8.png",
"[睡]":"./libs/img/emotion/Expression_9.png",
"[大哭]":"./libs/img/emotion/Expression_10.png",
"[尴尬]":"./libs/img/emotion/Expression_11.png",
"[发怒]":"./libs/img/emotion/Expression_12.png",
"[调皮]":"./libs/img/emotion/Expression_13.png",
"[呲牙]":"./libs/img/emotion/Expression_14.png",
"[惊讶]":"./libs/img/emotion/Expression_15.png",
"[难过]":"./libs/img/emotion/Expression_16.png",
"[酷]":"./libs/img/emotion/Expression_17.png",
"[冷汗]":"./libs/img/emotion/Expression_18.png",
"[抓狂]":"./libs/img/emotion/Expression_19.png",
"[吐]":"./libs/img/emotion/Expression_20.png",
"[偷笑]":"./libs/img/emotion/Expression_21.png",
"[愉快]":"./libs/img/emotion/Expression_22.png",
"[白眼]":"./libs/img/emotion/Expression_23.png",
"[傲慢]":"./libs/img/emotion/Expression_24.png",
"[饥饿]":"./libs/img/emotion/Expression_25.png",
"[困]":"./libs/img/emotion/Expression_26.png",
"[恐惧]":"./libs/img/emotion/Expression_27.png",
"[流汗]":"./libs/img/emotion/Expression_28.png",
"[憨笑]":"./libs/img/emotion/Expression_29.png",
"[悠闲]":"./libs/img/emotion/Expression_30.png",
"[奋斗]":"./libs/img/emotion/Expression_31.png",
"[咒骂]":"./libs/img/emotion/Expression_32.png",
"[疑问]":"./libs/img/emotion/Expression_33.png",
"[嘘]":"./libs/img/emotion/Expression_34.png",
"[晕]":"./libs/img/emotion/Expression_35.png",
"[疯了]":"./libs/img/emotion/Expression_36.png",
"[衰]":"./libs/img/emotion/Expression_37.png",
"[骷髅]":"./libs/img/emotion/Expression_38.png",
"[敲打]":"./libs/img/emotion/Expression_39.png",
"[再见]":"./libs/img/emotion/Expression_40.png",
"[擦汗]":"./libs/img/emotion/Expression_41.png",
"[抠鼻]":"./libs/img/emotion/Expression_42.png",
"[鼓掌]":"./libs/img/emotion/Expression_43.png",
"[糗大了]":"./libs/img/emotion/Expression_44.png",
"[坏笑]":"./libs/img/emotion/Expression_45.png",
"[左哼哼]":"./libs/img/emotion/Expression_46.png",
"[右哼哼]":"./libs/img/emotion/Expression_47.png",
"[哈欠]":"./libs/img/emotion/Expression_48.png",
"[鄙视]":"./libs/img/emotion/Expression_49.png",
"[委屈]":"./libs/img/emotion/Expression_50.png",
"[快哭了]":"./libs/img/emotion/Expression_51.png",
"[阴险]":"./libs/img/emotion/Expression_52.png",
"[亲亲]":"./libs/img/emotion/Expression_53.png",
"[吓]":"./libs/img/emotion/Expression_54.png",
"[可怜]":"./libs/img/emotion/Expression_55.png",
"[菜刀]":"./libs/img/emotion/Expression_56.png",
"[西瓜]":"./libs/img/emotion/Expression_57.png",
"[啤酒]":"./libs/img/emotion/Expression_58.png",
"[篮球]":"./libs/img/emotion/Expression_59.png",
"[乒乓]":"./libs/img/emotion/Expression_60.png",
"[咖啡]":"./libs/img/emotion/Expression_61.png",
"[饭]":"./libs/img/emotion/Expression_62.png",
"[猪头]":"./libs/img/emotion/Expression_63.png",
"[玫瑰]":"./libs/img/emotion/Expression_64.png",
"[凋谢]":"./libs/img/emotion/Expression_65.png",
"[嘴唇]":"./libs/img/emotion/Expression_66.png",
"[爱心]":"./libs/img/emotion/Expression_67.png",
"[心碎]":"./libs/img/emotion/Expression_68.png",
"[蛋糕]":"./libs/img/emotion/Expression_69.png",
"[闪电]":"./libs/img/emotion/Expression_70.png",
"[炸弹]":"./libs/img/emotion/Expression_71.png",
"[刀]":"./libs/img/emotion/Expression_72.png",
"[足球]":"./libs/img/emotion/Expression_73.png",
"[瓢虫]":"./libs/img/emotion/Expression_74.png",
"[便便]":"./libs/img/emotion/Expression_75.png",
"[月亮]":"./libs/img/emotion/Expression_76.png",
"[太阳]":"./libs/img/emotion/Expression_77.png",
"[礼物]":"./libs/img/emotion/Expression_78.png",
"[拥抱]":"./libs/img/emotion/Expression_79.png",
"[强]":"./libs/img/emotion/Expression_80.png",
"[弱]":"./libs/img/emotion/Expression_81.png",
"[握手]":"./libs/img/emotion/Expression_82.png",
"[胜利]":"./libs/img/emotion/Expression_83.png",
"[抱拳]":"./libs/img/emotion/Expression_84.png",
"[勾引]":"./libs/img/emotion/Expression_85.png",
"[拳头]":"./libs/img/emotion/Expression_86.png",
"[差劲]":"./libs/img/emotion/Expression_87.png",
"[爱你]":"./libs/img/emotion/Expression_88.png",
"[NO]":"./libs/img/emotion/Expression_89.png",
"[OK]":"./libs/img/emotion/Expression_90.png",
"[爱情]":"./libs/img/emotion/Expression_91.png",
"[飞吻]":"./libs/img/emotion/Expression_92.png",
"[跳跳]":"./libs/img/emotion/Expression_93.png",
"[发抖]":"./libs/img/emotion/Expression_94.png",
"[怄火]":"./libs/img/emotion/Expression_95.png",
"[转圈]":"./libs/img/emotion/Expression_96.png",
"[磕头]":"./libs/img/emotion/Expression_97.png",
"[回头]":"./libs/img/emotion/Expression_98.png",
"[跳绳]":"./libs/img/emotion/Expression_99.png",
"[投降]":"./libs/img/emotion/Expression_100.png",
"[激动]":"./libs/img/emotion/Expression_101.png",
"[街舞]":"./libs/img/emotion/Expression_102.png",
"[献吻]":"./libs/img/emotion/Expression_103.png",
"[左太极]":"./libs/img/emotion/Expression_104.png",
"[右太极]":"./libs/img/emotion/Expression_105.png",
"[gif动画]":"./libs/img/emotion/Expression_106.png",
};
var reg = /\[.+?\]/g;
if(str){
str = str.replace(reg,function(a,b){
if(face[a]){
return '<img style="width:18px; height:18px;vertical-align:text-bottom" src="'+face[a]+'">';
}else{
return str;
}
});
return str;
}else{
return str;
}
}
};
</script>
注意,该插件必须使用融云配置好相关参数
该插件需要集成 rongCloudIM 插件 和 UIChatBox插件 + imageBrowser插件,支持语音+图片+表情文字的聊天窗口,使用时注意添加以上插件