JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-core.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-serializer.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-cssclassapplier.js"></script>
<style>
span.rangee_highlight {background-color: yellow;}
</style>
<script>
$(function () {
// injecting some text inside iframe's body
var iframe = $('iframe')[0],
iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write("<html><head><style>span.rangee_highlight {background-color: yellow;}</style></head><body>Please <b>select some</b> of this text and press the button</body></html>");
iframeDoc.close();
var selection1Storage = ( localStorage['selection1'] !== undefined && localStorage['selection1'] !== null
? JSON.parse(localStorage['selection1'])
: []
),
selection2Storage = ( localStorage['selection2'] !== undefined && localStorage['selection2'] !== null
? JSON.parse(localStorage['selection2'])
: []
);
// Highlighting previous selection (localStorage)
rangee.init('iframe', iframe.contentWindow.window || iframe.contentDocument.defaultView);
rangee.highlight(selection1Storage);
rangee.init('div', window);
rangee.highlight(selection2Storage);
$('button:first').click(function () {
var objSel = rangee.init('iframe', iframe.contentWindow.window || iframe.contentDocument.defaultView).grabSelection();
// Storing the selection details in localStorage
selection1Storage.push(objSel);
localStorage['selection1'] = JSON.stringify(selection1Storage);
...
JavaScript
// Rangy Blog
//Steps to follow
// 1. Select any text and click the buttons to store the selection in localStorage.
// 2. Reload the page to see previously selected text highlighted in yellow.