web highlighter

Web Highlighter ؟ ️

lib lib لا يعتمد على تسليط الضوء على النص والمثابرة على أي موقع ويب؟ ️

---

الإنجليزية | 简体中文

خلفية

إنها من فكرة: تسليط الضوء على النصوص على الموقع الإلكتروني وحفظ المناطق المميزة تمامًا مثل ما تفعله في PDF.

إذا كنت قد زرت Medium.com من أي وقت مضى ، فيجب أن تعرف ميزة تسليط الضوء على الملاحظات: يحدد المستخدمون شريحة نصية وانقر فوق الزر "Aightlight". ثم سيتم تسليط الضوء على النص بلون خلفية مشرقة. علاوة على ذلك ، سيتم حفظ المناطق المميزة واستردادها عند زيارتها في المرة القادمة. إنه مثل الربط التجريبي البسيط.

هذه ميزة مفيدة للقراء. إذا كنت مطورًا ، فقد ترغب في دعم موقع الويب الخاص بك وجذب المزيد من الزيارات. إذا كنت مستخدمًا (مثلي) ، فقد ترغب في القيام بذلك.

لهذا السبب ، يهدف Repo (Web-Highlighter) إلى مساعدتك في تنفيذ تسليط الضوء على أي موقع ويب بسرعة (مثل المدونات ومشاهدي المستندات والكتب عبر الإنترنت وما إلى ذلك). أنه يحتوي على القدرات الأساسية لتسليط الضوء على الملاحظة والمثابرة. ويمكنك تنفيذ منتجك الخاص من خلال بعض واجهات برمجة التطبيقات سهلة الاستخدام. وقد تم استخدامه لمواقعنا في الإنتاج.

ثَبَّتَ

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 . بعد ذلك ، سيتم تحويل معلومات النطاق إلى بنية بيانات قابلة للتسلسل بحيث يمكن تخزينها في الواجهة الخلفية. عندما يقوم المستخدمون بزيارة صفحتك في المرة القادمة ، سيتم إرجاع هذه البيانات وإلغاء التهم في صفحتك. بنية البيانات هي Tech Stack مستقلة. حتى تتمكن من استخدام أي صفحات "ثابتة" مصنوعة من 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	اسم classname لعنصر التفاف	لا	highlight-mengshou-wrap

exceptSelectors يحتاجون إلى null أو Array<string> . وهو يدعم محددات المعرف ومحددات الفصول واختيار العلامات. على سبيل المثال ، لتخطي عناصر H1 و .title :

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

2. طرق ثابتة

Highlighter.isHighlightSource(source)

إذا كان source هو كائن مصدر تمييز ، true VICE VERSE.

Highlighter.isHighlightWrapNode($node)

إذا كانت $node عبارة عن عقدة DOM CROFPER المميزة ، فستعود VICE VERSE true .

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)

في الغالب ، يمكنك استخدام واجهة برمجة التطبيقات هذه لتسليط الضوء على النص من خلال المعلومات المستمرة المخزنة من الخلفية.

هذه القيم الأربع هي من كائن HighlightSource . كائن HighlightSource هو كائن خاص تم إنشاؤه بواسطة Web-Highlighter عندما يتم إنشاء المساحة المميزة. من أجل الثبات في الواجهة الخلفية (قاعدة البيانات) ، من الضروري العثور على بنية بيانات لتمثيل عقدة DOM. ويسمى هذا الهيكل HighlightSource في ويب Highlighter.

معاني أربع سمات:

• بدء Object : معلومات التعريف حول عنصر البداية
• Object النهاية: معلومات التعريف حول العنصر النهائي
• string النص: محتوى نص
• string الهوية: معرف فريد

highlighter.remove(id)

قم بإزالة (تنظيف) منطقة مميزة بواسطة معرف فريد. سيتم إنشاء المعرف بواسطة Web-Highlighter افتراضيًا. يمكنك أيضًا إضافة خطاف لقاعدتك الخاصة. دوك السنانير هنا.

highlighter.removeAll()

إزالة جميع المناطق المميزة التي تنتمي إلى الجذر.

highlighter.addClass(className, id)

أضف اسم ClassName للمناطق المميزة (عناصر التفاف) بواسطة معرف فريد. يمكنك تغيير نمط المنطقة المميزة باستخدام واجهة برمجة التطبيقات هذه.

highlighter.removeClass(className, id)

قم بإزالة اسم className بواسطة معرف فريد. إنها عملية highlighter.addClass .

highlighter.getDoms([id])

الحصول على جميع العقد التفاف في منطقة مميزة. قد تحتوي المنطقة المميزة على العديد من الأجزاء. سوف يعيد جميع عقد DOM لف هذه القطاعات.

إذا لم يتم تمرير id ، فسوف يعيد جميع العقد التفاف في المناطق.

highlighter.getIdByDom(node)

إذا كان لديك عقدة DOM ، فيمكنك إرجاع معرف أبرز فريد لك. عند اجتياز عنصر غير وارد ، سيجد أقرب عقدة غلاف أجداد.

highlighter.getExtraIdByDom(node)

إذا كان لديك عقدة DOM ، فيمكنك إرجاع معرف أبرز فريد إضافي لك. عند اجتياز عنصر غير وارد ، سيجد أقرب عقدة غلاف أجداد.

highlighter.setOption(opt)

يمكنك استخدام واجهة برمجة التطبيقات هذه لتغيير خيارات Highlighter. بنية المعلمات هي نفس المُنشئ. يمكنك تمرير خيارات جزئية.

4. مستمع الحدث

استخدم المستمعين على شبكة الإنترنت للمستمعين للتعامل مع الأحداث.

على سبيل المثال

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

ستتلقى وظيفة رد الاتصال ثلاث معلمات:

• البيانات any : بيانات الحدث
• Inst Highlighter : مثيل تمييز الحالي
• Event E: يتم تشغيل بعض الأحداث بواسطة المتصفح (مثل النقر) ، وسوف يعرضه Web-Highlighter

Highlighter.event هو نوع EventType . أنه يحتوي على ：

• EventType.CLICK : انقر فوق المنطقة المميزة
• EventType.HOVER : الماوس أدخل المنطقة المميزة
• 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. السنانير

السنانير تتيح لك التحكم في تدفق تسليط الضوء بقوة. يمكنك تقريبًا تخصيص أي منطق بواسطة السنانير. شاهد المزيد في الجزء "المتقدم".

التوافق

ذلك يعتمد على اختيار API.

• أي 11
• حافة
• Firefox 52+
• Chrome 15+
• Safari 5.1+
• أوبرا 15+

يدعم الهاتف المحمول: اكتشف ما إذا كانت الأجهزة المحمولة تلقائيًا واستخدم أحداث اللمس عندما تكون على الأجهزة المحمولة.

يتقدم

إنه يوفر بعض السنانير لك بحيث يمكن التحكم في سلوك تسليط الضوء بشكل أفضل من خلال.

لمعرفة المزيد عن السنانير ، اقرأ هذا المستند.

رخصة

معهد ماساتشوستس للتكنولوجيا