หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

Web Highlighter ? ️

LIB ที่ไม่ต้องพึ่งพา

ภาษาอังกฤษ | 简体中文

พื้นหลัง

มันมาจากแนวคิด: เน้นข้อความบนเว็บไซต์และบันทึกพื้นที่ที่เน้นเช่นเดียวกับสิ่งที่คุณทำใน PDF

หากคุณเคยเยี่ยมชม Medium.com คุณต้องรู้คุณสมบัติของการไฮไลต์หมายเหตุ: ผู้ใช้เลือกเซ็กเมนต์ข้อความและคลิกปุ่ม 'ไฮไลต์' จากนั้นข้อความจะถูกเน้นด้วยสีพื้นหลังที่ส่องแสง นอกจากนี้พื้นที่ที่เน้นจะได้รับการบันทึกและกู้คืนเมื่อคุณเยี่ยมชมในครั้งต่อไป มันเหมือนกับการสาธิตแบบง่าย ๆ

นี่เป็นคุณสมบัติที่มีประโยชน์สำหรับผู้อ่าน หากคุณเป็นนักพัฒนาคุณอาจต้องการให้เว็บไซต์ของคุณสนับสนุนและดึงดูดการเข้าชมมากขึ้น หากคุณเป็นผู้ใช้ (เช่นฉัน) คุณอาจต้องการให้เบราว์เซอร์ปลินฟินทำสิ่งนี้

ด้วยเหตุนี้ Repo (เว็บไฮไลต์) จึงมีจุดมุ่งหมายเพื่อช่วยให้คุณใช้การไฮไลต์โน้ตบนเว็บไซต์ใด ๆ ได้อย่างรวดเร็ว (เช่นบล็อกผู้ชมเอกสารหนังสือออนไลน์และอื่น ๆ ) มันมีความสามารถหลักสำหรับการเน้นและการคงอยู่ของโน้ต และคุณสามารถใช้ผลิตภัณฑ์ของคุณเองโดย 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 ( )

นอกจากนี้ยังมีตัวอย่างใน repo นี้ (ในโฟลเดอร์ example ) ในการเล่นกับมันคุณแค่ต้องการ - -

ครั้งแรกป้อนที่เก็บและเรียกใช้ 

npm i

จากนั้นเริ่มตัวอย่าง 

 npm start

ในที่สุดก็เยี่ยมชม http://127.0.0.1:8085/

ผลิตภัณฑ์จริงอีกชิ้นที่สร้างขึ้นด้วยเว็บสูง (สำหรับพื้นที่ไฮไลต์ทางด้านซ้าย):

ตัวอย่างผลิตภัณฑ์

มันทำงานอย่างไร

มันจะอ่านช่วงที่เลือกโดย Selection API จากนั้นข้อมูลของช่วงจะถูกแปลงเป็นโครงสร้างข้อมูลแบบอนุกรมเพื่อให้สามารถจัดเก็บในแบ็กเอนด์ เมื่อผู้ใช้เยี่ยมชมหน้าของคุณในครั้งต่อไปข้อมูลเหล่านี้จะถูกส่งกลับและ deserialized ในหน้าของคุณ โครงสร้างข้อมูลเป็นสแต็คเทคอิสระ ดังนั้นคุณสามารถใช้ในหน้า 'คงที่' ที่ทำด้วย React / Vue / Angular / jQuery และอื่น ๆ

สำหรับรายละเอียดเพิ่มเติมโปรดอ่านบทความนี้ (เป็นภาษาจีน)

APIs

1. ตัวเลือก 

 const highlighter = new Highlighter ( [ opts ] )

สร้างอิน highlighter ใหม่

opts จะถูกรวมเข้ากับตัวเลือกเริ่มต้น (แสดงเสียงร้อง) 

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

ตัวเลือกทั้งหมด:

ชื่อ พิมพ์ คำอธิบาย ที่จำเป็น ค่าเริ่มต้น
$ root `เอกสาร htmlelement` คอนเทนเนอร์เพื่อเปิดใช้งานการไฮไลต์ เลขที่
ยกเว้น leplectors Array<string> หากองค์ประกอบตรงกับตัวเลือกมันจะไม่ถูกเน้น เลขที่ null
ทำให้เสีย string แท็ก HTML ที่ใช้ในการห่อข้อความที่เน้น เลขที่ span
verbose boolean ปริมาณที่จำเป็นในการส่งออก (พิมพ์) ข้อความเตือนและข้อผิดพลาดบางอย่าง เลขที่ false
สไตล์ Object การควบคุมสไตล์พื้นที่ไฮไลต์ เลขที่ รายละเอียดด้านล่าง

ตัวเลือกฟิลด์ style :

ชื่อ พิมพ์ คำอธิบาย ที่จำเป็น ค่าเริ่มต้น
ชื่อชั้นเรียน string คลาสคลาสสำหรับองค์ประกอบห่อ เลขที่ highlight-mengshou-wrap

exceptSelectors ต้องการ null หรือ Array<string> รองรับ ID Selectors ตัวเลือกคลาสและตัวเลือกแท็ก ตัวอย่างเช่นการข้ามองค์ประกอบ H1 และ .title : 

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

2. วิธีการคงที่

Highlighter.isHighlightSource(source)

หาก source เป็นวัตถุแหล่งไฮไลต์มันจะกลับมา true

Highlighter.isHighlightWrapNode($node)

หาก $node เป็นไฮไลต์ wrapper dom node มันจะส่งคืน true Vice Verse

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 ข้อความ: เนื้อหาข้อความ
  • id string : id ที่ไม่ซ้ำกัน

highlighter.remove(id)

ลบ (ทำความสะอาด) พื้นที่ไฮไลต์โดย ID ที่ไม่ซ้ำกัน ID จะถูกสร้างขึ้นโดย Web-Highlighter โดยค่าเริ่มต้น คุณยังสามารถเพิ่มเบ็ดสำหรับกฎของคุณเอง Hooks Doc ที่นี่

highlighter.removeAll()

ลบพื้นที่ที่เน้นทั้งหมดที่อยู่ในราก

highlighter.addClass(className, id)

เพิ่มชื่อคลาสสำหรับพื้นที่ที่เน้น (องค์ประกอบห่อ) ด้วย ID ที่ไม่ซ้ำกัน คุณสามารถเปลี่ยนสไตล์ของพื้นที่ไฮไลต์โดยใช้ API นี้

highlighter.removeClass(className, id)

ลบ className ด้วย 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
  • Event E: บางเหตุการณ์ถูกเรียกโดยเบราว์เซอร์ (เช่นคลิก) เว็บผู้สูง

Highlighter.event เป็น EventType Type มันมี：

  • 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 เมื่อสร้างพื้นที่ไฮไลต์ สำหรับการคงอยู่ในแบ็กเอนด์ (ฐานข้อมูล) จำเป็นต้องใช้โครงสร้างข้อมูลซึ่งสามารถทำให้เป็นอนุกรม ( JSON.stringify() ) เพื่อแสดงถึงโหนด DOM ในเบราว์เซอร์ HighlightSource เป็นโครงสร้างข้อมูลที่ออกแบบมาสำหรับสิ่งนี้

type อธิบายว่าทำไมพื้นที่ไฮไลต์จึงถูกสร้างขึ้น ตอนนี้ type มีสองค่าที่เป็นไปได้: from-input และ from-store from-input แสดงให้เห็นว่าพื้นที่ไฮไลต์ถูกสร้างขึ้นเนื่องจากการเลือกของผู้ใช้ from-store หมายถึงจากที่เก็บข้อมูล

EventType.REMOVE

ไม่มีพารามิเตอร์ e

ชื่อ คำอธิบาย พิมพ์
ids รายการ ID ไฮไลต์ อาร์เรย์

5. ตะขอ

ตะขอให้คุณควบคุมการไฮไลต์การไหลอย่างมีประสิทธิภาพ คุณสามารถปรับแต่งตรรกะใด ๆ ด้วยตะขอ ดูเพิ่มเติมในส่วน 'ล่วงหน้า'

ความเข้ากันได้

ขึ้นอยู่กับ API ที่เลือก

  • เช่น 11
  • ขอบ
  • Firefox 52+
  • Chrome 15+
  • Safari 5.1+
  • โอเปร่า 15+

รองรับมือถือ: ตรวจจับโดยอัตโนมัติว่าอุปกรณ์มือถือและใช้กิจกรรมสัมผัสเมื่ออยู่บนอุปกรณ์มือถือ

ก้าวหน้า

มันมีตะขอบางอย่างสำหรับคุณเพื่อให้พฤติกรรมการไฮไลต์สามารถควบคุมได้ดีขึ้นด้วยตัวคุณเอง

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตะขออ่านเอกสารนี้

ใบอนุญาต

มิกซ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด