web highlighter
v0.7.4
Web Highlighter ? ️Une lib sans dépendance pour la mise en évidence du texte et la persistance sur un site Web? ️
Anglais | 简体中文
C'est à partir d'une idée: mettez en surbrillance les textes sur le site Web et enregistrez les domaines mis en évidence comme ce que vous faites en PDF.
Si vous avez déjà visité Medium.com, vous devez connaître la fonctionnalité de la mise en surbrillance des notes: les utilisateurs sélectionnent un segment de texte et cliquez sur le bouton «Fixer». Ensuite, le texte sera mis en évidence avec une couleur d'arrière-plan brillante. En outre, les zones mises en évidence seront sauvées et récupérées lorsque vous la visiteront la prochaine fois. C'est comme la simple démo.
Il s'agit d'une fonctionnalité utile pour les lecteurs. Si vous êtes un développeur, vous voudrez peut-être que votre site Web le soutienne et attire plus de visites. Si vous êtes un utilisateur (comme moi), vous voudrez peut-être qu'un bouton de navigateur le fasse.
Pour cette raison, le Repo (Web-Highlighter) vise à vous aider à mettre en évidence rapidement la note sur n'importe quel site Web (par exemple, les blogs, les téléspectateurs de documents, les livres en ligne, etc.). Il contient les capacités de base à noter la mise en évidence et la persistance. Et vous pouvez implémenter votre propre produit par des API faciles à utiliser. Il a été utilisé pour nos sites de production.
npm i web-highlighterSeules deux lignes, mises en évidence lorsque les textes sont sélectionnés.
import Highlighter from 'web-highlighter' ;
( new Highlighter ( ) ) . run ( ) ;Si vous avez besoin de persévérance, quatre lignes le font.
import Highlighter from 'web-highlighter' ;
// 1. initialize
const highlighter = new Highlighter ( ) ;
// 2. retrieve data from backend, then highlight it on the page
getRemoteData ( ) . then ( s => highlighter . fromStore ( s . startMeta , s . endMeta , s . id , s . text ) ) ;
// 3. listen for highlight creating, then save to backend
highlighter . on ( Highlighter . event . CREATE , ( { sources } ) => save ( sources ) ) ;
// 4. auto highlight
highlighter . run ( ) ; Un exemple plus complexe
import Highlighter from 'web-highlighter' ;
// won't highlight pre&code elements
const highlighter = new Highlighter ( {
exceptSelectors : [ 'pre' , 'code' ]
} ) ;
// add some listeners to handle interaction, such as hover
highlighter
. on ( 'selection:hover' , ( { id } ) => {
// display different bg color when hover
highlighter . addClass ( 'highlight-wrap-hover' , id ) ;
} )
. on ( 'selection:hover-out' , ( { id } ) => {
// remove the hover effect when leaving
highlighter . removeClass ( 'highlight-wrap-hover' , id ) ;
} )
. on ( 'selection:create' , ( { sources } ) => {
sources = sources . map ( hs => ( { hs } ) ) ;
// save to backend
store . save ( sources ) ;
} ) ;
// retrieve data from store, and display highlights on the website
store . getAll ( ) . forEach (
// hs is the same data saved by 'store.save(sources)'
( { hs } ) => highlighter . fromStore ( hs . startMeta , hs . endMeta , hs . text , hs . id )
) ;
// auto-highlight selections
highlighter . run ( ) En outre, il y a un exemple dans ce dépôt (dans example de dossier). Pour jouer avec, vous avez juste besoin -
Entrez d'abord le référentiel et exécutez
npm iPuis démarrez l'exemple
npm start
Visitez enfin http://127.0.0.1:8085/
Un autre produit réel construit avec le web-hightlighter (pour la zone de mise en évidence à gauche):
Il lira la plage sélectionnée par Selection API . Ensuite, les informations de la plage seront converties en une structure de données sérialisable afin qu'elle puisse être stockée dans le backend. Lorsque les utilisateurs visitent votre page la prochaine fois, ces données seront retournées et désérialisées dans votre page. La structure de données est indépendante de la pile technologique. Vous pouvez donc utiliser sur toutes les pages «statiques» faites avec React / Vue / Angular / JQuery et autres.
Pour plus de détails, veuillez lire cet article (en chinois).
const highlighter = new Highlighter ( [ opts ] ) Créez une nouvelle instance highlighter .
opts sera fusionné dans les options par défaut (affichée ci-dessous).
{
$root : document . documentElement ,
exceptSelectors : null ,
wrapTag : 'span' ,
style : {
className : 'highlight-mengshou-wrap'
}
}Toutes les options:
| nom | taper | description | requis | défaut |
|---|---|---|---|---|
| $ root | «Document | Htmlelement` | le conteneur pour permettre la mise en évidence | Non |
| Sauft-SELLECTEURS | Array<string> | Si un élément correspond au sélecteur, il ne sera pas mis en évidence | Non | null |
| se débrouiller | string | La balise HTML utilisée pour envelopper les textes en surbrillance | Non | span |
| verbeux | boolean | dose il doit sortir (imprimer) un message d'avertissement et d'erreur | Non | false |
| style | Object | Contrôler le style des zones en surbrillance | Non | Détails ci-dessous |
Options de champ de style :
| nom | taper | description | requis | défaut |
|---|---|---|---|---|
| nom de classe | string | le nom de classe pour l'élément de wrap | Non | highlight-mengshou-wrap |
exceptSelectors a besoin null ou Array<string> . Il prend en charge les sélecteurs d'ID, les sélecteurs de classe et les sélecteurs de balises. Par exemple, pour sauter les éléments H1 et .title :
var highlighter = new Highlighter ( {
exceptSelectors : [ 'h1' , '.title' ]
} ) ;Highlighter.isHighlightSource(source) Si la source est un objet source de surbrillance, il renverra true , vice Verse.
Highlighter.isHighlightWrapNode($node) Si le $node est un nœud de Dom en wrapper de surbrillance, il renverra true , vice verset.
highlighter.run()Commencez l'auto-éclairage automatique. Lorsque l'utilisateur sélectionne un segment de texte, une mise en évidence sera automatiquement ajoutée au texte.
highlighter.stop()Il arrêtera l'automobile-halte-lilaid.
highlighter.dispose()Lorsque vous ne voulez plus le surligneur, n'oubliez pas de l'appeler en premier. Il supprimera certains auditeurs et fera un nettoyage.
highlighter.fromRange(range) Vous pouvez y passer un objet Range , puis il sera mis en évidence. Vous pouvez utiliser window.getSelection().getRangeAt(0) pour obtenir un objet Range ou utiliser document.createRange() pour créer une nouvelle gamme.
Utilisez-le comme ci-dessous:
const selection = window . getSelection ( ) ;
if ( ! selection . isCollapsed ) {
highlighter . fromRange ( selection . getRangeAt ( 0 ) ) ;
} highlighter.fromStore(start, end, text, id)Surtout, vous utilisez cette API pour mettre en évidence le texte par les informations persistantes stockées à partir du backend.
Ces quatre valeurs proviennent de l'objet HighlightSource . L'objet HighlightSource est un objet spécial créé par le web-highlighter lors de la surface en surbrillance créée. Pour la persistance dans le backend (base de données), il est nécessaire de trouver une structure de données pour représenter un nœud DOM. Cette structure est appelée HighlightSource dans le web-hightlighger.
Signification de quatre attributs:
Object de démarrage: méta-info sur l'élément débutantObject final: méta-info sur puis élément finalstring de texte: Contenu textestring d'identification: ID unique highlighter.remove(id)Retirer (nettoyer) une zone en surbrillance par son identifiant unique. L'ID sera généré par défaut par défaut par défaut. Vous pouvez également ajouter un crochet pour votre propre règle. Accroche le doc ici.
highlighter.removeAll()Retirez toutes les zones mises en évidence appartenant à la racine.
highlighter.addClass(className, id)Ajoutez un nom de classe pour les zones en surbrillance (éléments enveloppés) par ID unique. Vous pouvez modifier le style d'une zone en surbrillance en utilisant cette API.
highlighter.removeClass(className, id) Supprimez le nom de classe par ID unique. C'est le fonctionnement inverse de highlighter.addClass .
highlighter.getDoms([id])Obtenez tous les nœuds enveloppés dans une zone en surbrillance. Une zone mise en évidence peut contenir de nombreux segments. Il renverra tous les nœuds DOM enveloppé ces segments.
Si l' id n'est pas passé, il renverra tous les nœuds de liquidation des zones.
highlighter.getIdByDom(node)Si vous avez un nœud DOM, il peut retourner l'identifiant de surbrillance unique pour vous. Lors du passage d'un élément non-tape, il trouvera le nœud de wrapper des ancêtres le plus proche.
highlighter.getExtraIdByDom(node)Si vous avez un nœud DOM, il peut retourner l'identifiant de surbrillance unique supplémentaire pour vous. Lors du passage d'un élément non-tape, il trouvera le nœud de wrapper des ancêtres le plus proche.
highlighter.setOption(opt)Vous pouvez utiliser cette API pour modifier les options du surligneur. La structure des paramètres est la même que celle du constructeur. Vous pouvez passer des options partielles.
Les écouteurs Web utilisent les auditeurs pour gérer les événements.
par exemple
var highlighter = new Highlighter ( ) ;
highlighter . on ( Highlighter . event . CREATE , function ( data , inst , e ) {
// ...
} ) ;La fonction de rappel recevra trois paramètres:
any : données de l'événementHighlighter Inst: instance de surligneur actuelEvent E: Un événement est déclenché par le navigateur (comme un clic), le web-highlighter l'exposera Highlighter.event est un type de type EventType . Il contient ：
EventType.CLICK : cliquez sur la zone en surbrillanceEventType.HOVER : Mouse Entrez dans la zone en surbrillanceEventType.HOVER_OUT : Mouse quitte la zone en surbrillanceEventType.CREATE : une zone mise en évidence est crééeEventType.REMOVE : une zone mise en évidence est supprimée Un événement différent a data différentes. Attributs ci-dessous:
EventType.CLICK| nom | description | taper |
|---|---|---|
id | L'identification de la surbrillance | chaîne |
EventType.HOVER| nom | description | taper |
|---|---|---|
id | L'identification de la surbrillance | chaîne |
EventType.HOVER_OUT| nom | description | taper |
|---|---|---|
id | L'identification de la surbrillance | chaîne |
EventType.CREATEAucun paramètre
e
| nom | description | taper |
|---|---|---|
source | Objet HighlightSource | Tableau |
type | La raison de la création | chaîne |
source est un objet HighlightSource . Il s'agit d'un objet créé par WEB-Hightlighter lors de la surface en surbrillance créée. Pour la persistance dans le backend (base de données), il est nécessaire d'utiliser une structure de données qui peut être sérialisée ( JSON.stringify() ) pour représenter un nœud DOM dans les navigateurs. HighlightSource est la structure de données conçue pour cela.
type explique pourquoi une zone en surbrillance est créée. Maintenant, type a deux valeurs possibles: from-input et from-store . from-input montre qu'une zone en surbrillance est créée en raison de la sélection de l'utilisateur. from-store le signifie à partir d'un stockage.
EventType.REMOVEAucun paramètre
e
| nom | description | taper |
|---|---|---|
ids | Une liste de l'ID de surbrillance | Tableau |
Les crochets vous permettent de contrôler le flux de mise en évidence puissamment. Vous pouvez presque personnaliser n'importe quelle logique par les crochets. Voir plus dans la partie «Advance».
Cela dépend de l'API de sélection.
Prise en charge des mobiles: détecter automatiquement si les appareils mobiles et utiliser des événements tactiles lors des appareils mobiles.
Il vous fournit des crochets afin que le comportement de mise en évidence puisse être mieux contrôlé par vous-même.
Pour en savoir plus sur les crochets, lisez ce doc.
Mit
