JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" class="editor"></div>
<button>save</button>
<div class="data"></div>

CSS

[contenteditable=true]
{
    background: #EEE;
    min-height: 100px;
}
pre
{
    border: 1px solid #CCC;
    padding: 5px;
}

JavaScript

if ( (!('innerText' in document.createElement('a'))) && ('getSelection' in window) ) {
    HTMLElement.prototype.__defineGetter__("innerText", function() {
        var selection = window.getSelection(),
            ranges    = [],
            str;

        // Save existing selections.
        for (var i = 0; i < selection.rangeCount; i++) {
            ranges[i] = selection.getRangeAt(i);
        }

        // Deselect everything.
        selection.removeAllRanges();

        // Select `el` and all child nodes.
        // 'this' is the element .innerText got called on
        selection.selectAllChildren(this);

        // Get the string representation of the selected nodes.
        str = selection.toString();

        // Deselect everything. Again.
        selection.removeAllRanges();

        // Restore all formerly existing selections.
        for (var i = 0; i < ranges.length; i++) {
            selection.addRange(ranges[i]);
        }

        // Oh look, this is what we wanted.
        // String representation of the element, close to as rendered.
        return str;
    })
}


$('button').on('click', function() {
    $('.data').append('<pre>' + $('.editor')[0].innerText + '</pre>');
});