i trying below thing.
user select text on webpage , want highlight text using color. , want store information database when user come page again can show highlighted text. below approach.
- when user select text use window.getselection() api , find selected text.(successfully done)
- then find start element using
anchornodeinwindow.getselection().and find xpath of element store in database.(successfully done) - i same end element using
basenodeinwindow.getselection().and find xpath of element store in database.(successfully done) - now starting , ending position in paticular node.(i confused here, can position using anchoroffset relative position particular element not parent element).
-- when user refresh page fetch highlights database , highlight highlighted parts.
- find elements(start , end) using xpath. (successfully done)
- when start highlighting wrap text tag highlight text
<span class="highlight">.......</span>. - when add highlights tags again xpath change elements , when user delete highlight text xpaths change.(i confused here). 4.suppose structure complex
<div><pre>hello<code> test</code></pre></div>, user selecting text "e" in hello "last t" in test how highlight that.
there 1 library "http://annotatorjs.org/".i can need that. missing here? or way wrong here?any helpful.
i have tried below code.although not full code because big.
function getxpath(element) { var xpath = ''; (; 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(/ /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 hl tag 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') } }) }
Comments
Post a Comment