chat-area
/
demo.html

<!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>