easy-marker
easy-marker
is a library for marking text in html. An example is as follows:
Install
npm i easy-marker
Usage
; const easyMarker = ;const container = document;easyMarker;
API
- EasyMarker
- new EasyMarker(options)
- instance
- static
- inner
- ~menuClickHandler :
function
- ~highlightLineClickHandler :
function
- ~menuClickHandler :
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[].type | string |
menu type 'select'(Show menu only when selected) 'highlight' (Show menu only when click highlight) |
options.menuItems[].iconName | Array.<string> |
menu icon class |
options.menuItems[].style | Object |
menu item style |
options.menuItems[].iconStyle | Object |
menu item icon style |
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 |
options.menuStyle.icon | Object |
the sub menu icon style |
options.disableTapHighlight | boolean |
disable highlight when tap |
options.cursor | Object |
cursor config |
options.cursor.color | string |
cursor color |
options.cursor.same | boolean |
whether the cursor is in the same direction |
options.mask | Object |
mask config |
options.mask.color | string |
mask color |
options.highlight | Object |
highlight config |
options.highlight.color | string |
highlight color |
options.scrollSpeedLevel | number |
The speed of scrolling when touching bottom, default 4 |
options.scrollOffsetBottom | number | string |
triggering scrolling, distance from the bottom, default 100 |
options.markdownOptions | Object |
Customize options about the mapping relations between HTML and Markdown |
options.regions | Array.<Object> |
In region mode, all region info |
options.regions[].text | string |
region text |
options.regions[].top | number |
region top |
options.regions[].left | number |
region left |
options.regions[].width | number |
region width |
options.regions[].height | number |
region height |
options.disableSelect | boolean |
disabled select |
Example
// A simple exampleconst em = menuTopOffset: '2rem' menuItems: text: '划线笔记' id: 1 text: '分享' style: backgroundColor: '#407ff2' paddingLeft: '0.5rem' id: 2 text: '复制' id: 3 ) em
easyMarker.create(containerElement, [scrollContainerElement], options)
Initialization
Kind: instance method of EasyMarker
Param | Type | Description |
---|---|---|
containerElement | HTMLElement |
container element |
[scrollContainerElement] | HTMLElement |
scroll container element |
options | Object |
options |
options.includeElements | Object |
included elements |
options.excludeElements | Object |
not included elements, Higher priority |
easyMarker.highlightLine(selection, [id], [meta])
Highlight the lines between the specified nodes
Kind: instance method of 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
const id = 2;const selection = anchorNode: textNodeA anchorOffset: 1 focusNode: textNodeB focusOffset: 2;const meta = someKey: 'someValue' ;em;
easyMarker.highlightLines(lines)
Highlight multiple lines
Kind: instance method of 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
const id = 2;const selection = anchorNode: textNodeA anchorOffset: 1 focusNode: textNodeB focusOffset: 2;const meta = someKey: 'someValue' ;em;
boolean
easyMarker.cancelHighlightLine(id) ⇒ Cancel highlight
Kind: instance method of EasyMarker
Param | Type | Description |
---|---|---|
id | * |
line ID |
easyMarker.onHighlightLineClick(cb)
Highlight line click handler
Kind: instance method of EasyMarker
Param | Type |
---|---|
cb | highlightLineClickHandler |
easyMarker.onSelectStatusChange(cb)
Select status changing callback
Kind: instance method of EasyMarker
Param | Type |
---|---|
cb | function |
easyMarker.onMenuClick(cb)
menu item click handler
Kind: instance method of EasyMarker
Param | Type |
---|---|
cb | menuClickHandler |
easyMarker.registerEventHook(cb)
Register event hook
Kind: instance method of EasyMarker
Param | Type |
---|---|
cb | * |
easyMarker.destroy()
Destroy instance
Kind: instance method of EasyMarker
EasyMarker
EasyMarker.create(containerElement, [scrollContainerElement], options) ⇒ Initialization factory
Kind: static method of EasyMarker
Param | Type | Description |
---|---|---|
containerElement | HTMLElement |
container element |
[scrollContainerElement] | HTMLElement |
scroll container element |
options | Object |
options |
options.includeElements | Object |
included elements |
options.excludeElements | Object |
not included elements, Higher priority |
function
EasyMarker~menuClickHandler : Menu item click handler
Kind: inner typedef of EasyMarker
Param | Type | Description |
---|---|---|
id | * |
menu ID |
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 |
function
EasyMarker~highlightLineClickHandler : Menu item click handler
Kind: inner typedef of 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 |