前端web实现（@、At、Aite）选人或引用数据

前言在我们日常的社交中，@XXX功能可以说是一个比较常见的功能。本文将结合实践介绍一种快速实现@选择或引用数据的方法。功能需求简单说一下需求：1、在输入框中输入@弹出浮窗，然后可以在浮窗中选择相关数据；2、在输入框中输入#弹出浮窗，然后在浮窗中可以选择数据相关数据；3、@和#引用的数据应该包括name和id等，最后传递给后端；4、删除@和#引用的数据时，需要整体删除；5、@和#需要引用的数据用不同的颜色标示。就是这样。对于技术方案，参考了网上很多大咖的文章，也大致了解了一些社交平台的实现方式。有兴趣的朋友可以参考文末的参考资料。最后因为功能和时间的契合，选择了开源库：tributejs。这个开源库有native、vue等例子，没有react的例子，不过问题不大，使用方法都差不多。本文中@XXX功能的具体实现是通过tributejs+React实现的，所以React技术栈的同学可以直接参考后面的例子，其他技术栈的同学可以参考tributejs的官方实现。@功能实现首先当然是下载tributejs：yarnaddtributejs或者npminstalltr??ibutejs然后引入tributejs配置需要的功能。各个配置的含义可以直接在tributejs的github上查看。最后，您可以向编辑器添加一些自定义样式：index.tsximportReact,{useEffect,useState,useRef}from'react';从“tributejs”导入贡品；导入“./index.less”；constAtDemo=()=>{const[atList,setAtList]=useState([{key:"1",value:"小明",position:"前端开发工程师"},{key:"2",value:"小李",position:"后端开发工程师"}]);const[poundList,setpoundList]=useState([{name:"JavaScript",explain:"前端开发语言"},{name:"Java",explain:"后端开发语言之一"}]);useEffect(()=>{renderEditor(atList,poundList);},[])constrenderEditor=(_atList:any[],_poundList:any[])=>{lettributeMultipleTriggers=newTribute({allowSpaces:true,noMatchTemplate:function(){returnnull;},collection:[{selectTemplate:function(item){if(this.range.isContentEditable(this.current.element)){return(`@${item.original.值}`);}return"@"+item.original?.value;},值:_atList,menuItemTemplate:function(item){returnitem.original.value;},},{trigger:"#",selectTemplate:function(item){if(this.range.isContentEditable(this.current.element)){return(`#${item.original.name}`);}return"#"+item.original.name;}，值：_poundList，查找：“名称”，fillAttr：“名称”}]}）；tributeMultipleTriggers.attach（document.getElementById（“editorMultiple”）作为HTMLElement）；}return(