JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-selectionsaverestore.js"></script>
<div id="inlineEditor" contenteditable="true">asd</div>
<textarea id="cleanUp"></textarea>
CSS
#cleanUp {
display: none;
}
JavaScript
$(document).ready(function() {
//CLEAN UP LOGIC (removing the style of the text)
if($.browser.msie || $.browser.opera) {
var ctrl = false;
$('#inlineEditor').keydown(function(e) {
if(e.which == 17 || e.which == 91) {
ctrl = true;
return false;
}
if(ctrl && e.which == 86) {
cleanUp();
} else {
ctrl = false;
}
});
$('#inlineEditor').mousedown(function() {
if (e.which === 3) {
alert("Please use CRTL + V for pasting");
}
});
} else {
$(document).on('paste', '#inlineEditor', function(e) {
cleanUp();
});
}
function cleanUp() {
savedSel = rangy.saveSelection();
$('#cleanUp').focus();
setTimeout(function() {
$('#inlineEditor').focus();
console.log($('#inlineEditor').html());
rangy.restoreSelection(savedSel);
var x = $('#cleanUp').val();
paste(x.replace(/\n\r?/g, '<br />'));
$('#cleanUp').val('');
}, 100);
}
});
function paste(html) {
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(html);
range.insertNode(node);
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(html);
}
}
//IE fix. IE doesn't know createContextualFragment,so we'll teach him.
if (typeof Range.prototype.createContextualFragment == "undefined") {
Range.prototype.createContextualFragment = function(html) {
var doc = this.startContainer.ownerDocument;
var container = doc.createElement("div");
container.innerHTML = html;
var frag = doc.createDocumentFragment(), n;
while ( (n = container.firstChild) ) {
frag.appendChild(n);
}
return frag;
};
}