Скачать web highlighter - Загрузка исходного кода web highlighter

web highlighter

Данные веб-сайта

v0.7.4

Скачать

`Web Highlighter` ? ️

LIB беззависимости для освещения текста и настойчивости на любом веб-сайте? ️

Английский | 简体中文

Фон

Это из идеи: выделите тексты на веб -сайте и сохраните выделенные области, подобные тому, что вы делаете в PDF.

Если вы когда -либо посещали Medium.com, вы должны знать функцию выделения примечаний: Пользователи выберите текстовый сегмент и нажимают кнопку «Выделиться». Тогда текст будет выделен сияющим цветом фона. Кроме того, выделенные области будут сохранены и восстановлены, когда вы посетите его в следующий раз. Это как простая демонстрация.

Это полезная функция для читателей. Если вы разработчик, вы можете захотеть поддержать его веб -сайт и привлечь больше посещений. Если вы пользователь (как и я), вы можете захотеть сделать это браузер-плугин.

По этой причине репо (веб-высокий) стремится помочь вам быстро реализовать Nothing Note на любом веб-сайте (например, блоги, зрители документов, онлайн-книги и так далее). Он содержит основные способности для выделения нот и настойчивости. И вы можете реализовать свой собственный продукт с помощью некоторых простых в использовании 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/

Еще один настоящий продукт, созданный с веб-высоким уровнем (для зоны выделения слева):

Образец продукта

Как это работает

Он будет читать выбранный диапазон с помощью 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'
    }
}

Все варианты:

имя	тип	описание	необходимый	по умолчанию
$ root	`Документ	Htmlelement`	контейнер, чтобы включить выделение	Нет
Exceptselectors	`Array<string>`	Если элемент соответствует селектору, он не будет выделен	Нет	`null`
аромат	`string`	TAG HTML, используемый для завершения выделенных текстов	Нет	`span`
многословный	`boolean`	Доза необходимо вывести (распечатать) некоторое предупреждение и сообщение об ошибке	Нет	`false`
стиль	`Object`	Контроль выделяется стиль областей	Нет	Подробности ниже

Варианты поля style :

имя	тип	описание	необходимый	по умолчанию
классное имя	`string`	Имя класса для элемента обертки	Нет	`highlight-mengshou-wrap`

exceptSelectors нуждается null или Array<string> . Он поддерживает селекторы идентификаторов, селекторы класса и селекторы тегов. Например, чтобы пропустить элементы H1 и .title :

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

2. Статические методы

`Highlighter.isHighlightSource(source)`

Если source является основным источником, он вернет true , Vice Sters.

`Highlighter.isHighlightWrapNode($node)`

Если $node является узлом Dom Highlater, он вернет true , Vice Sterse.

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 Object-это специальный объект, созданный Web-Highlighter при создании выделенной области. Для постоянства в бэкэнд (база данных) необходимо найти структуру данных для представления узла DOM. Эта структура называется HighlightSource в веб-высоте.

Значения четырех атрибутов:

Начало Object : мета -информация о начальном элементе
Конечный Object : мета -информация о последующем элементе
Текстовая string : текстовое содержимое
идентификационная string : уникальный идентификатор

`highlighter.remove(id)`

Удалите (очистите) выделенную область уникальным идентификатором. По умолчанию идентификатор будет сгенерирован. Вы также можете добавить крючок для своего собственного правила. Крючны док здесь.

`highlighter.removeAll()`

Удалите все выделенные области, принадлежащие корне.

`highlighter.addClass(className, id)`

Добавьте классное имя для выделенных областей (элементы обертывания) от уникального идентификатора. Вы можете изменить стиль выделенной области, используя этот API.

`highlighter.removeClass(className, id)`

Удалить классное имя с помощью уникального идентификатора. Это highlighter.addClass по обратной работе.

`highlighter.getDoms([id])`

Получите все узлы обертки в выделенной области. Выделенная область может содержать много сегментов. Он вернет все узлы DOM, завершающие эти сегменты.

Если id не пройден, он вернет все области обертков.

`highlighter.getIdByDom(node)`

Если у вас есть узел DOM, он может вернуть уникальный идентификатор выделения для вас. При прохождении элемента, не являющегося хрупким, он найдет ближайший узел обертки предка.

`highlighter.getExtraIdByDom(node)`

Если у вас есть узел DOM, он может вернуть дополнительный уникальный идентификатор выделения для вас. При прохождении элемента, не являющегося хрупким, он найдет ближайший узел обертки предка.

`highlighter.setOption(opt)`

Вы можете использовать этот API, чтобы изменить варианты маркера. Структура параметров такая же, как у конструктора. Вы можете передать частичные варианты.

4. Слушатель событий

Веб-высока используйте слушателей, чтобы справиться с событиями.

например

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

Функция обратного вызовов получит три параметра:

Данные any : данные события
Inst Highlighter : текущий экземпляр Highligher
E Event : какое-то событие запускается браузером (например, Click), Web-Highlighter выставит его

Highlighter.event - это тип EventType . Он содержит ：

EventType.CLICK : нажмите на выделенную область
EventType.HOVER : Mouse Введите выделенную область
EventType.HOVER_OUT : мышь оставить выделенную область
EventType.CREATE : создается выделенная область
EventType.REMOVE : выделенная область удаляется

У разных событий есть разные data . Атрибуты ниже:

`EventType.CLICK`

имя	описание	тип
`id`	Основной идентификатор	нить

`EventType.HOVER`

имя	описание	тип
`id`	Основной идентификатор	нить

`EventType.HOVER_OUT`

имя	описание	тип
`id`	Основной идентификатор	нить

`EventType.CREATE`

Нет параметра e

имя	описание	тип
`source`	`HighlightSource` объект	Множество
`type`	причина создания	нить

source - это объект HighlightSource . Это объект, созданный Web-Highlighter при создании выделенной области. Для постоянства в бэкэнд (база данных) необходимо использовать структуру данных, которая может быть сериализована ( JSON.stringify() ), чтобы представлять узел DOM в браузерах. HighlightSource - это структура данных, разработанная для этого.

type объясняет, почему создается выделенная область. Теперь type имеет два возможных значения: from-input и from-store . from-input показывает, что выделенная область создается из-за выбора пользователя. from-store означает это из хранилища.

`EventType.REMOVE`

Нет параметра e

имя	описание	тип
`ids`	Список идентификатора выделения	Множество

5. Крюки

Крюки позволяют мощно контролировать выделение потока. Вы можете почти настроить любую логику по крючкам. Смотрите больше в «Advance» части.

Совместимость

Это зависит от отбора API.

Т.е. 11
Край
Firefox 52+
Хром 15+
Сафари 5,1+
Opera 15+

Мобильная поддержка: автоматически обнаруживает, мобильные устройства и используйте сенсорные события на мобильных устройствах.

Продвигать

Это обеспечивает некоторые крючки для вас, так что поведение выделения может лучше управлять вашим собственным.

Чтобы узнать больше о крючках, прочитайте этот документ.

Лицензия

Грань

Расширять

Дополнительная информация

Версия v0.7.4
Тип Данные веб-сайта
Время обновления 2025-04-13
размер 1.95MB
От Github

Связанные приложения

web php

2024-11-06
доска объявлений веб-звезды

2011-12-06
ВЕБ-FTP-система

2009-05-21
ВЕБ

2009-04-28
ВЕБ

2009-04-22
Интернет-версия Sylvan с открытым исходным кодом

2009-04-20

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)