web highlighter 다운로드 - web highlighter 소스 코드 다운로드

web highlighter

웹사이트 데이터

v0.7.4

다운로드

`Web Highlighter` ? ️

모든 웹 사이트에서 텍스트 강조 및 지속성을위한 의존성이없는 lib?

영어 | 简体中文

배경

그것은 아이디어에서 나온 것입니다 : 웹 사이트의 텍스트를 강조하고 PDF에서하는 것과 마찬가지로 강조 표시된 영역을 저장하십시오.

medium.com을 방문한 사람이라면 강조 표시의 기능을 알아야합니다. 사용자는 텍스트 세그먼트를 선택하고 '강조'버튼을 클릭하십시오. 그러면 텍스트는 빛나는 배경색으로 강조 표시됩니다. 게다가, 강조된 지역은 다음에 방문 할 때 저장되고 회복됩니다. 간단한 데모 벨로우와 같습니다.

이것은 독자에게 유용한 기능입니다. 개발자 인 경우 웹 사이트를 지원하고 더 많은 방문을 유치하기를 원할 수 있습니다. 당신이 나와 같은 사용자라면, 당신은 브라우저 플러그 인이이를 수행하기를 원할 수 있습니다.

이러한 이유로 Repo (Web-Highlighter)는 모든 웹 사이트에서 강조 표시 노트를 빠르게 구현하는 데 도움이됩니다 (예 : 블로그, 문서 시청자, 온라인 책 등). 여기에는 강조 표시와 지속성에 대한 핵심 능력이 포함되어 있습니다. 사용하기 쉬운 API로 자신의 제품을 구현할 수 있습니다. 생산 사이트에 사용되었습니다.

설치하다

npm i web-highlighter

용법

텍스트를 선택할 때 강조된 두 줄만 강조합니다.

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

지속성이 필요하면 네 줄이 만듭니다.

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

예

더 복잡한 예

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

게다가이 리포지어에는 예제가 있습니다 ( example 폴더). 그것을 가지고 놀려면, 당신은 그냥 필요합니다.

먼저 저장소를 입력하고 실행하십시오

npm i

그런 다음 예제를 시작하십시오

 npm start

마지막으로 http://127.0.0.1:8085/를 방문하십시오.

Web-Highlighter (왼쪽의 하이라이트 영역)로 구축 된 또 다른 실제 제품 :

제품 샘플

작동 방식

Selection API 에 의해 선택된 범위를 읽습니다. 그런 다음 범위의 정보가 직렬화 가능한 데이터 구조로 변환되어 백엔드에 저장할 수 있습니다. 사용자가 다음에 페이지를 방문하면이 데이터가 페이지에서 반환되고 사형화됩니다. 데이터 구조는 기술 스택 독립입니다. 따라서 React / Vue / Angular / JQuery 및 기타로 만든 '정적'페이지에서 사용할 수 있습니다.

자세한 내용은이 기사 (중국어)를 읽으십시오.

아피스

1. 옵션

 const highlighter = new Highlighter ( [ opts ] )

새로운 highlighter 인스턴스를 만듭니다.

opts 기본 옵션으로 병합됩니다 (표시).

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

모든 옵션 :

이름	유형	설명	필수의	기본
$ 루트	`문서	htmlelement`	강조 표시를 활성화하는 컨테이너	아니요
예외를 예방합니다	`Array<string>`	요소가 선택기와 일치하면 강조 표시되지 않습니다.	아니요	`null`
WRAPTAG	`string`	HTML 태그는 강조 표시된 텍스트를 포장하는 데 사용되었습니다	아니요	`span`
말 수가 많은	`boolean`	복용량은 (인쇄) 경고 및 오류 메시지를 출력해야합니다.	아니요	`false`
스타일	`Object`	제어 강조 표시된 영역 스타일	아니요	아래 세부 사항

style 필드 옵션 :

이름	유형	설명	필수의	기본
클래스 이름	`string`	랩 요소의 클래스 이름	아니요	`highlight-mengshou-wrap`

exceptSelectors null 또는 Array<string> 필요합니다. ID 선택기, 클래스 선택기 및 태그 선택기를 지원합니다. 예를 들어, H1 및 .title 타이틀 요소를 건너 뛰려면 :

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

2. 정적 방법

`Highlighter.isHighlightSource(source)`

source 하이라이트 소스 객체 인 경우 true , Vice 구절을 반환합니다.

`Highlighter.isHighlightWrapNode($node)`

$node 하이라이트 래퍼 DOM 노드 인 경우 true , Vice 구절을 반환합니다.

3. 인스턴스 방법

`highlighter.run()`

자동 하이라이트를 시작하십시오. 사용자가 텍스트 세그먼트를 선택하면 텍스트에 강조 표시가 자동으로 추가됩니다.

`highlighter.stop()`

자동 하이라이트가 중지됩니다.

`highlighter.dispose()`

더 이상 형광펜을 원하지 않으면 먼저 전화를 걸어야합니다. 일부 청취자를 제거하고 일부 정리를 수행합니다.

`highlighter.fromRange(range)`

Range 객체를 전달할 수 있으며 강조 표시됩니다. window.getSelection().getRangeAt(0) 사용하여 범위 객체를 가져 오거나 document.createRange() 사용하여 새 범위를 만들 수 있습니다.

벨로우로 사용하십시오.

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

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

대부분,이 API를 사용하여 백엔드에서 저장된 지속적인 정보로 텍스트를 강조 표시합니다.

이 네 가지 값은 HighlightSource 객체에서 나온 것입니다. HighlightSource 객체는 강조 표시된 영역이 생성 될 때 웹 하이리터가 만든 특수 객체입니다. 백엔드 (데이터베이스)의 지속성을 위해서는 DOM 노드를 나타내는 데이터 구조를 찾아야합니다. 이 구조는 웹 하이리터에서 HighlightSource 라고합니다.

네 가지 속성의 의미 :

시작 Object : 시작 요소에 대한 메타 정보
엔드 Object : 그 다음에 대한 메타 정보
텍스트 string : 텍스트 내용
ID string : 고유 ID

`highlighter.remove(id)`

고유 한 ID로 강조 표시된 영역을 제거하십시오. ID는 기본적으로 Web-Highlighter에 의해 생성됩니다. 자신의 규칙에 대한 후크를 추가 할 수도 있습니다. 여기에 문서를 고리합니다.

`highlighter.removeAll()`

루트에 속하는 강조 표시된 모든 영역을 제거하십시오.

`highlighter.addClass(className, id)`

고유 한 ID로 강조 표시된 영역 (랩 요소)에 대한 클래스 이름을 추가하십시오. 이 API를 사용하여 강조 표시된 영역 스타일을 변경할 수 있습니다.

`highlighter.removeClass(className, id)`

고유 한 ID로 클래스 이름을 제거하십시오. highlighter.addClass 의 역 작동입니다.

`highlighter.getDoms([id])`

강조 표시된 영역에서 모든 랩 노드를 가져옵니다. 강조 표시된 영역에는 많은 세그먼트가 포함될 수 있습니다. 이 세그먼트를 감싸는 모든 DOM 노드를 반환합니다.

id 전달되지 않으면 모든 영역의 랩 노드를 반환합니다.

`highlighter.getIdByDom(node)`

DOM 노드가있는 경우 고유 한 하이라이트 ID를 반환 할 수 있습니다. 비 래퍼 요소를 통과 할 때 가장 가까운 조상 래퍼 노드가 있습니다.

`highlighter.getExtraIdByDom(node)`

DOM 노드가 있으면 고유 한 하이라이트 ID를 반환 할 수 있습니다. 비 래퍼 요소를 통과 할 때 가장 가까운 조상 래퍼 노드가 있습니다.

`highlighter.setOption(opt)`

이 API를 사용하여 형광펜의 옵션을 변경할 수 있습니다. 매개 변수의 구조는 생성자와 동일합니다. 부분 옵션을 전달할 수 있습니다.

4. 이벤트 리스너

Web-Highlighter는 청취자를 사용하여 이벤트를 처리합니다.

예를 들어

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

콜백 함수는 세 가지 매개 변수를받습니다.

데이터 any : 이벤트 데이터
인스턴트 Highlighter : 현재 형광펜 인스턴스
E Event : 일부 이벤트는 브라우저 (예 : 클릭)에 의해 트리거되며 Web-Highter는이를 노출시킵니다.

Highlighter.event 는 EventType 유형입니다. ： 포함

EventType.CLICK : 강조 표시된 영역을 클릭하십시오
EventType.HOVER : 마우스 강조 표시된 영역으로 들어갑니다
EventType.HOVER_OUT : 마우스 강조 표시된 영역을 떠납니다
EventType.CREATE : 강조 표시된 영역이 생성됩니다
EventType.REMOVE : 강조 표시된 영역이 제거됩니다

이벤트마다 data 가 다릅니다. 아래 속성 :

`EventType.CLICK`

이름	설명	유형
`id`	하이라이트 ID	끈

`EventType.HOVER`

이름	설명	유형
`id`	하이라이트 ID	끈

`EventType.HOVER_OUT`

이름	설명	유형
`id`	하이라이트 ID	끈

`EventType.CREATE`

매개 변수 없음 e

이름	설명	유형
`source`	`HighlightSource` 객체	정렬
`type`	창조 이유	끈

source HighlightSource 객체입니다. 강조 표시된 영역이 생성 될 때 Web-Highlighter가 만든 객체입니다. Backend (Database)의 지속성을 위해서는 브라우저에서 DOM 노드를 나타 내기 위해 직렬화 ( JSON.stringify() )를 사용할 수있는 데이터 구조를 사용해야합니다. HighlightSource 이를 위해 설계된 데이터 구조입니다.

type 강조 표시된 영역이 작성되는 이유를 설명합니다. 이제 type from-input 과 from-store 두 가지 가능한 값이 있습니다. from-input 사용자 선택으로 인해 강조 표시된 영역이 생성됨을 보여줍니다. from-store 스토리지에서 그것을 의미합니다.

`EventType.REMOVE`

매개 변수 없음 e

이름	설명	유형
`ids`	하이라이트 ID 목록	정렬

5. 후크

후크를 사용하면 강조 흐름을 강력하게 제어 할 수 있습니다. 후크로 논리를 거의 사용자 정의 할 수 있습니다. '사전'부분에서 더 많은 것을보십시오.

호환성

선택 API에 따라 다릅니다.

IE 11
가장자리
Firefox 52+
크롬 15+
사파리 5.1+
오페라 15+

모바일 지원 : 모바일 장치에서 모바일 장치를 자동으로 감지하고 모바일 장치에서 터치 이벤트를 사용합니다.

전진

그것은 강조적 인 행동을 자신의 것만으로 더 잘 제어 할 수 있도록 약간의 고리를 제공합니다.

후크에 대해 자세히 알아 보려면이 문서를 읽으십시오.

특허

MIT

확장하다

추가 정보

버전 v0.7.4
유형 웹사이트 데이터
업데이트 시간 2025-04-13
크기 1.95MB
출처 Github

web highlighter

Web Highlighter ? ️

배경

설치하다

용법

예

작동 방식

아피스

1. 옵션

2. 정적 방법

Highlighter.isHighlightSource(source)

Highlighter.isHighlightWrapNode($node)

3. 인스턴스 방법

highlighter.run()

highlighter.stop()

highlighter.dispose()

highlighter.fromRange(range)

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

highlighter.remove(id)

highlighter.removeAll()

highlighter.addClass(className, id)

highlighter.removeClass(className, id)

highlighter.getDoms([id])

highlighter.getIdByDom(node)

highlighter.getExtraIdByDom(node)

highlighter.setOption(opt)