easy-marker
is a library for marking text in html. An example is as follows:
npm i easy-marker
import EasyMarker from 'easy-marker'
const easyMarker = new EasyMarker
const container = document.querySelector('xxxx')
easyMarker.create(container)
- EasyMarker
- new EasyMarker(options)
- instance
- static
- inner
- ~menuClickHandler :
function
- ~highlightLineClickHandler :
function
- ~menuClickHandler :
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 |
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 |
options.disableTapHighlight | Object |
disable highlight when tap |
options.cursor | Object |
cursor config |
options.cursor.color | Object |
cursor color |
options.cursor.same | Object |
whether the cursor is in the same direction |
options.mask | Object |
mask config |
options.mask.color | Object |
mask color |
options.highlight | Object |
highlight config |
options.highlight.color | Object |
highlight color |
options.scrollSpeedLevel | number |
The speed of scrolling when touching bottom, default 4 |
options.scrollOffsetBottom | number | string |
The distance from the bottom when triggering scrolling,default 100 |
options.markdownOptions | Object |
Customize options about the mapping relations between HTML and Markdown |
Example
// A simple example
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)')
// a markdown example
const em = new EasyMarker({
menuTopOffset:'2rem',
scrollSpeedLevel: 6,
scrollOffsetBottom: '1.5rem',
menuItems: [
{
text: '划线笔记',
handler: function (data) {
console.log('划线笔记', data)
this.highlightLine(data,1)
}
},
{
text: '分享',
handler: (data) => { console.log(data.toMarkdown())}
},
{
text: '复制',
handler: (data) => {
console.log('复制',data.toString())
}
}
],
// Not required
markdownOptions: {
H1: text => `\n# ${text}\n\n`,
H2: text => `\n## ${text}\n\n`,
H3: text => `\n### ${text}\n\n`,
H4: text => `\n#### ${text}\n\n`,
H5: text => `\n##### ${text}\n\n`,
H6: text => `\n###### ${text}\n\n`,
P: text => `${text}\n\n`,
FIGCAPTION: text => `${text}\n\n`,
STRONG: text => `**${text}**`,
B: text => `**${text}**`,
EM: text => `*${text}*`,
I: text => `*${text}*`,
S: text => `~~${text}~~`,
INS: text => `++${text}++`,
// IMG
// option.alt: IMG alt
// option.src: IMG src
// option.width: IMG width
// option.height: IMG height
IMG: option => `![${option.alt}](${option.src}?size=${option.width}x${option.height})\n`,
// UL
// option.listLevel: List nesting level
UL: (text, option) => {
if (option.listLevel > 1) {
return `\n${text}`
}
return `\n${text}\n`
},
// OL
// option.listLevel: List nesting level
OL: (text, option) => {
if (option.listLevel > 1) {
return `\n${text}`
}
return `\n${text}\n`
},
// LI
// option.type: parentNode nodeName,
// option.isLastOne: Whether the last item in the list
// option.itemLevel: List nesting level
// option.hasChild: Is the node has child node
// option.index: The index in the list
LI: (text, option) => {
let spaceString = ''
for (let i = 1; i < option.itemLevel; i++) { spaceString += ' ' }
let endString = '\n'
if (option.hasChild || option.isLastOne) {
endString = ''
}
if (option.type === 'UL') { return `${spaceString}- ${text}${endString}` }
return `${spaceString}${option.index}. ${text}${endString}`
},
}
})
em.create(document.querySelector('.article-body'), document.body)
Initialization
Kind: instance method of EasyMarker
Param | Type | Description |
---|---|---|
containerElement | HTMLElement |
container element |
[scrollContainerElement] | HTMLElement |
scroll container element |
[excludeElements] | Array.<HTMLElement> |
not included elements |
Get the selected text
Kind: instance method of EasyMarker
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.highlightLine(selection, id, meta);
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.highlightLines([{selection, id, meta}]);
Cancel highlight
Kind: instance method of EasyMarker
Param | Type | Description |
---|---|---|
id | * |
line ID |
Highlight line click handler
Kind: instance method of EasyMarker
Param | Type |
---|---|
cb | highlightLineClickHandler |
Select status changing callback
Kind: instance method of EasyMarker
Param | Type |
---|---|
cb | function |
Register event hook
Kind: instance method of EasyMarker
Param | Type |
---|---|
cb | * |
Destroy instance
Kind: instance method of EasyMarker
EasyMarker.create(containerElement, [scrollContainerElement], [excludeElements]) ⇒ EasyMarker
Initialization factory
Kind: static method of EasyMarker
Param | Type | Description |
---|---|---|
containerElement | HTMLElement |
container element |
[scrollContainerElement] | HTMLElement |
scroll container element |
[excludeElements] | Array.<HTMLElement> |
not included elements |
Menu item click handler
Kind: inner typedef 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 |
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 |