## EasyMarker A simple article marker library **Kind**: global class **Export**: * [EasyMarker](#EasyMarker) * [new EasyMarker(options)](#new_EasyMarker_new) * _instance_ * [.create(containerElement, [scrollContainerElement], [excludeElements])](#EasyMarker+create) * [.getSelectText()](#EasyMarker+getSelectText) ⇒ string * [.highlightLine(selection, [id], [meta])](#EasyMarker+highlightLine) * [.highlightLines(lines)](#EasyMarker+highlightLines) * [.cancelHighlightLine(id)](#EasyMarker+cancelHighlightLine) ⇒ boolean * [.onHighlightLineClick(cb)](#EasyMarker+onHighlightLineClick) * [.registerEventHook(cb)](#EasyMarker+registerEventHook) * [.destroy()](#EasyMarker+destroy) * _static_ * [.create(containerElement, [scrollContainerElement], [excludeElements])](#EasyMarker.create) ⇒ [EasyMarker](#EasyMarker) * _inner_ * [~menuClickHandler](#EasyMarker..menuClickHandler) : function * [~highlightLineClickHandler](#EasyMarker..highlightLineClickHandler) : function ### new EasyMarker(options) Creates an instance of EasyMarker. | Param | Type | Description | | --- | --- | --- | | options | Object | options | | options.menuItems | Array.<Object> | menu item option | | options.menuItems[].text | string | menu text | | options.menuItems[].handler | [menuClickHandler](#EasyMarker..menuClickHandler) | menu item click handler | | options.menuTopOffset | number \| string | the offset from the top of the menu relative screen, default 0. | | options.menuStyle | Object | the menu style | | options.menuStyle.menu | Object | the menu style | | options.menuStyle.triangle | Object | the triangle style | | options.menuStyle.item | Object | the sub menu style | **Example** ```js const em = new EasyMarker({ menuTopOffset:'2rem', menuItems: [ { text: '划线笔记', handler: function (data) { console.log('划线笔记', data, this) this.highlightLine(data,1) } }, { text: '分享', handler: (data) => {console.log('分享',data)} }, { text: '复制', handler: (data) => {console.log('分享',data)} } ] ) em.create(document.querySelector('.article-body'), document.body, document.querySelectorAll('.article-body>:not(.text)') ``` ### easyMarker.create(containerElement, [scrollContainerElement], [excludeElements]) Initialization **Kind**: instance method of [EasyMarker](#EasyMarker) | Param | Type | Description | | --- | --- | --- | | containerElement | HTMLElement | container element | | [scrollContainerElement] | HTMLElement | scroll container element | | [excludeElements] | Array.<HTMLElement> | not included elements | ### easyMarker.getSelectText() ⇒ string Get the selected text **Kind**: instance method of [EasyMarker](#EasyMarker) ### easyMarker.highlightLine(selection, [id], [meta]) Highlight the lines between the specified nodes **Kind**: instance method of [EasyMarker](#EasyMarker) | Param | Type | Description | | --- | --- | --- | | selection | Object | selection | | selection.anchorNode | Node | start node | | selection.anchorOffset | number | start node's text offset | | selection.focusNode | Node | end node | | selection.focusOffset | number | start node's text offset | | [id] | \* | line id | | [meta] | \* | meta information | **Example** ```js const id = 2; const selection = { anchorNode: textNodeA, anchorOffset: 1, focusNode: textNodeB, focusOffset: 2 }; const meta = { someKey: 'someValue' }; em.highlightLine(selection, id, meta); ``` ### easyMarker.highlightLines(lines) Highlight multiple lines **Kind**: instance method of [EasyMarker](#EasyMarker) | Param | Type | | --- | --- | | lines | Array.<Object> | | [lines[].id] | \* | | [lines[].meta] | \* | | lines[].selection | Object | | lines[].selection.anchorNode | Node | | lines[].selection.anchorOffset | number | | lines[].selection.focusNode | Node | | lines[].selection.focusOffset | number | **Example** ```js const id = 2; const selection = { anchorNode: textNodeA, anchorOffset: 1, focusNode: textNodeB, focusOffset: 2 }; const meta = { someKey: 'someValue' }; em.highlightLines([{selection, id, meta}]); ``` ### easyMarker.cancelHighlightLine(id) ⇒ boolean Cancel highlight **Kind**: instance method of [EasyMarker](#EasyMarker) | Param | Type | Description | | --- | --- | --- | | id | \* | line ID | ### easyMarker.onHighlightLineClick(cb) Highlight line click handler **Kind**: instance method of [EasyMarker](#EasyMarker) | Param | Type | | --- | --- | | cb | [highlightLineClickHandler](#EasyMarker..highlightLineClickHandler) | ### easyMarker.registerEventHook(cb) Register event hook **Kind**: instance method of [EasyMarker](#EasyMarker) | Param | Type | | --- | --- | | cb | \* | ### easyMarker.destroy() Destroy instance **Kind**: instance method of [EasyMarker](#EasyMarker) ### EasyMarker.create(containerElement, [scrollContainerElement], [excludeElements]) ⇒ [EasyMarker](#EasyMarker) Initialization factory **Kind**: static method of [EasyMarker](#EasyMarker) | Param | Type | Description | | --- | --- | --- | | containerElement | HTMLElement | container element | | [scrollContainerElement] | HTMLElement | scroll container element | | [excludeElements] | Array.<HTMLElement> | not included elements | ### EasyMarker~menuClickHandler : function Menu item click handler **Kind**: inner typedef of [EasyMarker](#EasyMarker) | Param | Type | Description | | --- | --- | --- | | selection | Object | selection | | selection.anchorNode | Node | start node | | selection.anchorOffset | number | start node's text offset | | selection.focusNode | Node | end node | | selection.focusOffset | number | start node's text offset | ### EasyMarker~highlightLineClickHandler : function Menu item click handler **Kind**: inner typedef of [EasyMarker](#EasyMarker) | Param | Type | Description | | --- | --- | --- | | id | \* | line ID | | meta | \* | meta information | | selection | Object | selection | | selection.anchorNode | Node | start node | | selection.anchorOffset | number | start node's text offset | | selection.focusNode | Node | end node | | selection.focusOffset | number | start node's text offset |