I want to implement the plugin jQuery Text Highlighter .
I would like to be able to save the highlighted in localstorage . Thus, when reloading the page, the highlighted words continue to be shown.
This is the unedited code:
<script type="text/javascript">
(function () {
var removeBtn = document.getElementById('remove');
var sandbox = document.getElementById('sandbox');
var colors = new ColorPicker(document.querySelector('.color-picker'));
var hltr = new TextHighlighter(sandbox, {
onBeforeHighlight: function (range) {
return window.confirm('Selected text: ' + range + '\nReally highlight?');
},
onAfterHighlight: function (range, highlights) {
window.alert('Created ' + highlights.length + ' highlight(s): ' + highlights.map(function (h) {
return '"' + h.innerText + '"';
}).join(', '));
},
onRemoveHighlight: function (hl) {
return window.confirm('Do you really want to remove: "' + hl.innerText + '"');
}
});
colors.onColorChange(function (color) {
hltr.setColor(color);
});
removeBtn.addEventListener('click', function () {
hltr.removeHighlights();
});
})();
</script>This is the code edited by me, but it does not work:
<script type="text/javascript">
(function () {
var removeBtn = document.getElementById('remove');
var sandbox = document.getElementById('sandbox');
var colors = new ColorPicker(document.querySelector('.color-picker'));
document.getElementById('hltr').value = subr;
var subr = localStorage.getItem('hltr');
var hltr = new TextHighlighter(sandbox, {
onBeforeHighlight: function (range) {
return window.confirm('Selected text: ' + range + '\nReally highlight?');
},
onAfterHighlight: function (range, highlights) {
window.alert('Created ' + highlights.length + ' highlight(s): ' + highlights.map(function (h) {
return '"' + h.innerText + '"';
}).join(', '));
},
onRemoveHighlight: function (hl) {
return window.confirm('Do you really want to remove: "' + hl.innerText + '"');
}
});
colors.onColorChange(function (color) {
hltr.setColor(color);
});
removeBtn.addEventListener('click', function () {
hltr.removeHighlights();
});
})();
</script>