组件初始化模版

demo演示

:::demo

  <template>
    <div v-tSelect:[option]>
      文档渲染器集成批注
文档渲染器集成批注功能的实现思路是通过数据库记录划词批注选中内容的位置，并将批注内容与位置进行关联，具有以下优缺点：

优点：

技术实现与文档格式无关，所有前端界面通用；

批注内容与文档内容隔离，不会影响文档内容本身稳定性；

技术难度相对较低，开发成本小；

缺点：

批注内容与引用内容靠选中位置进行关联，但是这种关联关系不稳定，容易丢失定位；

页面获取的 Selcetion 对象仅包含开始节点和结束节点，对所有选中内容进行高亮存在一定难度；

行内元素的匹配场景较多，需要逐一匹配；

出于对文档稳定性和开发成本的考虑，最后决定在文档渲染器中集成批注功能。
<div>通过对文档显示区域的鼠标事件进行监听</div>
<span>。具体代码实现如下：</span>
<p>const sel = window.getSelection();</p>
<p>const range = sel.getRangeAt(0);</p>
<p @click="add">const startNode = range.startContainer;</p>
    </div>
  </template>
  <script>
 
  export default {
    data() {
      return {
       option:{
        ref:() => this
       }
      }
    },
    methods: {
        add(){
          this._selectText && this._selectText.select('文')
          console.log(this._selectText)
        }
    },
    mounted () {
 
       
    }
  };
  </script>
  <style lang="less" scoped>
  </style>

:::

参数说明

binding.arg : object
options  
        {
          selectionBG : '#ff9632',  // 当前选中背景色
          rangeBG : '#ffff00', // 选中范围背景色
          ref : func 返回值为当前组件实例
        }

颜色的更改 是利用 scopedId 来选中 只会影响 scopedId 相同的组件 如果该组件没有 scopedId 则会影响全局

binding.value : this   // 传入当前组件的实例

会在实例中添加以下方法
this._selectText = {
  select(text,reg){} // 需要选中的内容 返回所有匹配项 reg不传为全局精确匹配
  next(){} // 选中下一个 返回当前选中项
  prev(){} // 选中上一个 返回当前选中项
  replaceText(text){}  // 替换选中内容 返回当前选中项
  replaceAll(text){} // 替换所有
  clear(){}  // 清除选中
}

默认将所有有内容的每个文本节点进行正则匹配,如果匹配不是全局匹配 匹配到的内容任然可能为多项