GitHub - luojilab/easy-marker: A library for marking text in html

README.md

easy-marker

easy-marker is a library for marking text in html. An example is as follows:

Install

npm i easy-marker

Usage

import EasyMarker from 'easy-marker'

const easyMarker = new EasyMarker
const container = document.querySelector('xxxx')
easyMarker.create(container)

API

• EasyMarker
  • new EasyMarker(options)
  • instance
    • .create(containerElement, [scrollContainerElement], [excludeElements])
    • .getSelectText() ⇒ string
    • .highlightLine(selection, [id], [meta])
    • .highlightLines(lines)
    • .cancelHighlightLine(id) ⇒ boolean
    • .onHighlightLineClick(cb)
    • .destroy()
  • static
    • .create(containerElement, [scrollContainerElement], [excludeElements]) ⇒ EasyMarker
  • inner
    • ~menuClickHandler : function
    • ~highlightLineClickHandler : function

new EasyMarker(options)

Creates an instance of EasyMarker.

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)')

easyMarker.create(containerElement, [scrollContainerElement], [excludeElements])

Initialization

Kind: instance method of 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.highlightLine(selection, [id], [meta])

Highlight the lines between the specified nodes

Kind: instance method of EasyMarker

Example

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

Example

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

Param Type Description id * line ID

easyMarker.onHighlightLineClick(cb)

Highlight line click handler

Kind: instance method of EasyMarker

Param Type cb highlightLineClickHandler

easyMarker.destroy()

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

EasyMarker~menuClickHandler : function

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

EasyMarker~highlightLineClickHandler : function

Menu item click handler

Kind: inner typedef of EasyMarker