Hightlight Content Selection For The Web – Web Highlighter

Category: Javascript , Recommended | April 23, 2019
Author: alienzhou
Views Total: 103
Official Page: Go to website
Last Update: April 23, 2019
License: MIT

Preview:

Hightlight Content Selection For The Web – Web Highlighter

Description:

A pure JS web highlighter that makes it possible to highlight any content selection on the web.

How to use it:

Installation:

npm i web-highlighter

Build.

git clone [email protected]:alienzhou/web-highlighter.git

git checkout v0.3.2

npm i
npm run build

Import the web highlighter.

// global
var Highlighter = window.Highlighter;

// CommonJS
var Highlighter = require('highlighter');

// ES Module
import Highlighter from 'highlighter';

Initialize & enable the web highlighter.

var highlighter = new Highlighter();
highlighter.run();

Save & restore the highlighted content.

// get
getStore().then(s => highlighter.fromStore(s.startMeta, s.endMeta, s.id, s.text));

// store
highlighter.on(Highlighter.event.CREATE, ({sources}) => save(sources));

Possible options for the web highlighter.

var highlighter = new Highlighter({

    // root element
    $root: document.documentElement,

    // default: null
    exceptSelectors: ['img', 'code'],

    // CSS class for the highlighted content
    style: {
      className: 'highlight-mengshou-wrap'
    }
    
});

Apply your own styles to the highlighted content.

.highlight-mengshou-wrap {
  /* your styles here */
}

More API methods.

// stops the web highlighter
highlighter.stop();

// disposes the web highlighter
highlighter.dispose();

// removes selection
highlighter.remove(id);

// removes all selections
highlighter.removeAll();

// adds a CSS class to the selection
highlighter.addClass('your-class', id);

// removes the class
highlighter.removeClass('your-class', id);

// gets DOM
highlighter.getDoms(id);

// gets ID of the DOM
highlighter.getIdByDom($node);

Event listeners.

highlighter.on(Highlighter.event.CLICK, function (id) {
  // ...
});

highlighter.on(Highlighter.event.HOVER, function (id) {
  // ...
});

highlighter.on(Highlighter.event.HOVER_OUT, function (id) {
  // ...
});

highlighter.on(Highlighter.event.CREATE, function (source, type) {
  // ...
});

highlighter.on(Highlighter.event.REMOVE, function (ids) {
  // ...
});

You Might Be Interested In:


Leave a Reply