Question

我正在开发epub阅读器，我想突出显示所选文本并在下一次打开此HTML时保存它我尝试了多种方法，但所有这些方法都没有使用文本索引例如

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

请帮忙提前致谢

Answer 1

您可以尝试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>

由于我不知道您希望如何存储序列化字符串，因此我跳过了保存和加载部分。

Javascript使用文本索引突出显示文本

1 个答案: