# 划词评论交互实现

**Repository Path**: rubyixe/word-comment

## Basic Information

- **Project Name**: 划词评论交互实现
- **Description**: 划词评论核心功能的实现，大家可以基于此项目的demo结合自己业务完成最终的开发。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.zhangxinxu.com/wordpress/2022/09/js-selection-range/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2022-12-21
- **Last Updated**: 2022-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 划词评论交互实现

#### 介绍
划词评论核心功能的实现，大家可以基于此项目的demo结合自己业务完成最终的开发。

访问地址：https://zhangxinxu.gitee.io/word-comment/

#### 说明

./src/utils.js 是核心方法，都是划词range处理相关的抽象方法。

包括下面几个：

<dl>
<dt>showSelectionPopover(target, paragraph)</dt>
<dd>基于当前 range 选区进行定位。</dd>
<dt>hideSelectionPopover(target);</dt>
<dd>因此悬浮定位的元素。</dd>
<dt>doRangeWrapHighLight()</dt>
<dd>当前选区使用span标签包裹，配合CSS可以实现高亮示意。</dd>
<dt>getContentAndIndex(selector)</dt>
<dd>获取选区在元素内的起止索引值，以及选区内容。返回值是：<pre>{
    ...objDataId,   // 匹配 data-*id 的键值对
    startIndex,
    endIndex,
    selectContent
}</pre></dd>
<dt>getContentAndIndexList(target, selector)</dt>
<dd>基于 DOM 获取现在所有划词选区的起止点和内容，返回值是数组列表。</dd>
<dt>getNodeAndOffset(dom, start = 0, end = 0)</dt>
<dd>基于起止点的位置反向高亮显示的实现。</dd>
</dl>


index.html 演示的是业务逻辑处理，基于 utils.js 完成，由于实际业务场景千千万，本演示仅供参考。

更多内容可参见这篇文章：https://www.zhangxinxu.com/wordpress/2022/09/js-selection-range/