Java腳本使用文本索引突出顯示文本

我正在開發epub閱讀器，並且我想要突出顯示選定的文本並在此HTML的下一次打開期間將其保存，我嘗試了多種方法，但所有這些方法都不使用文本索引例如Java腳本使用文本索引突出顯示文本

function load(){ 
window.document.designMode = "On"; 
window.document.execCommand("hiliteColor", false, 'yellow'); 
    }

請需要幫助在此先感謝

來源

2014-06-22 Ayman

http://stackoverflow.com/questions/3438524/save-highlighted-text-position-in-html-using-javascript – Victor

這個答案顯示如何返回索引，但我們如何使用文本索引來突出顯示？ – Ayman

你可以嘗試Rangy。它是處理跨瀏覽器選擇突出顯示的庫。

隨着Highlighter Module你可以突出顯示所選的文本。

但是，由於HTML是無狀態的，您將無法保存它。您將不得不使用highlighter.serialize()將其序列化，並將序列化的字符串保存到數據庫或cookie。

它看起來是這樣的：

<script> 
    // the highlighter object 
    var highlighter; 

    // function for the highlight button 
    function highlightSelectedText() { 
     highlighter.highlightSelection("highlight"); 
    } 

    // function for the unhighlight button 
    function removeHighlightFromSelectedText() { 
     highlighter.unhighlightSelection(); 
    } 

    window.onload = function() { 
     rangy.init(); 

     highlighter = rangy.createHighlighter(); 

     highlighter.addClassApplier(rangy.createCssClassApplier("highlight", { 
      ignoreWhiteSpace: true, 
      tagNames: ["span", "a"] 
     })); 

     // load the selection 
     var selectionSerialized = loadSelection(); 
     if (selectionSerialized) { 
      highlighter.deserialize(selectionSerialized); 
     } 
    }; 

    window.onunload = saveSelection; 

    function saveSelection() { 
     var selectionSerialized = highlighter.serialize() 

     // save "selectionSerialized" to a cookie or use 
     // a webservice to send it to the server and save it there. 
    } 

    function loadSelection(){ 
     // here you must fetch the serialized string from the cookie or 
     // from your webservice and return it. 
    } 

</script> 
<input type="button" onclick="highlightSelectedText()" 
    value="Highlight selection"> 
<input type="button" onclick="removeHighlightFromSelectedText()" 
    value="Remove highlights from selection"> 
<div> bla bla bla .... </div>

因爲我不知道你是怎麼想存儲序列化的字符串，我跳過保存和加載部件。

來源

2014-06-22 13:01:35 Victor

我試過這個庫的演示，但這是我第一次使用java腳本，我想知道如何在我的java腳本代碼中導入庫的方式，我非常抱歉。 – Ayman

Java腳本使用文本索引突出顯示文本

回答

相關問題