如何实现在一篇文章中给"选中内容"添加标注（备注）信息

哈喽，各位好呀，今天小编又来分享一篇实战类的文章，如果你觉得还不错，希望给小编点个赞呗(✪ω✪)。

最近，小编在整理这大半年来在业务中开发的一些实用功能，想要将其中一些比较有用的功能记录下来，并且用最简单的形式分享出来，希望能对各位能有一丢丢帮助或者启发吧，那么我们话不多说，直奔主题。

写在开头

以下代码小编使用 Vue 技术栈来演示，并且为了效果好看一些，使用了 UI 库 ant-design-vue （以下简称AntV），当然用其他库也行，这个不是重点。

安装并引入AntV

安装：

npm install ant-design-vue@1.7.8 --save

在 main.js 文件中引入：

import Vue from 'vue'
import App from './App.vue'

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

这里我们使用全局引入的方式，更多其他引入方式可以自行去官网查看。传送门

数据准备

由于要给文章内容标注，需要大量的一些文案，这个你可以随便去网上搞一些即可。

添加标注

咱们先来看看整体的结构，好有个大概印象，主要有一块内容预览区和一块表格展示区。

<template>
  <div class="container">
    <div class="article">
      文章内容。。。。
    </div>
    <a-table
      class="table"
      :columns="columns"
      :data-source="tableData"
      bordered 
      :pagination="false"
      rowKey="markId"
      size="middle"
      >
      <div slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </div>
      <div slot="markId" slot-scope="text, record, index">
        <a-button @click="location(record)" type="link">{{ '定位' + (index + 1) }}</a-button>
      </div>
      <div slot="operation" slot-scope="text, record">
        <a-button @click="deleteMark(record)" type="link" size="small">删除</a-button>
      </div>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '序号', dataIndex: 'index', align: 'center', width: 70, scopedSlots: { customRender: 'index' } },
        { title: '定位', dataIndex: 'markId', align: 'center', width: 100, scopedSlots: { customRender: 'markId' } },
        { title: '内容', dataIndex: 'content', ellipsis: true },
        { title: '操作', dataIndex: 'operation', align: 'center', width: 100, scopedSlots: { customRender: 'operation' } }
      ],
      tableData: [],
    };
  },
  methods: {
    /** @name 定位 **/
    location(record) {

    },
    /** @name 删除标注 **/
    deleteMark(record) {

    }
  }
}
</script>

<style scoped>
.article {
  white-space: pre-wrap;
  width: 400px;
}
.container {
  display: flex;
}
.table {
  width: 600px;
}
</style>

创建交互按钮

接下来，咱们先来踏出第一步，实现鼠标"选中"时，在选中位置附近创建一个交互按钮。

<template>
  <div  @mouseup.stop="mouseup($event)" class="container">
    ...
    <a-button
      v-if="isAddButton"
      ref="addButton"
      class="add-button"
      type="primary"
    >添加审核意见</a-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ...,
      isAddButton: false
    }
  },
  created () {
    // 选中取消时(点击其他地方失去"焦点"), 隐藏按钮
    document.addEventListener('selectionchange', () => {
      if (this.isAddButton && !window.getSelection().toString()) {
        this.isAddButton = false
      }
    })
  },
  methods: {
    ...,
    /** @name 鼠标抬起 **/
    mouseup (e) {
      // 未选中
      if (!window.getSelection().toString()) return
      // 插入交互按钮
      this.isAddButton = true
      this.$nextTick(() => {
        const { clientX, clientY } = e
        const addButton = this.$refs.addButton.$el
        // 偏移量
        const offset = 5
        addButton.style.cssText = `top: ${clientY + offset}px; left: ${clientX + offset}px; z-index: 10`
      })
    },
  }
}
</script>

<style scoped>
...
.add-button {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>

offset 偏移量指的是偏离"鼠标最终抬起位置"的 x 与 y 的距离。

具体效果如下：

代码并不难，但需要注意在取消选中的时候要隐藏按钮，这里可以通过监听 selectionchange 事件来知道选中状态的变化，然后再通过 window.getSelection 来判断当前是否有选中内容。

记录选中信息

之后，我们就能给这个按钮添加交互事件了，这是本章最主要的过程，但咱们先看效果再细说。

从效果图中可以看到，我们需要完成三步过程：

其一，需要做一些限制，防止出行异常。

• 不能重复标记，不过这点可以根据你实际的业务需求来决定。
• 不可出现 HTML 标签截断的标记，虽然页面看到的只是一堆文字，但实际可能它们部分由标签包裹的，我们不能从标签中间切开标记。

其二，将选中内容的背景进行着色。

最后，获取选中内容添加到表格中。

<template>
  <div  @mouseup.stop="mouseup($event)" class="container">
    ...
    <a-button
      ...
      @click="addButton"
    >添加审核意见</a-button>
  </div>
</template>

<script>
export default {
  ...,
  methods: {
    ...,
    /** @name 添加标注 **/
    addButton() {
      this.isAddButton = false

      const selectedContent = window.getSelection()

      // 创建新节点
      const mark = document.createElement('span')
      mark.className = 'yd-mark'
      const id = `yd-${new Date().getTime()}`
      mark.id = id

      // 当前选区内容的区域对象。
      const range = selectedContent.getRangeAt(0)
      try {
        // 将 Range 对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处。
        range.surroundContents(mark)
      } catch (error) {
        this.$message.error('不能重复标记')
        console.warn('标签被截断')
        window.getSelection().removeAllRanges()
        return
      }

      // 获取选中内容所属的节点
      const anchorNode = selectedContent.anchorNode
      // 判断选中内容是否被标记了，通过标签中的 class 来判断
      const isRepeatMark = anchorNode.classList.contains('yd-mark')
      if (isRepeatMark) {
        this.$message.error('不能重复标记')
        window.getSelection().removeAllRanges()
        // 标签已经被插入文档中，需要移除
        this.deleteMark({ markId: id })
        return
      }

      // 选中的内容
      const content = window.getSelection().toString()

      // 移除选中状态
      window.getSelection().removeAllRanges()
      
      // 内容添加到表格
      this.tableData.push({
        markId: id,
        content
      })
    },
  }
}
</script>

<style scoped>
...
</style>

<style>
.yd-mark {
  background-color: #FFF8DB;
  padding: 0 0.2em;
  position: relative;
}
</style>

range.surroundContents 方法的作用是将 Range 对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处；并且如果 Range 断开了一个非 Text (en-US) 节点，只包含了节点的其中一个边界点，就会抛出异常。也就是说，如果节点(标签)仅有一部分被选中，则不会被克隆，整个操作会失败。

以上代码小编都写了详细的注释，剩下的就不多说啦，整个过程本质就是将获取到的内容放到一个 span 标签中，再插回页面中去，我们再给这个标签添加背景即可。

标注定位功能

由于我们给每个标注内容的 <span id='' /> 标签都加了 id ，那标注的定位功能可以通过 Element.scrollIntoView API 来实现，它能帮我们把元素滚动到用户可见范围。

<template>
  <div class="container">
    <div ref="article" class="article">
      文章内容。。。。
    </div>
    ...
  </div>
</template>

<script>
export default {
  ...,
  methods: {
    ...,
    /** @name 定位 **/
    location(record) {
      const content = this.$refs.article
      const targetNode = content.querySelector(`#${record.markId}`)
      targetNode.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      })
    },
  }
}
</script>

删除标注

最后，咱们需要支持删除功能，允许用户删除一些错误的标注。删除功能不仅仅需要我们删除表格中的数据，还需要把标注内容中的 span 标签给移除，还原成原本的内容。

...

<script>
export default {
  ...,
  methods: {
    ...,
    /** @name 删除标注 **/
    deleteMark(record) {
      const index = this.tableData.find(item => item.markId === record.markId)
      this.tableData.splice(index, 1)
      const content = this.$refs.article
      const targetNode = content.querySelector(`#${record.markId}`)
      const targetText = targetNode.firstChild.nodeValue
      const parentNode = targetNode.parentNode
      // 先插入新节点
      const textNode = document.createTextNode(targetText)
      parentNode.insertBefore(textNode, targetNode)
      // 再删除旧节点
      parentNode.removeChild(targetNode)
    }
  }
}
</script>

完整源码

点我点我

---

至此，本篇文章就写完啦，撒花撒花。

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。 老样子，点赞+评论=你会了，收藏=你精通了。