Demo

如果進行簡單的演示，可以打開http://webviews.cn/js-mark/運行方可查看演示效果

安裝

方法一

npm install js-mark

方法二

使用靜態文件,把dist/js-mark.js靜態文件直接放到項目中

文檔

基本配置

js import JsMark from "js-mark"; const jsMark = new jsMark(opts:OPTS) 創建一個新的jsMark實例,opts 會合並至默認配置 (如下所示). ```js interface OPTS { el:Element， options:{ isCover:boolean } }

```

配置説明：

|參數名 |類型 |描述 |是否必須 |默認值 |---|---|---|---|--- |el | Document | 標記的根節點元素 | 是 | null |options | Object | 配置項(詳細如下) | 否 | null

options配置説明：

|參數名|類型|描述|是否必須|默認值 |---|---|---|---|--- |isCover | Boolean | 標記內容是否可以覆蓋 | 否 | true

實例方法

1.鼠標選中文本後的回調方法：jsMark.onSelected

當鼠標選中根節點下的文本或從後台獲取數據使用jsMark.renderStore渲染已標註節點時會觸發此方法，該方法回調返回一個Selected已選中對象

```js

interface Selected { textNodes: Text[]; //選中的所有文本節點 text: string; //選中的文本 offset: number; //選中文本相對於根結點的偏移量 hasStoreRender: boolean; //是否來自renderStore方法渲染，一般用於從數據庫拿到數據運用jsMark.renderStore方法判斷首次渲染 }

jsMark.onSelected = function (res:Selected) {};

```

2.標註選中文本：jsMark.repaintRange(nodes:Text[],uid:string,cssClass:string)

標註已經選中的文本，一般用在jsMark.onSelected回調方法內，接受三個參數 ```js

//定義 interface RangeNodes{ textNodes: Text[]; //選中的所有文本節點,onSelected返回值的res.textNodes className: string; //需要標註的文本節點樣式類 uuid?: string; //標註文本節點的唯一id，會綁定到節點身上的data-selector屬性，此id可用於清除當前標註節點，可選，不傳會自動生成 storeRenderOther?:any; //來自jsMark.renderStore方法的用户自定義參數 }

function repaintRange(opts:RangeNodes):void{...}

//調用示例 jsMark.onSelected = function (res) { jsMark.repaintRange({ textNodes:res.textNodes }); };

```

3.點擊已經標註文本後的回調方法：jsMark.onClick

點擊已經標註的內容後，會觸發jsMark.onClick方法,回掉方法接受一個uid為標籤上唯一的一個id，可用於清除單個標註 ```js

jsMark.onClick = function (uid:string) {};

```

4.通過數據去標註根節點下的數據：jsMark.renderStore()

```js

//定義 interface SelectInfo{ offset: number; //選中文本相對於根結點的偏移量 text: string; //選中的文本 storeRenderOther?:any; //用户自定義參數 }

function renderStore(obj: SelectInfo[]): void {...}

//調用 jsMark.renderStore([{text:"測試",offset:20}])

```

5.查找跟節點下的單個詞組：jsMark.findWord

通過jsMark.findWord查找文檔中所有的可標註文本位置，返回相對於跟節點的偏移量 ```js //定義 declare type Nullable = T | null;

interface Selected { offset: number; //偏移量 text: string; //文本信息 }

function findWord(word:string):Nullable{...}

//調用 jsMark.findWord("標註文本");

```

6.清除單個標註：jsMark.clearMark

清除標籤上data-selector屬性為唯一uid的標籤標註 js jsMark.clearMark(uid);

7.清除所有標註：jsMark.clearMarkAll

js jsMark.clearMarkAll();

8.清除事件：jsMark.destroyEvent

js jsMark.destroyEvent();

兼容性

|IE | Firefox| Chrome| Safari| Opera |---|---|---|---|--- |10+ | 52+ |15+|5.1+|15+