安装

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'
        },
        {
            id: '4',
            name: '今晚打老虎'
        }
    ],
    placeholder: '请输入文本框内容', // 输入提示文案
    maxLength: 2000, // 设置聊天框最大文本输入长度 默认没有限制（*如果业务场景没声明需要限制 就不要配置该值减少不必要的开销） 
    // 其余扩展配置项
    copyType: ['text', 'image'], // 允许在输入框内粘贴板粘贴的类型 默认值：['text']
    userProps: { // 转义userList中id,avatar,pinyin的属性名与实际业务数据属性名
        id: 'id',
        name: 'name',
        avatar: 'avatar',
        pinyin: 'pinyin'
    },
    needDialog: true, // 是否需要默认的交互弹窗，可以自定义支持
    needCallEvery: true, // 是否需要@全部选项
    callEveryLabel: '所有人', // 修改@全部的文案
    needCallSpace: false, // 是否需要像微信一样在 @标签 后面衔接一个空格之间的距离
    wrapKeyFun: (event) => event.ctrlKey && ['Enter'].includes(event.key), // 自定义折行键
    sendKeyFun: (event) => !event.ctrlKey && ['Enter'].includes(event.key) // 自定义发送键
})

API

// 修改实例对象的配置项， 配置属性非必传 按需传入修改
chat.updateConfig({
    userProps: { id: 'userId', name: 'userName' },
    userList: [{ userId: 'NEW1', userName: '新的人员' }],
    needCallEvery: false,
    placeholder: '新的提示语',
    maxLength: 3000,
    // ...其余配置
})

// 获取聊天框精简后的文本内容
chat.getText()

// 获取聊天框精简后的html内容
chat.getHtml()

// 获取聊天框内容里 配置项userList 所包含@人员标签的人员信息
chat.getCallUserList()

// 获取聊天框内容里所有@人员标签的人员信息
chat.getCallUserTagList()

// 将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.clear()

// 获取聊天框内容是否为空
chat.isEmpty()

// 用于页面或组件销毁时卸载在body内挂载的元素
chat.dispose()

// 禁止聊天框编辑
chat.disabled()

// 允许聊天框编辑并将光标定向到聊天内容末尾
chat.enable()

// 添加事件订阅
chat.addEventListener('operate', () => {})

// 卸载事件订阅
chat.removeEventListener('operate', () => {})

// PC唤起人员光标选择弹窗
chat.showPCPointDialog()

// PC唤起人员多选选择弹窗
chat.showPCCheckDialog()

// H5唤起人员多选选择弹窗
chat.showH5Dialog()

// 撤销上一次聊天框操作
chat.undo()
    
// 恢复上一次撤销操作
chat.redo()

// 修改PC光标选择弹窗默认文案
chat.revisePCPointDialogLabel({
    title: '群成员',
    checkLabel: '多选'
})

// 修改PC多选选择弹窗默认文案
chat.revisePCCheckDialogLabel({
    title: '选择要@的人',
    searchPlaceholder: '搜素人员名称',
    searchEmptyLabel: '没有匹配到任何结果',
    userTagTitle: '研讨成员列表',
    checkAllLabel: '全选',
    checkEmptyLabel: '请选择需要@的成员',
    confirmLabel: '确定',
    cancelLabel: '取消'
})

// 修改H5选择弹窗默认文案
chat.reviseH5DialogLabel({
    title: '选择提醒的人',
    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

版本更新日志

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 => 正式版发布

LICENSE

MIT