代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>deBug</title>
<link rel="stylesheet" href="./es5/ChatArea.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
padding: 20px;
}
#msg1 {
padding: 10px;
word-break: break-all;
white-space: pre-wrap;
}
#msg1 .at-user {
margin: 0 1px;
color: #269AFF;
}
.info {
margin-top: 10px;
color: #666;
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<p class="info">请尝试在输入框中敲击@键吧</p>
<div id="chat"></div>
<p class="info">消息回显-发送后查看展示效果</p>
<div id="msg1"></div>
<p class="info">扩展交互</p>
<button id="btn1">发送消息</button>
<button id="btn2">手动插入@人员</button>
<button id="btn3">控制台打印选中的@人员列表</button>
<button id="btn4">光标处插入图片</button>
<button id="btn5">光标处插入文本</button>
<button id="btn6">光标定向最后</button>
<button id="btn7">光标人员选择</button>
<button id="btn8">人员多选</button>
<button id="btn9">将发送的消息回填到聊天框</button>
<button id="btn10">执行撤销</button>
<button id="btn13">执行恢复</button>
<button id="btn11">清空文本框</button>
<button id="btn12">销毁实例</button>
</div>
<script src="./es5/System.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"ChatArea": "./es5/ChatArea.js"
}
}
</script>
<script>
var initChat = function (ChatArea) {
var chat = new ChatArea({
elm: document.getElementById('chat'),
placeholder: '输入@唤起选择窗,ctrl+enter换行,enter发送',
userList: [
{
id: '1',
name: '张三',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
pinyin: 'zhang san'
},
{
id: '2',
name: '李四',
pinyin: 'li si'
},
{
id: '5',
name: '王五',
pinyin: 'wang wu'
},
{
id: '6',
name: '马六'
,
pinyin: 'ma liu'
}
]
// 更多配置请参考文档
});
var sendMsg = function () {
var isEmpty = chat.isEmpty(true);
if (isEmpty) return;
document.getElementById('msg1').innerHTML = chat.getHtml({ needUserId: true });
};
chat.enterSend = function () {
sendMsg();
};
document.getElementById('btn1').onclick = function () {
sendMsg();
};
document.getElementById('btn2').onclick = function () {
chat.setUserTag({ id: '1', name: '张三' });
};
document.getElementById('btn3').onclick = function () {
console.log('getCallUserList:', chat.getCallUserList());
console.log('getCallUserTagList:', chat.getCallUserTagList());
};
document.getElementById('btn4').onclick = function () {
chat.insertHtml('<img width="auto" height="22px" style="vertical-align: bottom" src="https://www.jianfv.top/image/bq1.gif">');
}
document.getElementById('btn5').onclick = function () {
chat.insertText('你好呀!朋友!');
}
document.getElementById('btn6').onclick = function () {
chat.enable();
}
document.getElementById('btn7').onclick = function () {
chat.showPCPointDialog();
}
document.getElementById('btn8').onclick = function () {
chat.showPCCheckDialog();
}
document.getElementById('btn9').onclick = function () {
var sendHtml = document.getElementById('msg1').innerHTML;
if (!sendHtml) return;
chat.reverseAnalysis(sendHtml, true);
}
document.getElementById('btn10').onclick = function () {
chat.undo();
}
document.getElementById('btn13').onclick = function () {
chat.redo();
}
document.getElementById('btn11').onclick = function () {
chat.clear();
}
document.getElementById('btn12').onclick = function () {
chat.dispose();
}
};
System.register(['ChatArea'], function (_export, _context) {
return {
setters: [
function (target) {
initChat(target.C);
},
],
execute: function () {
_export();
},
};
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。