## 前言在我们日常的网络社交中，`@XXX` 功能可以说是一个比较常见的功能了。本文将结合实践，介绍一种可以快速实现 `@` 选人或引用数据的方式。 ## 功能需求简单的说一下需求： 1、在输入框中输入 `@` ，弹出浮窗，然后可以选择浮窗中相关的数据； 2、在输入框中输入 `#` ，弹出浮窗，然后可以选择浮窗中相关的数据； 3、`@` 和 `#` 引用的数据要包含名称和id等，最终要传给后端； 4、删除 `@` 和 `#` 引用的数据时，需要整体删除； 5、`@` 和 `#` 引用的数据需要被标注成不同的颜色。大致就是这样。 ## 技术方案在网上参考了不少大佬的文章，也大致了解了一些社交平台的实现方式，有兴趣的朋友可以看看文末的参考。最终因为功能的契合度和时间原因，我选择了开源库: [tributejs](https://github.com/zurb/tribute) 。这个开源库有原生，Vue 等例子，就是没有 React 的例子，但是问题不大，使用方式都是大同小异。 ## 具体实现本文的 `@XXX` 功能是 tributejs + React实现的，所以 React 技术栈的同学可以直接参考后面的例子，其他技术栈的同学可以参考 [tributejs](https://github.com/zurb/tribute) 官方的实现。 ### @功能实现首先当然是要下载 tributejs： ``` yarn add tributejs 或者 npm install tributejs ``` 然后就是引入 tributejs，对想要的功能进行配置，具体各项配置的意义，可以直接到 tributejs 的 [GitHub](https://github.com/zurb/tribute) 上查看。最后可以给编辑器加一些自定义的样式： index.tsx ```JavaScript import React, { useEffect, useState, useRef } from 'react'; import Tribute from "tributejs"; import './index.less'; const AtDemo = () => { 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); }, []) const renderEditor = (_atList: any[], _poundList: any[]) => { let tributeMultipleTriggers = new Tribute({ allowSpaces: true, noMatchTemplate: function () { return null; }, collection: [ { selectTemplate: function(item) { if (this.range.isContentEditable(this.current.element)) { return ( ` @${item.original.value} ` ); } return "@" + item.original?.value; }, values: _atList, menuItemTemplate: function (item) { return item.original.value; }, }, { trigger: "#", selectTemplate: function(item) { if (this.range.isContentEditable(this.current.element)) { return ( ` #${item.original.name} ` ); } return "#" + item.original.name; }, values: _poundList, lookup: "name", fillAttr: "name" } ] }); tributeMultipleTriggers.attach(document.getElementById("editorMultiple") as HTMLElement); } return (

) } export default AtDemo; ``` index.less ``` .at-demo { background-color: #fff; padding: 24px; .at-item, .pound-item { color: #2ba6cb; } } .tribute-container { position: absolute; top: 0; left: 0; height: auto; overflow: auto; display: block; z-index: 999999; } .tribute-container ul { margin: 0; margin-top: 2px; padding: 0; list-style: none; background: #fff; border: 1px solid #3c98fa; border-radius: 4px; } .tribute-container li { padding: 5px 5px; cursor: pointer; border-radius: 4px; } .tribute-container li.highlight { background: #eee; } .tribute-container li span { font-weight: bold; } .tribute-container li.no-match { cursor: default; } .tribute-container .menu-highlighted { font-weight: bold; } .tribute-demo-input { outline: none; border: 1px solid #d9d9d9; padding: 4px 11px; border-radius: 2px; font-size: 15px; min-height: 100px; cursor: text; } .tribute-demo-input:hover { border-color: #3c98fa; transition: all 0.3s; } .tribute-demo-input:focus { border-color: #3c98fa; } [contenteditable="true"]:empty:before { content: attr(placeholder); display: block; color: #ccc; } #test-autocomplete-container { position: relative; } #test-autocomplete-textarea-container { position: relative; } .float-right { float: right; } ``` 我们可以看看效果，还是很不错的： ![演示.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d90258a779bf44a8acb8c13dcee03077~tplv-k3u1fbpfcp-watermark.image?) 被引用的数据也是被整体删除的： ![演示2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76da5e719346416c921aa7f941aac0bc~tplv-k3u1fbpfcp-watermark.image?) ### 获取编辑器中的数据我们在编辑器中输入了我们想要的数据，那最终都是要获取其中的数据并且传递给后端的： ```JavaScript ... import { Button } from 'antd'; // 转义HTML const htmlEscape = (html: string) => { return html.replace(/[<>"&]/g,function(match,pos,originalText){ switch(match){ case "<": return "<"; case ">": return ">" case "&": return "&"; case "\"": return """; default: return match; } }); } const AtDemo = () => { ... const getDataOfEditorMultiple = () => { const childrenData = document.getElementById('editorMultiple')?.innerHTML; console.log('childrenData', childrenData) const toServiceData = htmlEscape(childrenData); console.log('toServiceData', toServiceData) } return (

) } ``` 我们可以直接通过 `getDataOfEditorMultiple` 方法直接获取编辑器中的数据，并且转义之后发送给后端。 ### 实时获取编辑器中被引用的数据我们有时候可能需要实时的监听编辑器中所数据的数据，或者是被引用的数据。这时我们可以调用 `oninput` 这个方法。当然也可以在其他情况调用 `onblur` 和 `onfocus` 这两个方法，顾名思义就是失去焦点时和获取焦点时。完整的代码如下： ```JavaScript import React, { useEffect, useState, useRef } from 'react'; import './index.less'; import Tribute from "tributejs"; import { Button } from 'antd'; const htmlEscape = (html: string) => { return html.replace(/[<>"&]/g,function(match,pos,originalText){ switch(match){ case "<": return "<"; case ">": return ">" case "&": return "&"; case "\"": return """; default: return match; } }); } const AtDemo = () => { 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); }, []) const renderEditor = (_atList: any[], _poundList: any[]) => { let tributeMultipleTriggers = new Tribute({ allowSpaces: true, noMatchTemplate: function () { return null; }, collection: [ { selectTemplate: function(item) { if (this.range.isContentEditable(this.current.element)) { return ( ` @${item.original.value} ` ); } return "@" + item.original?.value; }, values: _atList, menuItemTemplate: function (item) { return item.original.value; }, }, { trigger: "#", selectTemplate: function(item) { if (this.range.isContentEditable(this.current.element)) { return ( ` #${item.original.name} ` ); } return "#" + item.original.name; }, values: _poundList, lookup: "name", fillAttr: "name" } ] }); tributeMultipleTriggers.attach(document.getElementById("editorMultiple") as HTMLElement); } const getDataOfEditorMultiple = () => { const childrenData = document.getElementById('editorMultiple')?.innerHTML || ''; console.log('childrenData', childrenData) const toServiceData = htmlEscape(childrenData); console.log('toServiceData', toServiceData) } const onInput = () => { const atItemList = document.getElementsByClassName('at-item'); Array.prototype.forEach.call(atItemList, function(el) { console.log(el.dataset.atkey); console.log(el.dataset.atvalue); }); } return (

) } export default AtDemo; ``` ## 几个关键点的实现这里提一下几个关键功能点的实现原理。 - 编辑器的输入框利用的是普通的 `div` 标签，然后采用 `contenteditable="true"` 这个属性来实现的； - 引用数据的浮窗定位可以利用 [Selection](https://developer.mozilla.org/zh-CN/docs/Web/API/Selection)对象来获取； - 被 @ 或 # 引用的数据，想要被一次性删除，可以在被 @ 或 #的数据外包含一个 ``，表示不可编辑的标签； - 把被引用的数据定义为特定的颜色，这个因为我们在输入框中插入引用数据时，被引用的数据是被HTML标签包裹着的，所以我们只需要对相关的HTML进行样式设置就好了； - 想要获取被引用数据中的多个属性的值，可以和上面的例子一样，利用HTML5的自定义属性 `data-xxx` 来保存我们想要的属性值，然后通过遍历标签 `el.dataset.xxx` 获取我们想要的属性的值。 ## 最后本文介绍了一种可以在前端快速实现 `@xxx` 选人或引用数据的功能，在部分情景下也算是比较好的解决方案了。有兴趣的同学可以看看文末参考文章中其他大佬们的实现方式。 ## 参考 https://github.com/zurb/tribute https://segmentfault.com/a/1190000037660531 https://segmentfault.com/a/1190000007846897 https://juejin.cn/post/6982251438332182542 https://mp.weixin.qq.com/s/YP6H6CHkUd97ThDtEoXzaw