Question

我必须使用iFrame在我的网页上上传ePub文件。现在我想在包含ePub的iFrame中添加突出显示用户所选文本的功能。我目前正在使用Rangy Library进行文本突出显示，它适用于iFrame之外的文本，但不适用于其中的文本。

以下是突出显示的代码：

<!DOCTYPE html>
<head>

<style>
    .highlight {
        background-color: lightgreen;
    }
</style>
<script type="text/javascript" src="../lib/rangy-core.js"></script>
<script type="text/javascript" src="../lib/rangy-classapplier.js"></script>
<script type="text/javascript" src="../lib/rangy-highlighter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-textrange.js"></script>
<script type="text/javascript">

var highlighter;

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

        highlighter = rangy.createHighlighter();
        highlighter.addClassApplier(rangy.createClassApplier("highlight", {
            ignoreWhiteSpace: true,
            tagNames: []
        }));
function highlight() {
        highlighter.highlightSelection('highlight');
 // var iframe = $("iframe")[0];
    var selTxt = rangy.getSelection(myFrame);
            console.log('selTxt: '+selTxt);
        highlighter.highlightRanges('highlight', selTxt._ranges);
}

document.getElementById('highlight').addEventListener('click', highlight);}

</script>
</head>
<body>
<button id="highlight">Highlight</button>

    <div>select to highlight </div>
    <div>line to be highlighted</div>
    <div>line to be highlighted one </div>
        <p>Another <b>paragraph</b></p>

<iframe src="iframe.html" width=500 height=500 name="myFrame"></iframe>
</body>
</html>

这是iframe代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <h1>This is iframe </h1>
  <p>Select content to highlight</p>
  <p>Select text to highlight</p>
</body>
</html>

此代码有效但只突出显示iframe外的文字，我需要它来突出显示iframe中的文字。

突出显示iFrame

0 个答案: