JSFiddle - React, Tailwind, and code Playground

by alfg

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacinia interdum ante in lacinia. Aliquam sit amet accumsan turpis, sit amet tincidunt enim. Vestibulum pellentesque felis a lectus consectetur elementum. Integer luctus aliquam molestie. Curabitur euismod enim ante, in rhoncus risus congue a. In hac habitasse platea dictumst. Vivamus sit amet urna libero. Ut tincidunt nec ante quis egestas. Curabitur ut tortor faucibus, congue neque sed, commodo est. Aenean sodales lectus in tortor pretium tempor. Curabitur luctus dui ante, in posuere ante pretium ut. Mauris vitae massa nec sapien volutpat posuere.</p>

<p>Vestibulum lacinia nisl sed turpis blandit, sed eleifend tellus consequat. Aliquam bibendum ipsum sed suscipit volutpat. Suspendisse cursus, elit eget viverra scelerisque, ligula diam tempor neque, sed eleifend mi nisl in quam. Pellentesque sodales metus quis nisl laoreet commodo. In cursus, libero ut semper rhoncus, nunc purus laoreet libero, non viverra diam mi vel neque. Duis congue velit ipsum, et accumsan risus pharetra vitae. Nulla eu vulputate lectus. Nunc accumsan augue sit amet vestibulum pellentesque. Pellentesque lacinia varius eros ullamcorper ornare. Vestibulum laoreet nec justo a faucibus. Donec accumsan nec orci sed pellentesque. Maecenas sit amet mauris urna. Vestibulum arcu risus, venenatis et facilisis ac, commodo ut lacus. Vivamus pellentesque elit varius leo consectetur bibendum.</p>

<img src="http://placehold.it/100x100" />

<div id="selected-area"></div>

JavaScript

$(function() {
    console.log("test");
    console.log(getSelectionHtml());
});

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}