a no dependency typescript supported tool for highlighting user selected content
npm install @funktechno/texthighlighternpm install @funktechno/texthighlighter``js`
import { doHighlight, deserializeHighlights, serializeHighlights, removeHighlights, optionsImpl } from "@/../node_modules/@funktechno/texthighlighter/lib/index";
const domEle = document.getElementById("sandbox");
const options: optionsImpl = {};
if (this.color) options.color = this.color;
if (domEle) doHighlight(domEle, true, options);
In project need to set up own mouseup and touchend events. touchend is for mobile
vue example
`html
id="sandbox"
@mouseup="runHighlight($event)"
@touchend="runMobileHighlight($event)"
v-html="content"
>
vue script
`js
var methods = {
runMobileHighlight(:any){
const selection = document.getSelection();
if (selection) {
const domEle = document.getElementById("sandbox");
const options: optionsImpl = {};
if (domEle) {
const highlightMade = doHighlight(domEle, true, options);
}
} },
runHighlight(:any){
// run mobile a bit different
if (this.isMobile()) return;
const domEle = document.getElementById("sandbox");
const options: optionsImpl = {};
if (domEle) {
const highlightMade = doHighlight(domEle, true, options);
}
}
}
`Demos
* Simple demo
* Callbacks
* Serialization
* Iframe
development
* npm install or yarn import
* npm run build
* npm run build:client
* npm run lint:fix
* yarn run live-server`