Question

我正在努力做下面的事情。

用户将在网页上选择文字，然后我想使用某种颜色突出显示该文字。而且我还想将这些信息存储到数据库中，这样当用户再次访问该页面时，我可以显示已经突出显示的文本。以下是我的方法。

当用户选择文本时，我将使用window.getSelection（）api并找到所选文本。（已成功完成）
然后我会在anchorNode中使用window.getSelection()找到start元素。我会找到该元素的xpath存储在数据库中。（已成功完成）
我将使用baseNode中的window.getSelection()对结束元素执行相同的操作。我将找到要存储在数据库中的该元素的xpath。（已成功完成）
现在我将在paticular节点中开始和结束位置。（我在这里很困惑，我可以使用anchorOffset获得位置，但这将是特定元素的相对位置而不是父元素。）

- 现在，当用户刷新页面时，我将从数据库中获取所有高光，并突出显示已突出显示的部分。

使用xpath查找元素（开始和结束）。（成功完成）
当我开始突出显示时，我会用标签包装一些文字以突出显示<span class="highlight">.......</span>之类的文字。
当我再次添加那些高亮标记时，xpath将针对所有元素进行更改，并且当用户删除那些高亮文本时，这些xpath将会更改。（我在这里感到困惑）。 4.Suppose结构很复杂，如<div><pre>Hello<code> Test</code></pre></div>，用户正在选择＆＃34; E＆＃34;问候＆＃34;最后T＆＃34;在测试中，而不是如何突出显示。

有一个图书馆＆＃34; http://annotatorjs.org/＆＃34;。我可以说我需要这样的东西。我在这里找不到任何东西？或者我的方式在这里是错的？任何帮助都会有所帮助。

我试过下面的代码。虽然它不是完整的代码，因为它太大了。

function getXPath(element) {
    var xpath = '';
    for (; element && element.nodeType == 1 && element.id !== 'text-wrapper-inner' && element.tagName !== 'HL'; element = element.parentNode) {
        var id = $(element.parentNode).children(element.tagName).index(element) + 1;
        id > 1 ? (id = '[' + id + ']') : (id = '');
        xpath = '/' + element.tagName.toLowerCase() + id + xpath;
    }
    return xpath;
}

function getElementFromXpath(xpath) {
    var element = document.evaluate('./' + xpath, document.getElementById('text-wrapper-inner'), null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    return element;
}

function showHighlightedNotes(ele, offset, id, index) {
    vm.cloneElement = vm.cloneElement || $("#text-wrapper-inner").clone();
    var element = $(vm.cloneElement).children($(ele)[0])[0];
    if (element.nodeType !== 3) {
        var text = element.innerHTML;
        text = text.replace(/&nbsp;/g, " ");
        if (text.indexOf(" ", offset) > -1) {
            var start = text.substr(0, offset);
            var space_pos = text.indexOf(" ", offset);
            var word = "<hl class='highlight' id=" + id + "><sup>[" + index + "]</sup>" + text.substr(offset, (space_pos - offset)) + "</hl>";
            var end = text.substr(space_pos);
            element.innerHTML = start + word + end;
        } else {
            var start = "",
                end = "";
            if (offset === 0) {
                start = "<hl class='highlight' id=" + id + "><sup>[" + index + "]</sup>" + text.substr(offset) + "</hl>";
            } else {
                start = text.substr(0, offset);
                end = "<hl class='highlight' id=" + id + "><sup>[" + index + "]</sup>" + text.substr(offset) + "</hl>";
            }
            element.innerHTML = start + end;
        }
    } else if (element.nodeType === 3) {
        var text = element.nodeValue;
        if (text.indexOf(" ", offset) > -1) {
            var start = text.substr(0, offset);
            var space_pos = text.indexOf(" ", offset);
            var word = "<hl class='highlight' id=" + id + "><sup>[" + index + "]</sup>" + text.substr(offset, (space_pos - offset)) + "</hl>";
            var end = text.substr(space_pos);
            var span = document.createElement('hl');
            span.innerHTML = start + word + end;
            element.parentNode.replaceChild(span, element);
        } else {
            var start = "",
                end = "";
            if (offset === 0) {
                start = "<hl class='highlight' id=" + id + "><sup>[" + index + "]</sup>" + text.substr(offset) + "</hl>";
            } else {
                start = text.substr(0, offset);
                end = "<hl class='highlight' id=" + id + "><sup>[" + index + "]</sup>" + text.substr(offset) + "</hl>";
            }
            var span = document.createElement('hl');
            span.innerHTML = start + end;
            element.parentNode.replaceChild(span, element);
        }

    }
    //Unwrap all HL tag who doesn't have highlight class
    $('hl:not(".highlight")').contents().unwrap();

    $('hl.highlight sup').on('click', function cb(event) {
        vm.mouseOverId = parseInt($(this).parent().attr('id'));

        var mouseX = event.offsetX;//event.pageX - event.target.offsetParent.offsetLeft;
        var mouseY = event.offsetY;//event.pageY - event.target.offsetParent.offsetTop - 50;
        $('.dehighlight-over')
            .css('display', 'inline-block')
            .css('top', mouseY)
            .css('left', mouseX);
    })
    $(document).on('click', function cb(event) {
        if (event.target.tagName !== 'HL' && event.target.tagName !== 'SUP') {
            $('.dehighlight-over').css('display', 'none')
        }
    })
}

使用Javascript

0 个答案: