js-mark新時代的網頁標記容器

語言: CN / TW / HK

js-mark  🖍️️

✨ 它提供了一組可互動操作的工具來註釋網頁內容 ✨🖍️

js-mark是一個JavaScript庫,用於在瀏覽器。他是一個可以在任何網頁做標記的前端庫, 它提供了一組可互動操作的工具來註釋網頁內容。 支援標記文字和 持久化儲存與還原

WX20220124-104345@2x.png

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+