前端文章标注功能技术实现方案

我这里是用vue3实现的

业务场景大概是用户按住鼠标左键拖动文章的内容，可以给选中的文本添加一个背景颜色，就算是标注成功了。

dom 接口返回的文本数据

<div ref="contentsDiv" class="contents" @mouseup="markContents">
          {{ contents }} 
 </div>

JS逻辑

const markContents = (event) => {
  if (event.button === 0) {
    // 选中的文本范围
    const range = window.getSelection().getRangeAt(0);
    const span = document.createElement('span');
    span.style.backgroundColor = 'red';
    // 将选中的文本内容从文档中移除，并添加到刚刚创建的`span`元素中
    span.appendChild(range.extractContents());
    // 将这个`span`元素插入到原来选中文本的位置
    range.insertNode(span);
    const contentDiv = document.querySelector('.contents');
    // 文章的dom结构 传给后端直接
    const contentText = contentDiv.textContent;
    
}