wwwszl/web-highlighter

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

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

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

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

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

一行代码，开启高亮功能：

(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 还提供了多个钩子函数用以拓展其功能，让开发者拥有更多的控制权。

• API 功能列表：详见 API 介绍相关文档。
• 针对特质化需求，可通过暴露的钩子函数灵活组装功能，并集成至 React/Vue 内。相关使用文档可参考这里。

贡献代码

Typescript handbook

开发

启动本地 DEMO 进行开发

npm run start

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

npm run static

调试

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

• webpack: source-map-loader
• gulp: vinyl-sourcemaps-apply
• rollup: rollup-plugin-sourcemaps