Skip to content
Alien ZHOU edited this page Apr 21, 2019 · 6 revisions

Web Highlighter

✨A no-runtime dependency lib for text highlighting & persistence on any website ✨🖍️

NPM version version codebeat badge MIT Licence

与页面结构非耦合、支持持久化的文本划词高亮库。

用于实现非耦合的文本区域高亮功能(例如在文本阅读器、博客文章页面、小说阅读页面);

同时提供一种可靠的高亮区域的序列化与反序列化方法,用于实现高亮选区的持久化,用以在下次加载页面后还原高亮区域。

一行代码,开启高亮功能:

(new Highlighter()).run();

四行代码,实现高亮持久化:

// 实例化
var highlighter = new Highlighter();
// 从存储中还原高亮区域
getStore().then(s => highlighter.fromStore(s.startMeta, s.endMeta, s.id, s.text));
// 存储高亮区域数据
highlighter.on(Highlighter.event.CREATE, ({sources}) => save(sources));
// 开启自动高亮
highlighter.run();

支持能力

  • 文本类内容高亮
  • 文本内容取消高亮
  • 高亮选取重合与包含
  • 提供高亮选区序列化能力,可将其持久化至服务端
  • 提供下次访问时高亮选区还原功能,可通过持久化数据还原高亮展示
  • 提供多个钩子,实现业务定制化

兼容性

  • IE 10、11
  • Edge
  • Firefox 52+
  • Chrome 15+
  • Safari 5.1+
  • Opera 15+

安装

npm 安装

npm i web-highlighter

直接从源码构建

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

# 使用某一版本,例如0.3.2
git checkout v0.3.2

npm i
npm run build

dist/web-highlighter.min.js 即为最终产出,产出格式为 UMD。

快速使用

引入方式:

// 全局
var Highlighter = window.Highlighter;

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

// ES Module
import Highlighter from 'highlighter';
var highlighter = new Highlighter();

// 开启自动“划词高亮”
highlighter.run();

功能手册

对于常见需求,可直接通过配置与 API 方法调用即可实现。针对定制化需求,web-highlighter 还提供了多个钩子函数用以拓展其功能,让开发者拥有更多的控制权。

贡献代码

Typescript handbook

开发

启动本地 DEMO 进行开发

npm run start

外部系统调用调试(构建产出包并提供 HTTP 访问)

npm run static

调试

外部项目引入 web-highlighter 后,可以载入 SourceMap 以进行源码调试。

Clone this wiki locally