位置: IT常识 - 正文

富文本实现@选择人(富文本功能)

编辑:rootadmin
准备工作 npm i wangeditor --save npm i caret-pos --save 组件: <!--富文本--> <div :id="editorEleId" @keydown="onKeyDownInput($event)" @click="onClickEditor" ></ ...

推荐整理分享富文本实现@选择人(富文本功能),希望有所帮助,仅作参考,欢迎阅读内容。

富文本实现@选择人(富文本功能)

文章相关热门搜索词:富文本怎么用,富文本js,富文本js,实现富文本编辑器,富文本使用,富文本类型,实现富文本编辑器,实现富文本编辑器,内容如对您有帮助,希望把文章链接给更多的朋友!

准备工作

npm i wangeditor --savenpm i caret-pos --save

组件:

<!--富文本--><div :id="editorEleId" @keydown="onKeyDownInput($event)" @click="onClickEditor"></div><!-- 成员选择 --> <div class="userPopupList" :style="{left: left + 'px', top: top + 'px'}" v-show="show"> <el-input v-model="userName" ref="input"></el-input> <ul> <li v-for="user in protectPersons.filter((item) => item.workNick.includes(this.userName))" :key="user.userId" @click="createSelectElement(user.workNick,user.userId)" > <el-avatar :size="22" :src="user.icon" class="m-r-10" style="vertical-align: middle" > <img src="../../assets/images/defaultIcon.gif"/> </el-avatar> <span>{{user.workNick}}</span> </li> </ul></div>.userPopupList{ position: fixed; z-index: 9999; /deep/input{ border:none; background: transparent; } ul{ max-height: 200px; overflow-y: auto; border: 1px solid #dbdada; background: #fff; padding: 10px 10px 0; border-radius: 3px; li{ margin-bottom: 5px; padding: 5px 10px; &:hover{ background: #f6f5f5; } } }}position:any = {};left:number = 0;top:number = 0;show:boolean = false;isRendering: boolean = false;userName: string = '';users:any = []; ...富文本初始化this.editor.config.onchange = () => { // 生成@的标签的时候会触发渲染、此时不要记录光标坐标 if (this.isRendering === false) { this.setRecordCoordinates() // 记录坐标 }else { this.isRendering = false; }};// 每次点击获取更新坐标onClickEditor() { this.setRecordCoordinates()}// 获取当前光标坐标setRecordCoordinates() { try { // getSelection() 返回一个 Selection 对象,表示用户选择的文本范围或光标的当前位置。      if(!this.show){       const selection:any = window.getSelection();       this.position = {       range: selection.getRangeAt(0),       selection: selection       }      } } catch (error) { console.log(error, '光标获取失败了~') }}// keydown触发事件 记录光标onKeyDownInput(e:any) { const isCode = ((e.keyCode === 229 && e.key === '@') || (e.keyCode === 229 && e.code === 'Digit2') || e.keyCode === 50) && e.shiftKey if (isCode) { this.setRecordCoordinates(); // 保存坐标 this.getPosition(); // 显示选择框,定时原因:1、@会插入到input中,2、光标位置也是input的,会导致插入位置错误 setTimeout(()=>{ this.show = true this.$nextTick(()=>{ (this.$refs.input as any).focus(); }) },200) }}//弹窗列表 - 选人 - 生成@的内容createSelectElement(name:string, id:string, type = 'default') { // 获取当前文本光标的位置。 const { range } = this.position // 生成需要显示的内容 let spanNodeFirst:any = document.createElement('span') spanNodeFirst.className = 'user-node' spanNodeFirst.style.color = '#409EFF' spanNodeFirst.innerHTML = `@${name}&nbsp;` // @的文本信息 spanNodeFirst.dataset.id = id // 用户ID、为后续解析富文本提供 spanNodeFirst.contentEditable = false // 当设置为false时,富文本会把成功文本视为一个节点。 // 需要在字符前插入一个空格否则、在换行与两个@标签连续的时候导致无法删除标签 let spanNode = document.createElement('span'); spanNode.innerHTML = '&nbsp;'; //创建一个新的空白的文档片段,拆入对应文本内容 let frag = document.createDocumentFragment() frag.appendChild(spanNode); frag.appendChild(spanNodeFirst); frag.appendChild(spanNode); // 如果是键盘触发的默认删除面前的@,前文中我们没有阻止@的生成所以要删除@的再插入ps:如果你是数组遍历的请传入type 不然会一直删除你前面的字符。 if (type === 'default') { const textNode = range.startContainer; range.setStart(textNode, range.endOffset - 1); range.setEnd(textNode, range.endOffset); range.deleteContents(); } this.isRendering = true; // 判断是否有文本、是否有坐标 if ((this.editor.txt.text() || type === 'default')&& this.position && range) { range.insertNode(frag) } else { // 如果没有内容一开始就插入数据特别处理 this.editor.txt.append(`<span data-id="${id}" contentEditable="false">@${name}&nbsp;</span>`) } this.show = false; this.userName = '';}// 获取当前光标位置getPosition () { const ele:any = this.editor.$textElem.elems[0]; const pos = position(ele) const off = offset(ele) const parentW = ele.offsetWidth // 这个是弹窗列表 const childEle:any = document.getElementsByClassName("userPopupList") const childW = childEle.offsetWidth // 弹框偏移超出父元素的宽高 if (parentW - pos.left < childW) { this.left = off.left - childW } else { this.left = off.left } this.top = off.top - 4}//提交评论sure(ev: any) { ... const users = document.querySelectorAll('.user-node'); let userIds:string[] = []; users.forEach((item:any) => { userIds.push(item.getAttribute('data-id')) }) ...}
本文链接地址:https://www.jiuchutong.com/zhishi/310445.html 转载请保留说明!

上一篇:Python如何实现时间累加的计算器(python @time)

下一篇:python如何查看hdf5文件(Python如何查看中风患者两表的数据量)

  • 一般企业网站推广十大方法(企业网站的一般内容)

    一般企业网站推广十大方法(企业网站的一般内容)

  • 奥克斯破壁机显示e1是怎么回事(奥克斯破壁机显示E1)

    奥克斯破壁机显示e1是怎么回事(奥克斯破壁机显示E1)

  • word怎么做括号分支(word文档怎么弄括号)

    word怎么做括号分支(word文档怎么弄括号)

  • 华为nova5pro支持变焦吗(华为nova5pro支持红外遥控吗)

    华为nova5pro支持变焦吗(华为nova5pro支持红外遥控吗)

  • 苹果简短验证不显示(苹果简短验证不了手机)

    苹果简短验证不显示(苹果简短验证不了手机)

  • 手机wps输入数字变乱码(手机wps输入数字变成E)

    手机wps输入数字变乱码(手机wps输入数字变成E)

  • 手机号码被标记了怎么消除(手机号码被标记广告推销怎么取消)

    手机号码被标记了怎么消除(手机号码被标记广告推销怎么取消)

  • 小米10充满电怎么没有提示(小米充满电怎么自动断电)

    小米10充满电怎么没有提示(小米充满电怎么自动断电)

  • 魅族仅限usb充电充电慢(魅族仅限usb充电怎么办)

    魅族仅限usb充电充电慢(魅族仅限usb充电怎么办)

  • 无线拒绝接入什么意思(无线拒绝接入啥意思)

    无线拒绝接入什么意思(无线拒绝接入啥意思)

  • 夏天手机充电很慢(夏天手机充电很烫)

    夏天手机充电很慢(夏天手机充电很烫)

  • 苹果11无服务怎么回事(苹果无服务怎么恢复正常)

    苹果11无服务怎么回事(苹果无服务怎么恢复正常)

  • c语言void和int的区别(void 与int)

    c语言void和int的区别(void 与int)

  • 电箱pe线是什么意思(pe线与电箱如何连接)

    电箱pe线是什么意思(pe线与电箱如何连接)

  • vivo手机怎样把即刻天气添加到桌面(vivo手机怎样把游戏隐藏起来)

    vivo手机怎样把即刻天气添加到桌面(vivo手机怎样把游戏隐藏起来)

  • 为啥手机发烫(充电为啥手机发烫)

    为啥手机发烫(充电为啥手机发烫)

  • 苹果零售店和授权经销商有什么区别(苹果零售店和授权店有什么区别)

    苹果零售店和授权经销商有什么区别(苹果零售店和授权店有什么区别)

  • 苹果11是双层主板吗(苹果11是双层主屏吗)

    苹果11是双层主板吗(苹果11是双层主屏吗)

  • 微信签名为什么不显示(微信签名为什么改了还是原来的)

    微信签名为什么不显示(微信签名为什么改了还是原来的)

  • word字体变大快捷键(word字体变大按什么键)

    word字体变大快捷键(word字体变大按什么键)

  • 苹果手表后面绿灯怎么关(苹果手表后面绿灯)

    苹果手表后面绿灯怎么关(苹果手表后面绿灯)

  • 如何查近期微信聊天的人(微信怎样可以查到前几天信息)

    如何查近期微信聊天的人(微信怎样可以查到前几天信息)

  • 充电器线怎么分正负极(手机充电器线里面有四根线怎么分)

    充电器线怎么分正负极(手机充电器线里面有四根线怎么分)

  • vue可以拍单张照片吗(vue每张照片怎么设定出现秒数)

    vue可以拍单张照片吗(vue每张照片怎么设定出现秒数)

  • 蓝牙耳机弹窗怎么设置(蓝牙耳机弹窗怎么设置安卓)

    蓝牙耳机弹窗怎么设置(蓝牙耳机弹窗怎么设置安卓)

  • w10系统不激活会怎么样(win10不激活会卡吗)

    w10系统不激活会怎么样(win10不激活会卡吗)

  • powerbeats pro 可以和安卓连接吗(powerbeatspro可以用快充吗)

    powerbeats pro 可以和安卓连接吗(powerbeatspro可以用快充吗)

  • 即征即退需要缴纳税款吗
  • 美国个税计算器2021计算器
  • 税收减免的定义
  • 增值税发票综合服务平台错误代码35
  • 没进项发票的开销项发票多少税?
  • 劳务报酬自行申报时间
  • 收据怎么粘贴在费用报销单上
  • 利润表的营业成本包括哪些
  • 应付职工薪酬期末余额怎么算
  • 软件公司的销售
  • 国外出差差旅费
  • 委托销售怎么做分录
  • 材料采购计入什么会计科
  • 小规模纳税人工程服务的增值税率
  • 公司单独买医保
  • 年终奖个税公式 2022
  • 逾期申报会对纳税人产生哪些不良影响?
  • 出口退税函调是什么意思
  • 一般户转钱到基本户
  • win10系统升级软件
  • windows10无法打开图片
  • macbookpro finder
  • 什么是进项税和销项税
  • mac和mac之间怎么传东西
  • 无法登陆wifi怎么登陆路由器
  • 如何处理库存差异问题
  • system占用cpu过高怎么解决
  • 计提五险一金的分录怎么写
  • 最早的操作系统被称为什么操作系统
  • 会计虚假做账
  • phpstudy8
  • vue中的组件有几类
  • 投资公司收到境外债务
  • 稳岗补贴怎么发放给员工
  • IntersectionObserver 翻译
  • 毕业设计基于web难还是JAVA
  • 自建自用 房产税
  • 残疾人加计扣除工资按应发还是实发
  • 为什么增值税最后的负税人是消费者企业还要尽量少交税
  • 记账复核是谁
  • 土地增值税采用
  • 事业结余期末余额在借方
  • phpcms怎么用
  • 营销策划协议
  • 临时工工资账务处理该怎么进行
  • 品种法成本核算的程序有哪几步?
  • SQL SERVER 2000通讯管道后复用劫持
  • 库存股属于什么账户
  • 实收资本在核算上有哪些要求
  • 汽车报废补贴18000
  • 厂家给经销商的活动方案怎么写
  • 现在增值税是多少个点
  • 为什么要进行结账和对账
  • 个体户所得税税率多少
  • 城乡居民死亡后需要办理什么手续
  • 资本性支出是什么活动
  • 增资扩股步骤
  • 需要计提坏账准备吗
  • 购入固定资产一次性税前扣除
  • 以前年度调增的收入下一年如何申报
  • mysql使用or会索引
  • mysql一闪而退
  • ubuntu20.04升级
  • mac升级最新系统会卡么
  • mac取消开机启动项
  • win7宽带连接改成无线网络
  • windows媒体中心关不掉
  • 你可能不知道的中融新大
  • unity怎么bake
  • js必学知识点
  • android studio 新建项目只有.idea文件
  • ndk sdk
  • python三角形角度
  • javascript的数据类型有哪些?
  • javascript要学到什么程度
  • listview属性设置
  • 申报税务登记日期怎么填
  • 工会经费扣除标准2022
  • 合肥新房商铺
  • 所得税与增值税区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设