web highlighter

Web Highlighter ? ️

¿Una libencia sin dependencia para el resalte y la persistencia de texto en cualquier sitio web? ️

---

Inglés | 简体中文

Fondo

Es de una idea: resalte los textos en el sitio web y guarde las áreas resaltadas como lo que hace en PDF.

Si alguna vez ha visitado Medium.com, debe conocer la característica de resaltar notas: los usuarios seleccionan un segmento de texto y hacen clic en el botón 'resaltar'. Luego, el texto se resaltará con un color de fondo brillante. Además, las áreas resaltadas se guardarán y recuperarán cuando las visite la próxima vez. Es como la demostración simple a continuación.

Esta es una característica útil para los lectores. Si es un desarrollador, es posible que desee que su sitio web lo apoye y atraiga más visitas. Si eres un usuario (como yo), es posible que desee que un navegador-plugin haga esto.

Por esta razón, el Repo (Web-Highlighter) tiene como objetivo ayudarlo a implementar la nota de resaltado en cualquier sitio web rápidamente (por ejemplo, blogs, espectadores de documentos, libros en línea, etc.). Contiene las habilidades centrales para el resaltado y la persistencia de notas. Y puede implementar su propio producto mediante algunas API fáciles de usar. Se ha utilizado para nuestros sitios en producción.

Instalar

npm i web-highlighter

Uso

Solo dos líneas, resaltadas cuando se seleccionan textos.

 import Highlighter from 'web-highlighter' ;
( new Highlighter ( ) ) . run ( ) ;

Si necesita persistencia, cuatro líneas lo logran.

 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 ( ) ; 

Ejemplo

Un ejemplo más complejo

 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 ( )

Además, hay un ejemplo en este repositorio (en la carpeta de example ). Para jugar con él, solo necesitas ——

Primero ingrese el repositorio y ejecute

npm i

Luego comience el ejemplo

 npm start

Finalmente visite http://127.0.0.1:8085/

---

Otro producto real construido con un higuera web (para el área de resaltado a la izquierda):

Cómo funciona

Leerá el rango seleccionado por Selection API . Luego, la información de la gama se convertirá en una estructura de datos en serie para que pueda almacenarse en backend. Cuando los usuarios visiten su página la próxima vez, estos datos serán devueltos y deserializados en su página. La estructura de datos es Tech Stack independiente. Por lo tanto, puede usar en cualquier página 'estática' hecha con React / Vue / Angular / JQuery y otras.

Para más detalles, lea este artículo (en chino).

API

1. Opciones

 const highlighter = new Highlighter ( [ opts ] )

Crea una nueva instancia highlighter .

opts se fusionarán en las opciones predeterminadas (se muestran a continuación).

 {
    $root : document . documentElement ,
    exceptSelectors : null ,
    wrapTag : 'span' ,
    style : {
        className : 'highlight-mengshou-wrap'
    }
}

Todas las opciones:

nombre	tipo	descripción	requerido	por defecto
$ root	`Documento	Htmlelement`	el contenedor para habilitar resaltar	No
excepto selectores	Array<string>	Si un elemento coincide con el selector, no se resaltará	No	null
envoltorio	string	la etiqueta HTML utilizada para envolver textos resaltados	No	span
verboso	boolean	Dosis debe emitir (imprimir) algún mensaje de advertencia y error	No	false
estilo	Object	control de áreas resaltadas estilo	No	Detalles a continuación

Opciones de campo style :

nombre	tipo	descripción	requerido	por defecto
nombre de clase	string	el nombre de clase para el elemento envolvente	No	highlight-mengshou-wrap

exceptSelectors necesita null o Array<string> . Admite selectores de identificación, selectores de clase y selectores de etiquetas. Por ejemplo, omitir los elementos H1 y .title :

 var highlighter = new Highlighter ( {
    exceptSelectors : [ 'h1' , '.title' ]
} ) ;

2. Métodos estáticos

Highlighter.isHighlightSource(source)

Si la source es un objeto fuente destacado, devolverá true , Vice Vever.

Highlighter.isHighlightWrapNode($node)

Si el $node es un nodo DOM de envoltura destacado, devolverá true , Vice Versides.

3. Métodos de instancia

highlighter.run()

Comience a la iluminación automática. Cuando el usuario seleccione un segmento de texto, se agregará automáticamente un resaltado al texto.

highlighter.stop()

Detendrá la iluminación automática.

highlighter.dispose()

Cuando ya no desee el resaltador, recuerde llamarlo primero. Eliminará a algunos oyentes y hará un poco de limpieza.

highlighter.fromRange(range)

Puede pasarle un objeto Range y luego se resaltará. Puede usar window.getSelection().getRangeAt(0) para obtener un objeto de rango o usar document.createRange() para crear un nuevo rango.

Úselo como a continuación:

 const selection = window . getSelection ( ) ;
if ( ! selection . isCollapsed ) {
    highlighter . fromRange ( selection . getRangeAt ( 0 ) ) ;
} 

highlighter.fromStore(start, end, text, id)

Principalmente, usa esta API para resaltar el texto por la información persistida almacenada desde el backend.

Estos cuatro valores son del objeto HighlightSource . El objeto HighlightSource es un objeto especial creado por Web-Highlighter cuando se crea el área resaltada. Para la persistencia en el backend (base de datos), es necesario encontrar una estructura de datos para representar un nodo DOM. Esta estructura se llama HighlightSource en la web-highlighter.

CONSIGNIFICADOS DE CUATRO ATRIBUTOS:

• Inicio Object : Meta Información sobre el elemento inicial
• Object final: meta información sobre el elemento final
• string de texto: contenido de texto
• string de identificación: ID única

highlighter.remove(id)

Retire (limpie) un área resaltada por su identificación única. El ID será generado por Web-Highlighter de forma predeterminada. También puede agregar un gancho para su propia regla. Hooks Doc aquí.

highlighter.removeAll()

Elimine todas las áreas resaltadas que pertenecen a la raíz.

highlighter.addClass(className, id)

Agregue un nombre de clase para áreas resaltadas (elementos de envoltura) por identificación única. Puede cambiar el estilo de un área resaltada utilizando esta API.

highlighter.removeClass(className, id)

Elimine el nombre de clase por identificación única. Es la operación inversa de highlighter.addClass .

highlighter.getDoms([id])

Obtenga todos los nodos de envoltura en un área resaltada. Un área resaltada puede contener muchos segmentos. Devolverá todos los nodos DOM envolviendo estos segmentos.

Si no se pasa la id , devolverá todas las áreas de las áreas.

highlighter.getIdByDom(node)

Si tiene un nodo DOM, puede devolver el ID de resaltado único para usted. Al pasar un elemento no wrapper, encontrará el nodo de envoltura de ancestros más cercano.

highlighter.getExtraIdByDom(node)

Si tiene un nodo DOM, puede devolver el ID de resaltar único adicional para usted. Al pasar un elemento no wrapper, encontrará el nodo de envoltura de ancestros más cercano.

highlighter.setOption(opt)

Puede usar esta API para cambiar las opciones del marcador. La estructura de los parámetros es la misma que la del constructor. Puede pasar opciones parciales.

4. Oyente de eventos

Highlighter Web Utiliza oyentes para manejar los eventos.

p.ej

 var highlighter = new Highlighter ( ) ;
highlighter . on ( Highlighter . event . CREATE , function ( data , inst , e ) {
    // ...
} ) ;

La función de devolución de llamada recibirá tres parámetros:

• Datos any : datos de eventos
• Inst Highlighter : instancia actual del resaltador
• E Event : El navegador activa algún evento (como Click), Web-Highlighter lo expondrá

Highlighter.event es el tipo EventType . Contiene:

• EventType.CLICK : haga clic en el área resaltada
• EventType.HOVER : mouse ingrese al área resaltada
• EventType.HOVER_OUT : mouse deja el área resaltada
• EventType.CREATE : se crea un área resaltada
• EventType.REMOVE : se elimina un área resaltada

El evento diferente tiene data diferentes. Atributos a continuación:

EventType.CLICK

nombre	descripción	tipo
id	la identificación destacada	cadena

EventType.HOVER

nombre	descripción	tipo
id	la identificación destacada	cadena

EventType.HOVER_OUT

nombre	descripción	tipo
id	la identificación destacada	cadena

EventType.CREATE

Sin parámetro e

nombre	descripción	tipo
source	Objeto HighlightSource	Formación
type	La razón para crear	cadena

source es un objeto HighlightSource . Es un objeto creado por Web-Highlighter cuando se crea el área resaltada. Para la persistencia en el backend (base de datos), es necesario usar una estructura de datos que se pueda serializar ( JSON.stringify() ) para representar un nodo DOM en los navegadores. HighlightSource es la estructura de datos diseñada para esto.

type explica por qué se crea un área resaltada. type ahora tiene dos valores posibles: from-input y from-store . from-input muestra que se crea un área resaltada debido a la selección del usuario. from-store lo significa desde un almacenamiento.

EventType.REMOVE

Sin parámetro e

nombre	descripción	tipo
ids	una lista de la identificación de resaltación	Formación

5. Hooks

Los ganchos le permiten controlar el flujo de resaltamiento con potencia. Casi puede personalizar cualquier lógica por ganchos. Ver más en la parte 'Avance'.

Compatibilidad

Depende de la API de selección.

• Es decir, 11
• Borde
• Firefox 52+
• Chrome 15+
• Safari 5.1+
• Ópera 15+

Soportes móviles: detecte automáticamente si los dispositivos móviles y usan eventos táctiles cuando están en dispositivos móviles.

Avance

Proporciona algunos ganchos para usted para que el comportamiento de resaltado pueda ser mejor controlado por el suyo.

Para obtener más información sobre los ganchos, lea este documento.

Licencia

MIT