Utilisation d'un autre élément que le document lors de la création du surligneur

Question

J'utilise le module highlighter de rangy pour mettre en évidence une certaine partie de la page HTML. Un div spécifique va utiliser le module uniquement qui est en fait une directive angulaire. Je persiste dans la plage de mise en évidence dans le backend et la restaure lorsque la page est à nouveau chargée. C'est parce que je veux persister les faits saillants. Le problème auquel je fais face est que la page a peu de composants dynamiques qui peuvent ou peuvent ne pas changer à chaque chargement de page. Cela crée des problèmes lors du rendu des surlignages enregistrés. Pour résoudre ce problème, j'ai essayé d'utiliser l'élément statique, tout en créant le surligneur, en utilisant le code suivant

var highlighter = rangy.createHighlighter(element); 

Cela m'a donné l'erreur suivante -

TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'. 
    at WrappedRange.api.createCoreModule.rangeProto.setStart (allPluginJsPartTwo.js:42934) 
    at WrappedRange.moveToBookmark (allPluginJsPartTwo.js:42427) 
    at Object.characterRangeToRange (allPluginJsPartTwo.js:45712) 
    at Highlight.getRange (allPluginJsPartTwo.js:45816) 
    at Highlight.apply (allPluginJsPartTwo.js:45837) 
    at Highlighter.deserialize (allPluginJsPartTwo.js:46203) 
    at allCommonJs.js:11098 
    at processQueue (allFrameworkJs.js:14804) 
    at allFrameworkJs.js:14820 
    at Scope.$eval (allFrameworkJs.js:16064) 

(S'il vous plaît ignorer les noms de fichier JS et lignes de code.Ils sont fusionnés par grognement.) L'erreur vient, car un containerNode particulier n'est pas défini. Le containerNode qui manque fondamentalement d'ici est défini comme element.body qui est indéfini pour tout élément DOM excepté l'élément document.
J'ai essayé d'utiliser la solution de contournement suivante.

element.body = document.body; 

qui faisait exactement la même chose que l'envoi d'objet document dans createHighlighter(). Donc, je suppose que le rangy.createHighlighter() doit avoir seulement un objet document comme paramètre. Ma question est, comment puis-je le faire fonctionner pour n'importe quel élément, pas seulement l'objet de document?

Answer 1

L'exigence exacte n'est pas supportée par Rangy, cependant, j'ai dû créer une fonction séparée qui n'était pas si complexe et je ne savais pas pourquoi elle n'était pas intégrée avec Rangy.

Mais de toute façon, voici comment je l'ai fait. Rangy utilise des plages de caractères pour sérialiser et désérialiser le contenu mis en surbrillance. J'ai donc normalisé les gammes avant de les sauvegarder jusqu'à la div qui contenait mon HTML statique concerné. Par exemple, si le div avait un identifiant de page-container, j'ai obtenu la gamme de caractères jusqu'à ce que et soustrait cette partie de la plage de la surbrillance avant de sauvegarder et quand je voulais désérialiser la surbrillance, j'ai juste calculé le décalage à nouveau et a ajouté de nouveau à la gamme normalisée et il a travaillé comme par magie :-D

Voici le code qui a calculé le décalage -

function getRangeOffset(){ 
    var converter = highlighter.converter; 
    var pageContainer = document.getElementById('page-container'); 
    var containerRange = rangy.createRange(document); 
    containerRange.setStart(pageContainer,0); 
    var containerCharRange = converter.rangeToCharacterRange(containerRange); 
    var rangeOffset = containerCharRange.start; 
    return parseInt(rangeOffset); 
}