npm i --save chatarea
import ChatArea from 'chatarea'
// 引入css样式
import 'chatarea/lib/ChatArea.css'
// 此时页面将你传入的元素生成为一个简单的聊天框,你可以通过元素class修改为你提供的默认样式
const chat = new ChatArea({
elm: document.getElementById('id'), // 从dom上抓取一个元素将其改造为聊天框
userList: [ // 当输入@键时弹出人员选择的列表
{ id: '1', name: '张三', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', pinyin: 'song song' },
{ id: '2', name: '李四' },
{ id: '3', name: 'jianfv' }
],
placeholder: '请输入文本框内容', // 输入提示文案
maxLength: 2000, // 设置聊天框最大文本输入长度 默认没有限制（*如果业务场景没声明需要限制 就不要配置该值减少不必要的开销）
asyncMatch: false, // 人员列表是否开启异步加载模式
// 其余扩展配置项
customTrigger: [ // 自定义弹窗触发符
{
dialogTitle: '群话题',
prefix: '#',
tagList: [
{ id: 'ht1', name: '话题一', pinyin: 'hua ti yi' },
{ id: 'ht2', name: '话题二', pinyin: 'hua ti er' }
]
}
],
selectList: [ // 定义选择元素
{
dialogTitle: '比例',
key: 'ratio',
options: [
{ id: '1', name: '4:3', preview: 'preview url' },
{ id: '2', name: '16:9', preview: 'preview url' },
]
}
],
copyType: ['text', 'image'], // 允许在输入框内粘贴板粘贴的类型 默认值：['text']
userProps: { // 转义userList中id,avatar,pinyin的属性名与实际业务数据属性名
id: 'id',
name: 'name',
avatar: 'avatar',
pinyin: 'pinyin'
},
needDialog: true, // 是否需要默认的交互弹窗，可以自定义支持
needCallEvery: true, // 是否需要@全部选项
needCallSpace: false, // 是否需要像微信一样在 @标签 后面衔接一个空格之间的距离
needDebounce: true, // 是否对交互点启用防抖函数
wrapKeyFun: (event) => event.ctrlKey && ['Enter'].includes(event.key), // 自定义折行键
sendKeyFun: (event) => !event.ctrlKey && ['Enter'].includes(event.key) // 自定义发送键
})
// 修改实例对象的配置项， 配置属性非必传 按需传入修改
chat.updateConfig({
userProps: { id: 'userId', name: 'userName' },
userList: [{ userId: 'NEW1', userName: '新的人员' }],
customTrigger: [{ dialogTitle: '群话题', prefix: '#', tagList: [] }],
selectList: [{ dialogTitle: '比例', key: 'ratio', options: [] }],
needCallEvery: false,
placeholder: '新的提示语',
maxLength: 3000,
// ...其余配置
})
// 获取聊天框精简后的文本内容
chat.getText()
// 获取聊天框精简后的html内容
chat.getHtml()
// 获取聊天框内容里 配置项userList 所包含@人员标签的人员信息
chat.getCallUserList()
// 获取聊天框内容里所有@人员标签的人员信息
chat.getCallUserTagList()
// 获取自定义触发符弹窗已选择的数据列表
chat.getCustomTagList()
// 获取标签选择元素已选择的数据列表
chat.getSelectTagList()
// 将getHtml生成的html片段进行逆向解析回填至聊天框，常用于消息撤回重新编辑功能
chat.reverseAnalysis('getHtml return value', true) // 第二配置项参数可以控制是否保留当前聊天框内容进行拼接回填内容
// 往聊天框光标处插入html内容
chat.insertHtml(`<img src="${url}" alt="404" />`) // 光标处插入图片，可以使用该方法插入表情包
// 往聊天框光标处插入文本内容
chat.insertText('txt')
// 往聊天框光标处插入@人员标签元素
chat.setUserTag({ id: '1', name: '松松' })
// 往聊天框光标处插入自定义标签元素
chat.setCustomTag({ id: 'ht1', name: '话题1' }, '#')
// 往聊天框光标处插入选择标签元素
chat.setSelectTag({ id: '1', name: '4:3' }, 'ratio')
// 删除聊天框内指定的的@标签元素
chat.delUserTags(['1'])
// 删除聊天框内指定的的自定义标签元素
chat.delCustomTags('#', ['ht1'])
// 删除聊天框内指定的选择标签元素
chat.delSelectTags('ratio', ['1'])
// 清空输入框方法
chat.clear()
// 获取聊天框内容是否为空
chat.isEmpty()
// 用于页面或组件销毁时卸载在body内挂载的元素
chat.dispose()
// 禁止聊天框编辑
chat.disabled()
// 允许聊天框编辑并将光标定向到聊天内容末尾
chat.enable()
// 添加事件订阅
chat.addEventListener('operate', () => {})
// 卸载事件订阅
chat.removeEventListener('operate', () => {})
// PC唤起人员光标选择弹窗
chat.showPCPointDialog()
// PC唤起人员多选选择弹窗
chat.showPCCheckDialog()
// 唤起PC自定义触发符选择弹窗
chat.showPCCustomTagDialog('#')
// H5唤起人员多选选择弹窗
chat.showH5Dialog()
// 撤销上一次聊天框操作
chat.undo()
// 恢复上一次撤销操作
chat.redo()
// 修改PC光标选择弹窗默认文案
chat.revisePCPointDialogLabel({
title: '群成员',
callEveryLabel: '所有人',
checkLabel: '多选',
emptyLabel: '暂无数据'
})
// 修改PC多选选择弹窗默认文案
chat.revisePCCheckDialogLabel({
title: '选择要@的人',
searchPlaceholder: '搜素人员名称',
searchEmptyLabel: '没有匹配到任何结果',
userTagTitle: '研讨成员列表',
checkAllLabel: '全选',
checkEmptyLabel: '请选择需要@的成员',
confirmLabel: '确定',
cancelLabel: '取消'
})
// 修改H5选择弹窗默认文案
chat.reviseH5DialogLabel({
title: '选择提醒的人',
callEveryLabel: '所有人',
searchPlaceholder: '搜素人员名称',
searchEmptyLabel: '没有匹配到任何结果',
confirmLabel: '确定',
cancelLabel: '收起'
})
// 关闭ChatArea 内置操作
chat.addEventListener('defaultAction', (type) => {
switch (type) {
case 'COPY': // 复制
return 'PREVENT'
case 'CUT': // 剪切
return 'PREVENT'
case 'PASTE': // 粘贴
return 'PREVENT'
case 'UNDO': // 撤销
return 'PREVENT'
case 'REDO': // 恢复
return 'PREVENT'
}
})
微信：13587774709
QQ：1596170432
v5.6.5 => 交互调整：移动端使用前置标签功能默认关闭点击关闭提示标签进行关闭效果
兼容优化：优化部分ios设备无法在输入标签内进行的聚焦行为
BUG修复：修复多选人员弹窗在人员更新时存在遗留元素
v5.6.3 => 优化ChatNode相关api：setCursorNode => 支持将光标移动到输入标签之中
优化ChatNode相关api：getCursorNode => 支持将获取处于输入标签之中的节点信心
优化ts类型定义
v5.5.9 => 新增交互：支持在聊天区域内展示前置提示标签
新增api：openTipTag => 打开前置展示标签
新增api：closeTipTag => 关闭前置展示标签
新增监听事件：elementClicked => 监听识别用户点击聊天区域内是哪一个具体的元素
H5优化：优化移动端场景的交互
v5.5.3 => 交互修复：修复在输入标签内进行内容全选剪切时，提示语未渲染回显
v5.5.2 => H5优化：重写IME编辑器逻辑,以便支持在H5使用一些ai场景的标签
内部逻辑优化：修整调用异步函数的出入口
v5.5.1 => 新增监听事件：新增大量周期事件以对自定义行为更方便的使用，详情请查看文档中的addEventListener
新增ChatNode相关api：getRankByElm => 根据聊天框元素获取对应的rank值
v5.5.0 => bug修复：优化在输入标签中长按 退格键 进行连续删除时光标会丢失问题
bug修复：：修复配置项 needCallEvery 会受到更新配置影响打开
v5.4.9 => 交互优化：新增支持在输入标签中进行换行的行为
v5.4.7 => bug修复：修复 当聊天区域存在滚动条 并处在输入标签元素输入内容时 视图定位不准确问题
交互优化：优化处在输入标签元素中 使用上下方向键的光标移动表现
v5.4.6 => 样式优化：优化输入标签元素内容过长进行换行的样式表现
v5.4.3 => 新增交互：支持在聊天框内插入输入标签元素
新增api：setInputTag => 在聊天框光标处插入输入标签元素
新增api：getInputTagList => 获取聊天框内输入标签元素的数据内容
新增api：delInputTags => 删除聊天框内指定的输入标签元素
新增监听事件：inputWrite => 监听输入标签元素的写入修改
同步ChatNode更新：ChatNode更新相关的inputTag数据结构
新增ChatNode相关api：getElmByRank => 根据rank获取聊天框对应的dom元素
v5.4.1 => 新增配置项：autoFocus => 配置聊天框生成后是否进行自动聚焦行为
新增ChatNode相关api：getCursorNode => 获取当前聊天框光标所处的节点信息
新增ChatNode相关api：setCursorNode => 设置光标移动到目标节点
新增ChatNode相关api：setSelectNodes => 设置聊天框选中目标节点
优化ChatNode相关api：insertNode、delNodeByRank => 优化修改节点后光标出现的位置
修复api：cursorMove => 移动多个相邻的tag存在与预期目标位置不相同问题
v5.4.0 => 新增类：ChatOperateNode => 提供更加丰富的api以操作聊天框中的数据结构
逻辑优化：优化去除元素className的chat-stat，使返回的html片段更加精简
交互优化：优化聊天框单段内容过长时的视图定位
v5.3.6 => 新增配置项：device => 配置启用PC还是H5的交互方式
新增api：cursorMove => 在当前光标位置移动x格
新增api：cursorDel => 在当前光标位置删除x格内容
v5.3.5 => 交互优化：优化标签下拉选择弹窗关闭逻辑
交互优化：优化标签下拉选择弹窗选择完毕后默认将光标置于其后
交互优化：优化标签下拉弹窗唤起时候自动将视图定向到已选项
事件优化：优化 selectCheck 和 tagCheck 事件将格外返回本次选择的类别
v5.3.3 => 新增交互：支持在聊天框内插入选择标签元素
新增配置项：selectList => 配置标签选择元素选择项数据
新增api：showPCSelectDialog => 唤起聊天框选择标签弹窗
新增api：getSelectTagList => 获取聊天框内标签选择元素数据列表
新增api：setSelectTag => 往聊天框光标处插入选择标签元素
新增api：setCustomTag => 往聊天框光标处插入自定义标签元素
新增监听事件：selectCheck => 监听用户选择标签元素
新增api：delUserTags => 删除聊天框内指定的@标签元素
新增api：delCustomTags => 删除聊天框内指定的自定义标签元素
新增api：delSelectTags => 删除聊天框内指定的选择标签元素
bug修复：修复5.2.0+版本存在使用ES2020语法 导致不支持webpack环境使用（或者自行配置Babel转译）
v5.2.6 => bug修复：修复粘贴在元素内粘贴存在会将元素换行问题
bug修复：废除 5.2.0+版本对structuredClone的使用 兼容Node18以下的版本使用
v5.2.2 => 实例化对象整体结构大改：chatarea整体结构修改了，但使用方式还是与之前版本保持一致，避免使用者升级版本改动繁琐
新增配置项：dialogLabels => 配置默认交互弹窗文案信息
api优化：reverseAnalysis => 优化html片段插入逻辑
api优化：insertText => 优化多行换行文本插入逻辑
粘贴逻辑重构：重构粘贴逻辑以支持在内容任意片段中插入粘贴内容
废弃配置项属性：callEveryLabel => 请在新配置项dialogLabels中配置
废弃api方法：enterSend => 5.2.0+版本将只支持事件订阅发送方法
v5.1.3 => 配置项优化：优化配置项customTrigger针对中英字符的转接
v5.1.2 => 新增CSS全局变量：统一样式色调主题管理
交互优化：开启遮罩弹窗后将锁定body禁止滚动
代码优化：优化输入元素的代码逻辑
bug修复：修复v5.1.1版本优化关联api insertHtml 会向前截取一位字符
v5.1.1 => bug修复：修复鼠标选取元素区域进行复制时 存在区域选择错误问题
逻辑代码优化：重写多选批量插入代码逻辑 实现毫秒级响应渲染一次性插入千条人员数据
api优化：getCallUserTagList => 返回的标签用户数据将进行一次去重
typeScript优化：补充默认类型
v5.0.8 => bug修复：修复移动端使用手写输入法会格外显示每一笔画的词
新增监听事件: atCheck => 监听用户选择@人员
新增监听事件: tagCheck => 监听用户选择自定义标签
v5.0.6 => 交互优化：更新视图追踪光标索引方法
bug修复：修复配置项needCallSpace取值错误
v5.0.4 => 配置项更新：开启配置项asyncMatch后 取消对api:showPCPointDialog的使用拦截
H5交互扩容：配置项asyncMatch已支持H5端的使用
v5.0.1 => 大版本更新：5.0.0+版本将支持人员列表异步加载
新增配置项：asyncMatch => 是否开启异步加载模式
新增监听事件：atMatch => 监听@后置文本内容并异步加载渲染对应数据列表
新增文案修改：emptyLabel => @弹窗异步加载为空时的展示内容
v4.9.5 => bug修复：修复4.9.0+版本 在关闭内置弹窗后 依然走入了内置的光标搜索匹配逻辑
v4.9.4 => 新增配置项：needDebounce => 配置聊天框一些能频繁触发的交互点是否开启防抖拦截
性能优化：对存在会频繁重复的操作和恶意操作添加防抖函数（如：疯狂在输入框只敲击@键），以减少不必要的性能开销
新增交互：多次在@符号或者自定义触发符输入内容时 将自动索引匹配列表中满足匹配的列表渲染至光标选择弹窗
v4.8.9 => 交互优化：废弃使用webApi：scrollIntoView，使用js重写模拟该效果
v4.8.7 => 优化弹窗元素挂载：归纳整合所有弹窗元素统一挂载，不再挂载到body元素上，而是挂载成为配置项elm的相邻元素
剔除配置项：bindScrollElm => 整合后的弹窗元素无需该配置去映射滚动关系
v4.8.4 => 交互优化：优化光标选择弹窗方向键上下切换选中效果
火狐兼容优化：优化火狐方向键左右切换光标效果
v4.8.3 => bug修复：修复用户同时点击多个触发自定义符号的键位会唤起多个选择弹窗问题
v4.8.2 => 自定义触发符弹窗样式修改
v4.8.1 => 补充自定义触发符弹窗绑定滚动容器效果
v4.8.0 => 扩容期待已久的扩展交互：自定义触发符号+自定义数据选择列表
新增配置项：customTrigger => 配置自定义触发符号以及数据选择列表
新增api：getCustomTagList => 获取聊天框中 自定义触发符弹窗已选择的数据列表
新增api：showPCCustomTagDialog => 唤起PC自定义触发符选择弹窗
v4.7.4 => 优化拼音搜索匹配逻辑：更加符合人性化操作搜索逻辑
bug修复：修复H5人员选择弹窗提交字符未清除问题
bug修复：修复PC光标人员选择弹窗输入文字匹配时多选按钮未隐藏问题
v4.7.1 => 新增配置项：bindScrollElm设置光标选择弹窗位置绑定滚动元素
元素渲染代码优化：优化后的元素渲染已经不需要使用缓存的人员头像，同步摘除人员缓存方法
v4.6.9 => 逻辑代码优化：公用方法抽离，实例化对象属性分组
v4.6.8 => H5多选人员弹窗优化：添加空内容展示，确认按钮拦截
v4.6.7 => typeScript优化：新增class泛型
v4.6.6 => PC多选人员弹窗优化：添加空内容展示，确认按钮拦截
移除对配置项参数的类型校验：已使用TypeScript定义配置项的接口类型，无须重复拦截
v4.6.5 => 移除不合理的交互：综合参考微信以及钉钉的交互 => 移除光标二次聚焦于@符号将唤起@光标选择弹窗交互
v4.6.3 => h5优化：优化h5兼容配置项maxLength的使用
v4.6.1 => 新增配置项：maxLength设置聊天框内容最大长度限制
事件订阅更新：将多个事件订阅合集到同一个事件名
bug修复：修复使用键盘Enter选取@人员未触发chat.addEventListener('operate')事件
v4.5.5 => 新增交互：光标二次聚焦于@符合将唤起@光标选择弹窗
事件订阅更新：更新一些内置交互事件订阅 并可以选择性关闭这些内置交互功能
v4.5.3 => 新增api：redo => 恢复撤销的内容
v4.5.2 => api优化：getText 将保留换行符
v4.5.1 => api升级：getText 支持将图片转为文字回显
api升级：getHtml 支持识别文本内的链接转为a标签
新增api：addEventListener 和 removeEventListener用于订阅内部事件
v4.4.7 => bug修复：修复使用配置项userProps使@所有人tag标签显示空值问题
v4.4.5 => npm仓库文档更新，无代码段修改
v4.4.2 => 样式修整：修改外部图片粘贴至聊天框内的默认表现方式
v4.4.1 => api名修改：revisePCPCheckDialogLabel => revisePCCheckDialogLabel
v4.4.0 => 差异修复：修复vite环境打包完成后产生的 var a = b?.c ?? d 会在webpack环境中无法兼容使用
v4.3.8 => 升级api：isEmpty => 添加配置参数 控制是否识别多个纯空格为空
h5优化：部分移动设备的虚拟键盘可能有自己的输入处理和优化机制这可能会影响到空格的输入，故统一空格编码的表现方式
v4.3.6 => bug修复：h5受控输入版本 导致Mac输入法中文无法正常输入的兼容
v4.3.5 => 新增api：reverseAnalysis => 将getHtml生成的html片段进行逆向解析
新增剪切事件的混淆粘贴
v4.3.2 => 完善H5受控输入
v4.3.0 => H5新增受控输入：H5由于有众多机型且安卓软键盘大部分为在按下时为不可识别读取的Unidentified 229标识，故重写拦截其写入逻辑手动模拟还原可识读标识
bug修复：修复batchSetTag批量插入单条数据导致后置文本消失
v4.2.7 => 无代码更新,md文档更新文档访问地址
v4.2.6 => 升级api：getHtml => 添加配置参数，可控制是否保留@人员的id以及为html定义自定义className
bug修复：修复保活机制与谷歌部分逻辑存在兼容问题
v4.2.5 => 新增api：getCallUserTagList => 相较于getCallUserList不同的是，该api不会去比对userList的人员数据并处理，只是单纯的收集获取聊天框中的@人员标签
v4.2.3 => bug修复：修复4.2.2保活机制placeholder显影问题
v4.2.2 => bug修复：修复H5端苹果软键盘中文输入进行连拼会衔接前置拼音字符
v4.2.0 => 新增配置项：callEveryLabel => @所有人文案
新增api：revisePCPointDialogLabel => 修改PC光标选择弹窗默认文案
新增api：revisePCPCheckDialogLabel => 修改PC多选选择弹窗默认文案
新增api：reviseH5DialogLabel => 修改H5选择弹窗默认文案
v4.1.7 => 新增交互功能：视图定向光标功能，聊天框多种内容操作将视图自动滚动到当前光标位置
api修复：修复外部调用showPCCheckDialog，showH5Dialog选择人员后会删除1个前置字符
bug修复：修复4.1.5版本撤销功能关联到的异常逻辑
v4.1.5 => 新增交互功能：撤销功能，聊天框会记录最近50次操作，可以使用撤销键回退
新增api：undo => 文本框执行一次撤销操作，ctrl + z默认会调用该api
交互优化：优化中文拼音匹配功能
v4.1.1 => 新增pc端api：showPCPointDialog => 在当前输入框光标位置唤起人员选择
开放pc端api：showPCCheckDialog => PC唤起人员多选选择弹窗
开放H5端api：showH5Dialog => H5唤起人员多选选择弹窗
v4.0.8 => 关闭文件拖拽至聊天区默认事件，如有需要该可自行订阅事件
v4.0.7 => 粘贴板优化：独立存储复制时富文本内容，以支持将聊天框内容可以复制到其他平台的输入框中
v4.0.6 => 新增api：disabled => 禁止聊天框编辑
新增api：enable => 允许聊天框编辑并将光标定向到聊天内容末尾
样式优化：优化 placeholder 样式
v4.0.5 => 升级api：insertHtml => 将插入的html在聊天框内生成对应的元素对象返回，方便为这个元素添加自定义事件
v4.0.2 => 重写js默认的复制粘贴逻辑，达到聊天框内支持图片文字混淆的粘贴复制
bug修复：修复正则判空匹配<br>标签逻辑，错误的逻辑导致空内容时键盘无法输入b键和r键
v3.8.0 => H5兼容优化：兼容苹果软键盘中文输入以及@事件
v3.7.8 => 添加域名更新文档访问链接，无代码段更新
v3.7.7 => 粘贴兼容：兼容从其他平台软件copy过来的换行标识为纯\r的特殊兼容
v3.7.6 => 粘贴交互升级：兼容粘贴换行内容
v3.7.5 => bug修复：默认弹窗关闭后 关联一些逻辑优化
v3.7.3 => 新增配置项：needDialog => 是否需要默认的交互弹窗, 默认值为true
新增私有api: onceSetTag, batchSetTag => 用于处理自定义交互弹窗业务
v3.7.2 => 交互优化：新增删除行自动聚焦滚动
bug修复：修复如果同一个页面开启多个聊天框存在的兼容问题
v3.7.0 => 交互优化：折行自动滚动到最新的折行段
说明文档初版开发完毕
v3.6.5 => 代码优化：清空无用的注释代码，初始化逻辑简明修整，部分方法整合调用
重要更新：增强js仿造复杂性交互，强化用户对输入框一些极端操作的稳定性
v3.6.1 => 废弃对document.execCommand的使用，使用js仿造其交互逻辑提升兼容性
v3.6.0 => 重要更新：新增标签和文本连续选择后一并删除后置的拼接逻辑
重写方向键盘光标移动逻辑
兼容QQ浏览器其他一些事件的处理
v3.5.7 => 优化使用方向键盘上下光标逻辑
新增api：showPCCheckDialog() => 唤起PC@人员多选弹窗
开放api：showH5Dialog() => 唤起H5@人员弹窗
v3.5.5 => 兼容修复：修复QQ浏览器@标签后中文连拼异常问题
v3.5.3 => bug修复：修复calc不支持大写的PX打包异常问题
v3.5.2 => 新增api：updateConfig(option) => 更新配置项
新增配置项：needCallSpace => 是否需要@人员标签后跟随着一个空格，默认值为false
新增配置项：wrapKeyFun(event) => 自定义折行键盘敲击逻辑
新增配置项：sendKeyFun(event) => 自定义发送键盘敲击逻辑
交互逻辑修改：当人员列表为空时将不触发@弹窗（之前是弹窗内空数据提示）
剔除配置项：wrapKey改用更加灵活的方式
v3.5.0 => 初始化样式兼容
优化@人员弹窗从四个角度淡入的动画
v3.4.7 => 新增配置项：needCallEvery => 是否需要@所有人
新增配置项：wrapKey => 折行操作键，可选值'ctrlKey' | 'shiftKey' | 'altKey'，默认值ctrlKey
新增配置项：userProps => 转接差异的用户数据结构
优化api：clear() => clear(txt)：重置文本并显现传入的文本值
样式优化：提高弹窗的层级
交互优化：防止冒泡事件的一些兼容处理
v3.4.3 => 优化输入框粘贴文本处理逻辑
详细的开发文档正在建设中
v3.4.2 => H5端统一兼容样式：请确保添加<meta>标签写入<meta name="viewport" content="..., initial-scale=1.0, ..." />
bug修复：修复在敲击中文输法时直接敲击回车键盘时会将中文输入法的分隔符'并接发送
v3.4.0 => 稳定开发版本
v3.3.0 => 新增配置参数：uploadImage(file) => Promise<Stirng|URL>，用于用户在文本框粘贴图片走自定义上传接口并返回图片资源的地址用于展示，不传这个配置参数则默认使用将图片资源转成base64进行展示（这样会使html片段将会很大，不推荐）
修改配置项copyType的默认值：['text', 'image] => ['text']，现在默认粘贴类型仅允许为文本类型，如需要支持图片类型请修改配置项
api修改：unLoad(旧) => dispose(新)，在原有卸载元素的逻辑上添加释放实例对象
v3.2.8 => 代码优化
v3.2.7 => 实例化参数拦截: 对用户非法传参的参数值进行拦截提示
v3.2.3 => bug修复: 文本框Cltrl+A全选替换问题
v3.2.2 => 拆分js和css文件
优化js包的体积 125kb => 37kb
v3.1.0 => 参考pinyin-pro的match方法替换原拼音匹配方式，使其检索方式更人性化
v3.0.7 => 排序逻辑优化
v3.0.6 => tag样式微调
v3.0.5 => markdown优化
v3.0.1 => bug修复：h5弹窗搜索值关闭后未清空问题
v3.0.0 => H5交互版本开发完毕
v2.3.1 => bug修复：在唤起@弹窗继续输入文本将搜索匹配的人员列表时 使用中文连拼时敲击回车功能丢失问题
v2.3.0 => 新增新的交互功能：在唤起@弹窗继续输入文本将搜索匹配的人员列表
新增api：setUserTag(user) => 手动在光标处添加传入的人员@标签
添加css动画
H5交互基本框架构建,3.0版本将完全开放h5版本的交互
v2.2.0 => 恢复@人员弹窗出现时，禁止键盘输入操作（该版本将放开这个限制）
部分样式类名修改（预留h5开发）
v2.1.9 => 剔除无用uid属性
部分方法分离
v2.1.8 => css样式文件细分
api优化：unLoad同步卸载一些绑定的事件
dom操作逻辑优化
v2.1.7 => 新增api：unLoad() => 用于页面或组件销毁时卸载在body内挂载的元素
v2.1.6 => 添加滚动样式
v2.1.2 => 优化粘贴板粘贴文本
V2.0.8 => 光标交互扩展兼容其他浏览器
V2.0.7 => 剔除debug时留下的log信息
V2.0.6 => 优化全选的交互逻辑
api优化：getReduceNode响应的node节点剔除掉渲染消息用不到的属性，使其更加精简
BUG修复: 当删除非最后一个tag标签时指向异常
v2.0.0 => 大版本更新：推翻重构了所有的光标处理、文本和HTML写入、折行、退格删除、光标移动逻辑，不再采用0宽字符的处理方式（该方式下光标难以细致化控制）
新增api：getReduceNode() => 获取精简后的dom
v1.6.3 => 交互优化：左右键盘切换光标时将跳过0宽字符，解决@人员标签需要连续敲击两下光标才能向左或向右移动光标
BUG修复：修复@人员标签和图片在谷歌浏览器会存在ctrl+a全选后无法删除的问题
v1.6.2 => 代码小优化：元素的显示隐藏统一方法控制
api小优化：getCallUserList响应的人员列表顺序将按照文本框内@标签的顺序，不再按照传入的userList数组顺序
v1.6.1 => 简易的demo页部署
api优化：调用insertHtml光标不在文本框内时，将插入在最后一次在文本框的位置而不是在最后
BUG修复：getCallUserList添加@所有人的特殊标识
v1.5.9 => bug修复：修复insertHtml会插入其他区域的光标处
v1.5.8 => api优化：修改insertText()插入方式
api优化：更加的精简getHtml返回的内容
BUG修复：修复谷歌浏览器在@标签后面没有元素时输入框无法聚焦
v1.5.6 => md添加图文说明
v1.5.5 => 开放文本框支持图片粘贴功能
扩容新字段：copyType 控制输入框粘贴模式
v1.5.0 => 新增api：getText() => 获取输入纯文本内容
新增api：getHtml() => 获取输入html内容
部分方法名修改，使其更加的见名知意：
setUserList(旧) => updateUserList(新)
isUnText(旧) => isEmpty(新)
resizeText(旧) => clear(新)
v1.4.3 => 优化placeholder显隐逻辑
v1.4.1 => 重大更新：重写了退格删除关联元素逻辑 （旧版本@人员的相关插入元素可能需要退格删除两次才生效）
火狐浏览器优化退格光标的定位
轻量化@人员标签所绑定的数据，大幅度减轻html长度
优化文本非空逻辑isUnText判断
v1.3.7 => 修复搜索匹配人员时下次打开查询框旧值未清空问题
v1.3.6 => 移除输入框的边框样式 方便使用者将元素作为嵌入自己业务使用开发
v1.3.5 => @人员列表扩容拼音查询字段：pinyin 可以自行下载pinyin-pro以支持该交互效果
优化搜索展示图片的src来源，将第一次加载的头像资源缓存，避免重复请求获取
修复搜索边距样式
v1.3.2 => @人员列表扩容展示用户头像字段：avatar
v1.3.1 => 优化tag元素插入的代码逻辑
v1.3.0 => 新增人员筛选功能
新增tab标签删除功能
v1.2.0 => 新增@人员多选功能
人员搜索筛选功能即将推出
v1.1.1 => 人员筛选入口隐藏（尚未开发完毕）
v1.1.0 => 添加 placeholder 功能
所有交互产生的样式变更由 style 提取抽离至 class
添加新api isUnText 识别文本是否为空
v1.0.4 => 正式版发布
MIT
FAQs
纯JS封装的聊天框，交互功能对标钉钉微信聊天框，适用于JQuery/React/Vue等各大框架，兼容PC与H5的使用
The npm package chatarea receives a total of 1,008 weekly downloads. As such, chatarea popularity was classified as popular.
We found that chatarea demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.