Unduh web highlighter - Unduh Kode Sumber web highlighter

web highlighter

Data situs web

v0.7.4

Unduh

`Web Highlighter` ? ️

Lib no-dependency untuk penyorotan teks & kegigihan di situs web mana pun? ️

Bahasa Inggris | 简体中文

Latar belakang

Ini dari sebuah ide: sorot teks di situs web dan simpan area yang disorot seperti apa yang Anda lakukan di PDF.

Jika Anda pernah mengunjungi Medium.com, Anda harus mengetahui fitur Sorot Catatan: Pengguna memilih segmen teks dan klik tombol 'Sorot'. Kemudian teks akan disorot dengan warna latar belakang yang bersinar. Selain itu, area yang disorot akan disimpan dan dipulihkan ketika Anda mengunjunginya lain kali. Ini seperti demo sederhana di bawahnya.

Ini adalah fitur yang berguna bagi pembaca. Jika Anda seorang pengembang, Anda mungkin ingin situs web Anda mendukungnya dan menarik lebih banyak kunjungan. Jika Anda seorang pengguna (seperti saya), Anda mungkin ingin plugin browser melakukan ini.

Untuk alasan ini, repo (web-highlight) bertujuan untuk membantu Anda menerapkan note-note di situs web mana pun dengan cepat (misalnya blog, pemirsa dokumen, buku online, dan sebagainya). Ini berisi kemampuan inti untuk menyoroti dan kegigihan. Dan Anda dapat menerapkan produk Anda sendiri dengan beberapa API yang mudah digunakan. Ini telah digunakan untuk situs kami dalam produksi.

Memasang

npm i web-highlighter

Penggunaan

Hanya dua baris, disorot saat teks dipilih.

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

Jika Anda membutuhkan kegigihan, empat baris membuatnya.

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

Contoh

Contoh yang lebih kompleks

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

Selain itu, ada contoh dalam repo ini (dalam folder example ). Untuk bermain dengannya, Anda hanya perlu ——

Pertama masukkan repositori dan jalankan

npm i

Kemudian mulailah contohnya

 npm start

Akhirnya kunjungi http://127.0.0.1:8085/

Produk nyata lainnya yang dibangun dengan wighlighter web (untuk area penyorotan di sebelah kiri):

sampel produk

Cara kerjanya

Ini akan membaca rentang yang dipilih berdasarkan Selection API . Maka informasi rentang akan dikonversi ke struktur data yang dapat diserialisasi sehingga dapat disimpan di backend. Ketika pengguna mengunjungi halaman Anda lain kali, data ini akan dikembalikan dan deserialisasi di halaman Anda. Struktur data adalah Tech Stack Independent. Jadi, Anda dapat menggunakan halaman 'statis' apa pun yang dibuat dengan React / Vue / Angular / JQuery dan lainnya.

Untuk detail lebih lanjut, silakan baca artikel ini (dalam bahasa Cina).

Lebah

1. Opsi

 const highlighter = new Highlighter ( [ opts ] )

Buat instance highlighter baru.

opts akan digabungkan ke dalam opsi default (ditampilkan di bawah).

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

Semua opsi:

nama	jenis	keterangan	diperlukan	bawaan
$ root	`Dokumen	Htmlelement`	wadah untuk memungkinkan menyorot	TIDAK
kecuali selektor	`Array<string>`	Jika suatu elemen cocok dengan pemilih, itu tidak akan disorot	TIDAK	`null`
pembungkus	`string`	Tag HTML yang digunakan untuk membungkus teks yang disorot	TIDAK	`span`
verbose	`boolean`	dosisnya perlu mengeluarkan (mencetak) beberapa pesan peringatan dan kesalahan	TIDAK	`false`
gaya	`Object`	Kontrol gaya area yang disorot	TIDAK	Detail di bawah ini

Opsi Bidang style :

nama	jenis	keterangan	diperlukan	bawaan
ClassName	`string`	The ClassName for Wrap Element	TIDAK	`highlight-mengshou-wrap`

exceptSelectors membutuhkan null atau Array<string> . Ini mendukung pemilih ID, pemilih kelas, dan pemilih tag. Misalnya, untuk melewatkan elemen h1 dan .title :

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

2. Metode statis

`Highlighter.isHighlightSource(source)`

Jika source adalah objek sumber sorot, itu akan mengembalikan true , sebaliknya.

`Highlighter.isHighlightWrapNode($node)`

Jika $node adalah simpul dom pembungkus sorot, itu akan mengembalikan true , sebaliknya.

3. Metode instan

`highlighter.run()`

Mulailah cahaya otomatis. Ketika pengguna memilih segmen teks, penyorotan akan ditambahkan ke teks secara otomatis.

`highlighter.stop()`

Itu akan menghentikan lampu-otomatis.

`highlighter.dispose()`

Ketika Anda tidak menginginkan stabilo lagi, ingatlah untuk menyebutnya terlebih dahulu. Ini akan menghapus beberapa pendengar dan melakukan pembersihan.

`highlighter.fromRange(range)`

Anda dapat meneruskan objek Range untuk itu dan kemudian akan disorot. Anda dapat menggunakan window.getSelection().getRangeAt(0) untuk mendapatkan objek rentang atau menggunakan document.createRange() untuk membuat rentang baru.

Gunakan sebagai di bawah:

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

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

Sebagian besar, Anda menggunakan API ini untuk menyorot teks dengan informasi yang ada yang disimpan dari backend.

Keempat nilai ini berasal dari objek HighlightSource . Objek HighlightSource adalah objek khusus yang dibuat oleh Web-Highlighter ketika area yang disorot dibuat. Untuk ketekunan dalam backend (database), perlu menemukan struktur data untuk mewakili simpul DOM. Struktur ini disebut HighlightSource di Web-Highlighter.

Makna empat atribut:

Object Mulai: Info Meta Tentang Elemen Awal
Object Akhir: Info Meta Tentang Elemen Akhir
string Teks: Konten Teks
ID string : ID Unik

`highlighter.remove(id)`

Hapus (Bersihkan) Area yang disorot oleh ID uniknya. ID akan dihasilkan oleh Web-highlighter secara default. Anda juga dapat menambahkan pengait untuk aturan Anda sendiri. Hooks Doc di sini.

`highlighter.removeAll()`

Hapus semua area yang disorot milik akar.

`highlighter.addClass(className, id)`

Tambahkan nama class untuk area yang disorot (elemen bungkus) dengan ID unik. Anda dapat mengubah gaya area yang disorot dengan menggunakan API ini.

`highlighter.removeClass(className, id)`

Hapus nama class dengan ID unik. Ini adalah highlighter.addClass dari operasi terbalik.

`highlighter.getDoms([id])`

Dapatkan semua node bungkus di area yang disorot. Area yang disorot mungkin berisi banyak segmen. Ini akan mengembalikan semua node Dom yang membungkus segmen ini.

Jika id tidak dilewati, itu akan mengembalikan semua node bungkus area.

`highlighter.getIdByDom(node)`

Jika Anda memiliki simpul DOM, itu dapat mengembalikan ID sorot unik untuk Anda. Saat melewati elemen non-wrapper, ia akan menemukan node pembungkus leluhur terdekat.

`highlighter.getExtraIdByDom(node)`

Jika Anda memiliki simpul DOM, itu dapat mengembalikan ID sorot unik ekstra untuk Anda. Saat melewati elemen non-wrapper, ia akan menemukan node pembungkus leluhur terdekat.

`highlighter.setOption(opt)`

Anda dapat menggunakan API ini untuk mengubah opsi highlighter. Struktur parameter sama dengan konstruktor. Anda dapat melewati opsi parsial.

4. Pendengar acara

Web-highlighter menggunakan pendengar untuk menangani acara.

misalnya

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

Fungsi panggilan balik akan menerima tiga parameter:

DATA any : DATA ACARA
Inst Highlighter : Instance Highlighter saat ini
E Event : Beberapa acara dipicu oleh browser (seperti klik), web-highlighter akan mengeksposnya

Highlighter.event adalah tipe EventType . Itu berisi ：

EventType.CLICK : Klik area yang disorot
EventType.HOVER : Mouse Masuk ke area yang disorot
EventType.HOVER_OUT : mouse meninggalkan area yang disorot
EventType.CREATE : Area yang disorot dibuat
EventType.REMOVE : Area yang disorot dihapus

Acara yang berbeda memiliki data yang berbeda. Atribut di bawah ini:

`EventType.CLICK`

nama	keterangan	jenis
`id`	ID highlight	rangkaian

`EventType.HOVER`

nama	keterangan	jenis
`id`	ID highlight	rangkaian

`EventType.HOVER_OUT`

nama	keterangan	jenis
`id`	ID highlight	rangkaian

`EventType.CREATE`

Tidak ada parameter e

nama	keterangan	jenis
`source`	Objek `HighlightSource`	Array
`type`	Alasan Menciptakan	rangkaian

source adalah objek HighlightSource . Ini adalah objek yang dibuat oleh Web-highlighter ketika area yang disorot dibuat. Untuk ketekunan dalam backend (database), perlu menggunakan struktur data yang dapat diserialisasi ( JSON.stringify() ) untuk mewakili simpul DOM di browser. HighlightSource adalah struktur data yang dirancang untuk ini.

type menjelaskan mengapa area yang disorot dibuat. Sekarang type memiliki dua nilai yang mungkin: from-input dan from-store . from-input menunjukkan bahwa area yang disorot dibuat karena pilihan pengguna. from-store berarti dari penyimpanan.

`EventType.REMOVE`

Tidak ada parameter e

nama	keterangan	jenis
`ids`	Daftar ID Sorotan	Array

5. Kait

Hooks memungkinkan Anda mengontrol aliran penyorotan dengan kuat. Anda hampir dapat menyesuaikan logika apa pun dengan kait. Lihat lebih banyak di bagian 'Advance'.

Kesesuaian

Itu tergantung pada API seleksi.

Yaitu 11
Tepian
Firefox 52+
Chrome 15+
Safari 5.1+
Opera 15+

Dukungan Seluler: Secara otomatis mendeteksi apakah perangkat seluler dan menggunakan acara Touch saat di perangkat seluler.

Maju

Ini memberikan beberapa kait untuk Anda sehingga perilaku penyorotan dapat dikontrol lebih baik oleh Anda sendiri.

Untuk mempelajari lebih lanjut tentang kait, baca dokumen ini.

Lisensi

Mit

Memperluas

Informasi Tambahan

Versi v0.7.4
Tipe Data situs web
Waktu Pembaruan 2025-04-13
ukuran 1.95MB
Berasal dari Github

Aplikasi Terkait

web php

2024-11-06
papan pesan bintang web

2011-12-06
sistem WEB FTP

2009-05-21
WEB

2009-04-28
WEB

2009-04-22
Web Sumber Terbuka Sylvan

2009-04-20

Direkomendasikan untuk Anda

chat.petals.dev

Kode sumber lainnya

1.0.0
GPT Prompt Templates

Kode sumber lainnya

1.0.0
GPTyped

Kode sumber lainnya

GPTyped 1.0.5
Twitter Sentiment Analysis on Flask App

Data situs web

1.0.0
data science app road accident analysis

Data situs web

1.0.0
static web apps cli

Data situs web

v2.0.2
Google Dorks

Kode sumber lainnya

1.0
shepherd

Kode sumber lainnya

v6.1.6-react-shepherd: Prepare Release (#3063)
mongo express

Kode sumber lainnya

v1.1.0-rc-3

Informasi Terkait Semua

web highlighter

Web Highlighter ? ️

Latar belakang

Memasang

Penggunaan

Contoh

Cara kerjanya

Lebah

1. Opsi

2. Metode statis

Highlighter.isHighlightSource(source)

Highlighter.isHighlightWrapNode($node)

3. Metode instan

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)