记录--vue3 + mark.js | 实现文字标注功能

2023-10-23 18:50 由林恒发表于 #前端开发

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

页面效果

具体实现

新增

1、监听鼠标抬起事件，通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。
2、通过 选中的文字长度是否大于0或window.getSelection().isCollapsed (返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置，即是否框选了)来判断是否展示标签选择的弹窗。
3、标签选择的弹窗采用 子绝父相 的定位方式，通过鼠标抬起的位置确认弹窗的 top 与 left 值。

    const TAG_WIDTH = 280 //自定义最大范围，以保证不超过内容的最大宽度
    const tagInfo = ref({
     visible: false,
     top: 0,
     left: 0,
    })
    const el = document.getElementById('text-container')
    //鼠标抬起
    el?.addEventListener('mouseup', (e) => {
      const text = window?.getSelection()?.toString() || ''
      if (text.length > 0) {
        const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300
        tagInfo.value = {
          visible: true,
          top: e.offsetY + 40,
          left: left,
        }
        getSelectedTextData()
      } else {
        tagInfo.value.visible = false
      }
      //清空重选/取消数据
      resetEditTag()

  const selectedText = reactive({
    start: 0,
    end: 0,
    content: '',
  })
  //获取选取的文字数据
  const getSelectedTextData = () => {
    const select = window?.getSelection() as any
    console.log('selectselectselectselect', select)
    const nodeValue = select.focusNode?.nodeValue
    const anchorOffset = select.anchorOffset
    const focusOffset = select.focusOffset
    const nodeValueSatrtIndex = markContent.value?.indexOf(nodeValue)
    selectedText.content = select.toString()
    if (anchorOffset < focusOffset) {
      //从左到右标注
      selectedText.start = nodeValueSatrtIndex + anchorOffset
      selectedText.end = nodeValueSatrtIndex + focusOffset
    } else {
      //从右到左
      selectedText.start = nodeValueSatrtIndex + focusOffset
      selectedText.end = nodeValueSatrtIndex + anchorOffset
    }
  }

javascript操作光标和选区详情可参考文档：blog.51cto.com/u_14524391/…

4、选中标签后，采用markjs的markRanges()方式去创建一个选中的元素并为其添加样式和绑定事件。
5、定义一个响应式的文字列表，专门记录标记的内容，添加完元素后可追加一条已标记的数据。

import Mark from 'mark.js'
import {ref} from 'vue
import { nanoid } from 'nanoid'


const selectedTextList = ref([])

const handleSelectLabel = (t) => {
  const marker = new Mark(document.getElementById('text-container'))
  const { tag_color, tag_name, tag_id } = t
  const markId = nanoid(10)
  marker.markRanges(
      [
        {
          start: selectedText.start, //必填
          length: selectedText.content.length, //必填
        },
      ],
      {
        className: 'text-selected',
        element: 'span',
        each: (element: any) => {
          //为元素添加样式和属性
          element.setAttribute('id', markId)
          element.style.borderBottom = `2px solid ${t.tag_color}` //添加下划线
          element.style.color = t.tag_color
          //绑定事件
          element.onclick = function (e: any) {
            //
          }
        },
      }
    )
    selectedTextList.value.push({
      tag_color,
      tag_name,
      tag_id,
      start: selectedText.start,
      end: selectedText.end,
      mark_content:selectedText.content,
      mark_id: markId,
    })
}

删除

点击已进行标记的文字————>重选/取消弹窗显示————>点击取消

如何判断点击的文字是否已标记，通过在创建的标记元素中绑定点击事件，触发则表示已标记。

在点击事件中记录该标记的相关内容，如颜色，文字，起始位置，以及唯一标识id（新建时给元素添加一个id属性，点击时即可通过e.target.id获取）

      import { nanoid } from 'nanoid'
      
      //选择标签后
      const markId = nanoid(10)
      marker.markRanges(
      [
        {
          start: isReset ? editTag.value.start : selectedText.start,
          length: isReset ? editTag.value.content.length : selectedText.content.length,
        },
      ],
      {
        className: 'text-selected',
        element: 'span',
        each: (element: any) => {
          element.setAttribute('id', markId)
          //绑定事件
          element.onclick = function (e: any) {
            e.preventDefault()
            if (!e.target.id) return
            const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300
            const item = selectedTextList.value?.find?.((t) => t.mark_id == e.target.id) as any
            const { mark_content, tag_id, start, end } = item || {}
            editTag.value = {
              visible: true,
              top: e.offsetY + 40,
              left: e.offsetX,
              mark_id: e.target.id,
              content: mark_content || '',
              tag_id: tag_id || '',
              start: start,
              end: end,
            }
            tagInfo.value = {
              visible: false,
              top: e.offsetY + 40,
              left: left,
            }
          }
        },
      }
    )

点击取消后，获取在此前记录的id，根据id查询相关的标记元素

使用markjs.unmark()方法即可删除此元素。
绑定的响应式数据，可使用findIndex和splice()删除

编辑弹窗隐藏

const handleCancel = () => {
    if (!editTag.value.mark_id) return
    const markEl = new Mark(document.getElementById(editTag.value.mark_id))
    markEl.unmark()
    selectedTextList.value.splice(
      selectedTextList.value?.findIndex((t) => t.mark_id == editTag.value.mark_id),
      1
    )
    tagInfo.value = {
      visible: false,
      top: 0,
      left: 0,
    }
    resetEditTag()
  }

const resetEditTag = () => {
    editTag.value = {
      visible: false,
      top: 0,
      left: 0,
      mark_id: '',
      content: '',
      tag_id: '',
      start: 0,
      end: 0,
    }
  }

重选

和取消的步骤一样，只不过在点击重选后，先弹出标签弹窗，选择标签后，需要先删除选中的元素，然后再新增一个标记元素。由于在标签选择，在标签选择中判断一下是否是重选，是重选的话就需删除后再创建元素，不是的话就代表是新增，直接新增标记元素（综上所述）。

  const handleSelectLabel = (t: TTag) => {
    tagInfo.value.visible = false
    const { tag_color, tag_name, tag_id } = t
    const marker = new Mark(document.getElementById('text-container'))
    const markId = nanoid(10)
    const isReset = selectedTextList.value?.map((j) => j.mark_id).includes(editTag.value.mark_id)
      ? 1
      : 0 // 1:重选 0:新增
    if (isReset) {
      //如若重选,则删除后再新增标签
      const markEl = new Mark(document.getElementById(editTag.value.mark_id))
      markEl.unmark()
      selectedTextList.value.splice(
        selectedTextList.value?.findIndex((t) => t.mark_id == editTag.value.mark_id),
        1
      )
    }
    marker.markRanges(
      [
        {
          start: isReset ? editTag.value.start : selectedText.start,
          length: isReset ? editTag.value.content.length : selectedText.content.length,
        },
      ],
      {
        className: 'text-selected',
        element: 'span',
        each: (element: any) => {
          element.setAttribute('id', markId)
          element.style.borderBottom = `2px solid ${t.tag_color}`
          element.style.color = t.tag_color
          element.style.userSelect = 'none'
          element.style.paddingBottom = '6px'
          element.onclick = function (e: any) {
            e.preventDefault()
            if (!e.target.id) return
            const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300
            const item = selectedTextList.value?.find?.((t) => t.mark_id == e.target.id) as any
            const { mark_content, tag_id, start, end } = item || {}
            editTag.value = {
              visible: true,
              top: e.offsetY + 40,
              left: e.offsetX,
              mark_id: e.target.id,
              content: mark_content || '',
              tag_id: tag_id || '',
              start: start,
              end: end,
            }
            tagInfo.value = {
              visible: false,
              top: e.offsetY + 40,
              left: left,
            }
          }
        },
      }
    )
    selectedTextList.value.push({
      tag_color,
      tag_name,
      tag_id,
      start: isReset ? editTag.value.start : selectedText.start,
      end: isReset ? editTag.value.end : selectedText.end,
      mark_content: isReset ? editTag.value.content : selectedText.content,
      mark_id: markId,
    })
  }

清空标记

const handleAllDelete = () => {
    selectedTextList.value = []
    const marker = new Mark(document.getElementById('text-container'))
    marker.unmark()
  }

完整代码

<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue'
  import Mark from 'mark.js'
  import { nanoid } from 'nanoid'

  type TTag = {
    tag_name: string
    tag_id: string
    tag_color: string
  }

  type TSelectText = {
    tag_id: string
    tag_name: string
    tag_color: string
    start: number
    end: number
    mark_content: string
    mark_id: string
  }

  const TAG_WIDTH = 280

  const selectedTextList = ref<TSelectText[]>([])

  const selectedText = reactive({
    start: 0,
    end: 0,
    content: '',
  })

  const markContent = ref(
    '这是标注的内容有业绩还是我我很快就很快就开完如突然好几个地方各级很大功夫数据库二极管捍卫国家和我回家很晚十九世纪俄国激活工具和丈母娘环境和颠覆国家的高房价奥苏爱哦因为i以太网图的还是觉得好看啊空间函数调用加快速度还是饥渴的发货可是磕碰日俄和那那么会就开始开会的数据库和也会觉得讲故事的而黄金九二额呵呵三角函数的吧合乎实际的和尽快核实当升科技看交互的接口和送二ui为人开朗少女都被你们进货金额麦当娜表面上的'
  )

  const tagInfo = ref({
    visible: false,
    top: 0,
    left: 0,
  })

  const editTag = ref({
    visible: false,
    top: 0,
    left: 0,
    mark_id: '',
    content: '',
    tag_id: '',
    start: 0,
    end: 0,
  })

  const tagList: TTag[] = [
    {
      tag_name: '标签一',
      tag_color: `#DE050CFF`,
      tag_id: 'tag_id1',
    },
    {
      tag_name: '标签二',
      tag_color: `#6ADE05FF`,
      tag_id: 'tag_id2',
    },
    {
      tag_name: '标签三',
      tag_color: `#DE058BFF`,
      tag_id: 'tag_id3',
    },
    {
      tag_name: '标签四',
      tag_color: `#9205DEFF`,
      tag_id: 'tag_id4',
    },
    {
      tag_name: '标签五',
      tag_color: `#DE5F05FF`,
      tag_id: 'tag_id5',
    },
  ]

  const handleAllDelete = () => {
    selectedTextList.value = []
    const marker = new Mark(document.getElementById('text-container'))
    marker.unmark()
  }

  const handleCancel = () => {
    if (!editTag.value.mark_id) return
    const markEl = new Mark(document.getElementById(editTag.value.mark_id))
    markEl.unmark()
    selectedTextList.value.splice(
      selectedTextList.value?.findIndex((t) => t.mark_id == editTag.value.mark_id),
      1
    )
    tagInfo.value = {
      visible: false,
      top: 0,
      left: 0,
    }
    resetEditTag()
  }

  const handleReset = () => {
    editTag.value.visible = false
    tagInfo.value.visible = true
  }

  const handleSave = () => {
    console.log('标注的数据', selectedTextList.value)
  }

  const handleSelectLabel = (t: TTag) => {
    const { tag_color, tag_name, tag_id } = t
    tagInfo.value.visible = false
    const marker = new Mark(document.getElementById('text-container'))
    const markId = nanoid(10)
    const isReset = selectedTextList.value?.map((j) => j.mark_id).includes(editTag.value.mark_id)
      ? 1
      : 0 // 1:重选 0:新增
    if (isReset) {
      //如若重选,则删除后再新增标签
      const markEl = new Mark(document.getElementById(editTag.value.mark_id))
      markEl.unmark()
      selectedTextList.value.splice(
        selectedTextList.value?.findIndex((t) => t.mark_id == editTag.value.mark_id),
        1
      )
    }
    marker.markRanges(
      [
        {
          start: isReset ? editTag.value.start : selectedText.start,
          length: isReset ? editTag.value.content.length : selectedText.content.length,
        },
      ],
      {
        className: 'text-selected',
        element: 'span',
        each: (element: any) => {
          element.setAttribute('id', markId)
          element.style.borderBottom = `2px solid ${t.tag_color}`
          element.style.color = t.tag_color
          element.style.userSelect = 'none'
          element.style.paddingBottom = '6px'
          element.onclick = function (e: any) {
            e.preventDefault()
            if (!e.target.id) return
            const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300
            const item = selectedTextList.value?.find?.((t) => t.mark_id == e.target.id) as any
            const { mark_content, tag_id, start, end } = item || {}
            editTag.value = {
              visible: true,
              top: e.offsetY + 40,
              left: e.offsetX,
              mark_id: e.target.id,
              content: mark_content || '',
              tag_id: tag_id || '',
              start: start,
              end: end,
            }
            tagInfo.value = {
              visible: false,
              top: e.offsetY + 40,
              left: left,
            }
          }
        },
      }
    )
    selectedTextList.value.push({
      tag_color,
      tag_name,
      tag_id,
      start: isReset ? editTag.value.start : selectedText.start,
      end: isReset ? editTag.value.end : selectedText.end,
      mark_content: isReset ? editTag.value.content : selectedText.content,
      mark_id: markId,
    })
  }

  /**
   * 获取选取的文字数据
   */
  const getSelectedTextData = () => {
    const select = window?.getSelection() as any
    const nodeValue = select.focusNode?.nodeValue
    const anchorOffset = select.anchorOffset
    const focusOffset = select.focusOffset
    const nodeValueSatrtIndex = markContent.value?.indexOf(nodeValue)
    selectedText.content = select.toString()
    if (anchorOffset < focusOffset) {
      //从左到右标注
      selectedText.start = nodeValueSatrtIndex + anchorOffset
      selectedText.end = nodeValueSatrtIndex + focusOffset
    } else {
      //从右到左
      selectedText.start = nodeValueSatrtIndex + focusOffset
      selectedText.end = nodeValueSatrtIndex + anchorOffset
    }
  }

  const resetEditTag = () => {
    editTag.value = {
      visible: false,
      top: 0,
      left: 0,
      mark_id: '',
      content: '',
      tag_id: '',
      start: 0,
      end: 0,
    }
  }

  const drawMark = () => {
    //模拟后端返回的数据
    const res = [
      {
        start: 2, //必备
        end: 6,
        tag_color: '#DE050CFF',
        tag_id: 'tag_id1',
        tag_name: '标签一',
        mark_content: '标注的内容',
        mark_id: 'mark_id1',
      },
      {
        start: 39,
        end: 41,
        tag_color: '#6ADE05FF',
        tag_id: 'tag_id2',
        tag_name: '标签二',
        mark_content: '二极管',
        mark_id: 'mark_id2',
      },
      {
        start: 58,
        end: 61,
        tag_color: '#DE058BFF',
        tag_id: 'tag_id3',
        tag_name: '标签三',
        mark_content: '激活工具',
        mark_id: 'mark_id3',
      },
    ]
    selectedTextList.value = res?.map((t) => ({
      tag_id: t.tag_id,
      tag_name: t.tag_name,
      tag_color: t.tag_color,
      start: t.start,
      end: t.end,
      mark_content: t.mark_content,
      mark_id: t.mark_id,
    }))
    const markList =
      selectedTextList.value?.map((j) => ({
        ...j,
        start: j.start, //必备
        length: j.end - j.start + 1, //必备
      })) || []
    const marker = new Mark(document.getElementById('text-container'))
    markList?.forEach?.(function (m: any) {
      marker.markRanges([m], {
        element: 'span',
        className: 'text-selected',
        each: (element: any) => {
          element.setAttribute('id', m.mark_id)
          element.style.borderBottom = `2px solid ${m.tag_color}`
          element.style.color = m.tag_color
          element.style.userSelect = 'none'
          element.style.paddingBottom = '6px'
          element.onclick = function (e: any) {
            console.log('cccccc', m)
            const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300
            editTag.value = {
              visible: true,
              top: e.offsetY + 40,
              left: e.offsetX,
              mark_id: m.mark_id,
              content: m.mark_content,
              tag_id: m.tag_id,
              start: m.start,
              end: m.end,
            }
            tagInfo.value = {
              visible: false,
              top: e.offsetY + 40,
              left: left,
            }
          }
        },
      })
    })
  }

  //页面初始化
  onMounted(() => {
    const el = document.getElementById('text-container')
    //鼠标抬起
    el?.addEventListener('mouseup', (e) => {
      const text = window?.getSelection()?.toString() || ''
      if (text.length > 0) {
        const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300
        tagInfo.value = {
          visible: true,
          top: e.offsetY + 40,
          left: left,
        }
        getSelectedTextData()
      } else {
        tagInfo.value.visible = false
      }
      //清空重选/取消数据
      resetEditTag()
    })
    //从后端获取标注数据，进行初始化标注
    drawMark()
  })
</script>

<template>
  <header>
    <n-button
      type="primary"
      :disabled="selectedTextList.length == 0 ? true : false"
      ghost
      @click="handleAllDelete"
    >
      清空标记
    </n-button>
    <n-button
      type="primary"
      :disabled="selectedTextList.length == 0 ? true : false"
      @click="handleSave"
    >
      保存
    </n-button>
  </header>
  <main>
    <div id="text-container" class="text">
      {{ markContent }}
    </div>
    <!-- 标签选择 -->
    <div
      v-if="tagInfo.visible && tagList.length > 0"
      :class="['tag-box p-4 ']"
      :style="{ top: tagInfo.top + 'px', left: tagInfo.left + 'px' }"
    >
      <div v-for="i in tagList" :key="i.tag_id" class="tag-name" @click="handleSelectLabel(i)">
        <n-space>
          <p>{{ i.tag_name }}</p>
          <n-button v-if="i.tag_id == editTag.tag_id" text type="primary">√</n-button>
        </n-space>
        <div
          :class="['w-4 h-4']"
          :style="{
            background: i.tag_color,
          }"
        ></div>
      </div>
    </div>
    <!-- 重选/取消 -->
    <div
      v-if="editTag.visible"
      class="edit-tag"
      :style="{ top: editTag.top + 'px', left: editTag.left + 'px' }"
    >
      <div class="py-1 bg-gray-100 text-center" @click="handleCancel">取 消</div>
      <div class="py-1 bg-gray-100 mt-2 text-center" @click="handleReset">重 选</div>
    </div>
  </main>
</template>

<style lang="less" scoped>
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 80px;
    border-bottom: 1px solid #e5e7eb;
    user-select: none;
    background: #fff;
  }

  main {
    background: #fff;
    margin: 24px;
    height: 80vh;
    padding: 24px;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 13%);
    .text {
      color: #333;
      font-weight: 500;
      font-size: 16px;
      line-height: 50px;
    }
    .tag-box {
      position: absolute;
      z-index: 10;
      width: 280px;
      max-height: 40vh;
      overflow-y: auto;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 9px 28px 8px rgb(0 0 0 / 3%), 0 6px 16px 4px rgb(0 0 0 / 9%),
        0 3px 6px -2px rgb(0 0 0 / 20%);
      user-select: none;
      .tag-name {
        width: 100%;
        background: rgba(243, 244, 246, var(--tw-bg-opacity));
        font-size: 14px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 8px;
        margin-top: 8px;
      }
      .tag-name:nth-of-type(1) {
        margin-top: 0;
      }
    }
    .edit-tag {
      position: absolute;
      z-index: 20;
      padding: 16px;
      cursor: pointer;
      width: 100px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 9px 28px 8px rgb(0 0 0 / 3%), 0 6px 16px 4px rgb(0 0 0 / 9%),
        0 3px 6px -2px rgb(0 0 0 / 20%);
      user-select: none;
    }
    ::selection {
      background: rgb(51 51 51 / 20%);
    }
  }
</style>

本文转载于:

https://juejin.cn/post/7282950051319283770

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

热门相关：上将大叔，狼来了！魔神狂后重生之女将星魔神狂后异能特工：军火皇后

一文详解｜支付宝小程序跳转（超详细版）

开发过程中经常遇到支付宝小程序跳转的问题，这里总结一下支付宝小程序跳转的常见场景和方式，希望可以对大家有所帮助。话不多说，上干货！支付宝小程序跳转的三种行为支付宝小程序跳转可以拆分为三种行为，即：外部跳转支付宝小程序支付宝小程序内部页面之间跳转支付宝小程序内部跳转到外部一、外部跳转小程 ...阅读全文

飞码LowCode前端技术系列（一）：数据结构设计

飞码是京东科技研发的低代码产品，可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具，从创建页面到监测再到投产的一站式解决方案 ...阅读全文

从零用VitePress搭建博客教程(6) -– 第三方组件库的使用和VitePress搭建组件库文档

接上一节：从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录？九、第三方组件库的使用我们经常看见UI组件库的文档，这里我们就用element-plus第三方组件库为例子，搭建组件库文档 examples：作为组件库示例目 ...阅读全文

使用 Ant Design Vue 你可能会遇到的14个问题

公司有一个新需求，在原来项目基础上开发，项目中使用 Ant Design Vue，版本是 1.X ,在此记录下遇到的问题；对于没有使用过或者使用程度不深的同学来说，希望可以帮助你在开发中遇到问题时有个参考。对于已经熟练使用的同学，可能这些问题都遇到过，欢迎大家在评论区补充。 1、实现对下拉框显示的所 ...阅读全文

JavaScript复习——01

这是我用于复习我一年前学习的JavaScript的笔记，由于一年过去了，我大概已经4~5个月没有写过什么代码，所以需要整理自己的知识体系，如果文章出错，也希望大家评论给我改错 JavaScript的类型 JS中的类型有以下几种： Number（数字类型） BigInt （大数类型） String（字 ...阅读全文

复习css

复习css 样式内联样式，行内样式，外部样式优先级离HTML元素越近，优先级越高内联样式离元素近：行内样式>内联样式>外部样式外部样式离元素近：行内样式>外部样式>内敛样式本质：浏览器从上到下解析过程中，后出现的样式会覆盖较早出现的样式选择器基本选择器 id > 类 > 标签本质：定 ...阅读全文

JavaScript 运算符

算术运算符简表运算符描述例子 x的运算结果 y的运算结果在线实例（来源runoob.com） + 加法 x=y+2 7 5 实例>> - 减法 x=y-2 3 5 实例>> * 乘法 x=y*2 10 5 实例>> / 除法 x=y/2 2.5 5 实例>> % 取余数（模） x=y%2 1 ...阅读全文

记录--谁还没个靠bug才能正常运行的程序

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助最近遇到一个问题，计算滚动距离，滚动比例达到某界定值时，显示mask，很常见吧^ _ ^ 这里讲的不是这个需求的实现，是其中遇到了一个比较有意思的bug，靠这个bug才达到了正确效果，以及这个bug是如何暴露的（很重要）。下面是演示代码 ...阅读全文

React学习笔记09- 事件处理

React采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写 onclick , React里的事件是驼峰 onClick ，React的事件并不是原生事件，而是合成事件。事件回调的几种写法 1.直接在组件内定义一个非箭头函数的方法，然后在render里直接 ...阅读全文

从零用VitePress搭建博客教程(4) – 如何自定义首页布局和主题样式修改？

接上一节：从零用VitePress搭建博客教程(3) - VitePress页脚、标题logo、最后更新时间等相关细节配置六、首页样式修改有时候觉得自带的样式不好看，想自定义，首先我们在docs/.vitePress新建一个theme文件夹，用来存放自定义布局和主题修改的相关文件，如下所示 th ...阅读全文