--- theme: smartblue highlight: a11y-dark --- 我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t") 基于vue手把手教你实现一个拥有@人功能的文本编辑器（其实就是微信群聊的输入框） ## 知识前置 1. **`Selection`** 对象，表示用户选择的文本范围或插入符号的当前 - https://developer.mozilla.org/zh-CN/docs/Web/API/Selection 2. **`contenteditable`** 是一个枚举属性，表示元素是否可被用户编辑。 - https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable ## 需求分析 1. 文本框能够输入文本（太简单了） 2. 能够at人 ## 实现 ### 创建能够输入文本的文本框在这里主要利用 **`contenteditable`** 属性，让创建的 **`div`** 能够编辑利用input事件监听数据变化，将数据同步出去 ```html ``` ```html ``` 效果如下图所示

微信截图_20220910134520.png

这个时候我们就实现了一个能够绑定数据的文本输入框，第一个需求完美实现，接下来实现第二个需求（开始折磨） ### 添加at功能这里的需求主要分四步走 1. 当用户输入@字符时，弹出用户选择列表 2. 当用户点击@的人时，收回@列表 3. 将@的人嵌入到文本框中 4. 删除@的人时，要直接整块删除首先我们先实现一个用户选择的列表，这里主要涉及到的都是界面的编辑和动画的设置，不展开描述，直接上效果图`**（完整代码会在文末给出）**`

微信截图_20220910142332.png

接着我们要改造input函数，检测当用户输入为`@`符号时，弹出选择框 ```js input(e) { if (e.data === '@') { // 弹出用户选择框 this.$refs.UserList.show() // 失去焦点，退出手机的软体键盘 this.editor.blur() } this.$emit('input', this.getEditorHtml()) }, ``` 当用户点击要@的人时，关闭选择列表，同时将@人的人插入到文本框中 ```js userItemClick(item) { const dom = this.createAtDom(item) this.$refs.editor.innerHTML = this.$refs.editor.innerHTML + dom.outerHTML this.$refs.UserList.close() }, createAtDom(item) { const dom = document.createElement('span') dom.classList.add('active-text') // 这里的contenteditable属性设置为false，删除时可以整块删除 dom.setAttribute('contenteditable', 'false') // 将id存储在dom元素的标签上，便于后续数据处理 dom.setAttribute('data-id', item.id) dom.innerHTML = ` @${item.name} ` return dom }, ``` 效果入下图所示

微信截图_20220910210242.png

相信有不少朋友已经发现问题了,这种方式只能怪将`@`的人添加到文本的最末尾，但如果我编辑文本的时候，光标的位置不是在文本的最后，而是在文本之间的某个位置，那此时我们这么添加`@`的人就会有点反直觉。所以我们在弹出选择列表的时候，要把当前光标所处的位置标记下来，插入时，就插入到对应的位置上。所以此时就要抛出我们本文最重要的一个对象 **`Selection`** 对象我们要利用 **`Selection`** 对象的[ anchorOffset ](https://developer.mozilla.org/zh-CN/docs/Web/API/Selection/anchorOffset)属性去获取当前焦点的位置，此时我们改造input函数，添加 **`saveIndex`** 方法，在弹出文本框失焦之前，保存当前焦点的位置。 ```js //改造input函数 input(e) { if (e.data === '@') { // 保存焦点位置 this.saveIndex() // 弹出用户选择框 this.$refs.UserList.show() // 失去焦点，退出手机的软体键盘 this.editor.blur() } this.$emit('input', this.getEditorHtml()) }, // 添加saveIndex方法 async saveIndex() { // 获取selection对象 const selection = getSelection() // 保存当前焦点的位置 this.selectionIndex = selection.anchorOffset }, ``` ```js // 改造userItemClick函数 userItemClick(item) { const dom = this.createAtDom(item) this.addData(item) this.$refs.UserList.close() }, // 添加dom节点到指定位置 addData(item){ const html = this.editor.innerHTML const leftInnerHtml = html.substring(0, this.selectionIndex - 1) const dom = this.createAtDom(item) const rightInnerHtml = html.substring(this.selectionIndex, html.length) this.editor.innerHTML = leftInnerHtml + dom.outerHTML + rightInnerHtml } ``` 这个时候我们就可以把`@`的人添加到我们之前光标的位置了,效果如下如所示

微信截图_20220910205805.png

但在某天，你突发奇想，想同时对很多个女神发出邀请，这个时候你发现，`@`多人的时候，出现问题了

微信截图_20220910211034.png

我们插入的`@`人的节点被硬生生拆成了字符串，这很明显跟我们的预期有差别呀，这个时候我们应该分析一下我们编辑时的dom结构，如下图所示

微信截图_20220910214707.png

微信截图_20220910214945.png

为了便于理解我画了个简单的图

微信截图_20220910233407.png

我们在插入`dom节点`之前，文本框的所有内容都是属于`editor节点`下唯一一个[textNode](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createTextNode)节点，插入`dom节点`之后，`editor节点`新增了一个子节点，而 **`Selection.anchorOffset`** 这个属性获取到的焦点位置，实际上是相对于当`前所处node节点`而言的（←理解这个概念，非常重要）也就是说我们第一次插入`dom节点`，焦点位置是相对于当前节点，也就是`editor节点`下的`唯一一个textNode节点`计算第二次插入`dom节点`，焦点位置是相对于当前节点，也就是`当前textNode节点`计算后续插入的`dom节点`，焦点位置计算方式同上所以当我们有如下需求的时候

微信截图_20220910221239.png

**`Selection.anchorOffset`** 的返回值是5，而我们的`addData`方法，实际上是从`editor.innerHtml`的第一个位置开始算，第五个位置刚好插到了`span节点`的里面，所以就出现了上文乱码的问题。所以我们解决的方案，就是在保存焦点位置的时候，同时保存当前编辑的那个`textNode节点`，那我们怎么找到当前正在编辑的那个`textNode节点`呢？ **`Selection`** 对象提供了一个方法 [Selection.containsNode()](https://developer.mozilla.org/zh-CN/docs/Web/API/Selection/containsNode) mdn文档是这么描述的：判断指定的节点是否包含在 Selection 中 (是否被选中) 在我们这个场景中，通俗点讲就是，我这个节点到底是不是编辑的节点？是你就返回`true`，不是就`false` 所以我们可以在弹出用户选择框之前，遍历一下`editor节点`的子节点，找出我们当前编辑的那个`textNode节点` ```js // 改造一下saveIndex async saveIndex() { const selection = getSelection() this.selectionIndex = selection.anchorOffset const nodeList = this.editor.childNodes // 保存当前编辑的dom节点 for (const [index, value] of nodeList.entries()) { // 这里第二个参数要配置成true，没配置有其他的一些小bug，这里不展开讲，详细可以看文档 if (selection.containsNode(value, true)) { this.dom = value this.domIndex = index } } }, ``` 现在当前编辑的节点和编辑的位置都已经保存下来了，剩下的就是把`@`人的节点插入到我们编辑的那个`textNode`节点里面就完成了。 ```js // 改造一下addData方法 addData(item) { const html = this.dom.textContent const leftText = html.substring(0, this.selectionIndex - 1) const dom = this.createAtDom(item) const rightText = html.substring(this.selectionIndex, html.length) this.dom.textContent = leftText + dom.outerHTML + rightText }, ``` 然而，当我们再次运行代码调试的时候，出现了我们预期外的结果

微信截图_20220910225601.png

是我们代码有问题吗？说是其实不算是，说不是，其实也算是（废话）其实是因为我们编辑的是`textNode节点`，而`textNode节点`就算包含了`dom结构`，他也是把结构当成文本输出到页面上，所以在这里 - 我们应该创建一个新的结构，也就是我们的[文档片段DocumentFragment](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment) - 然后把我们的节点结构插入到`DocumentFragment`中 - 接着利用[Node.insertBefore()](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore)方法，把`DocumentFragment`插入到`原来编辑的textNode节点`之前，再用[Node.removeChild()](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild)方法把原来编辑的`textNode节点`删除 - 这样就可以实现正常的插入为了方便理解，可以看一下流程图

微信截图_20220910231718.png

```js addData(item) { const text = document.createDocumentFragment() const span = document.createElement('span') const html = this.dom.textContent // 左边的节点 const textLeft = document.createTextNode(html.substring(0, this.selectionIndex - 1) + '') // 这里如果textLeft是个空的文本节点，会导致@用户无法删除，这里添加一个判断，如果是空，则插入一个空的span节点 text.appendChild(textLeft.textContent ? textLeft : span) // 加入@人的节点 text.appendChild(this.createAtDom(item)) // 右边的节点 const textRight = document.createTextNode(html.substring(this.selectionIndex, html.length)) textRight.textContent && text.appendChild(textRight) this.editor.insertBefore(text, this.dom) this.editor.removeChild(this.dom) }, ``` 当我们处理到这里时，就可以多次at想要at的人，效果如图

微信截图_20220910233756.png

后续我们要将数据提取出来，可以根据v-model绑定的value进行解析，把插在标签里的数据提取出来，也可以根据自己的业务插入一些数据，这里不是重点，也不展开讲 ## 后记基本上文本编辑器的核心逻辑到这里就讲完了，但是这个demo在做的过程中，有好几个地方做了优化，特别是针对移动端软体键盘的进入和离开，还有焦点的对焦和失焦，都做了一些处理，但是在文章里头没有展开讲想要详细了解的大佬们可以到我github仓库下载源码 [https://github.com/adouni1996/editor](https://github.com/adouni1996/editor) 技术拙劣，第一次做这种组件，代码入不了大佬的法眼还望轻喷！感谢！