js-mark新時代的網頁標記容器
js-mark
🖍️️
✨ 它提供了一組可交互操作的工具來註釋網頁內容 ✨🖍️
js-mark是一個JavaScript庫,用於在瀏覽器。他是一個可以在任何網頁做標記的前端庫, 它提供了一組可交互操作的工具來註釋網頁內容。 支持標記文本和 持久化存儲與還原
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
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+