JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="txtEditor"></div>
CSS
@charset "utf-8";
/* base styles */
.jumbotron {
background-color: #67A754;
background-image: url(images/radial_bg.png);
background-position: center center;
background-repeat: no-repeat;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#B3ECFF), to(#7EDEFF)); /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
background: -webkit-radial-gradient(circle, #B3ECFF, #7EDEFF); /* Safari 5.1+, Chrome 10+ */
background: -moz-radial-gradient(circle, #B3ECFF, #7EDEFF); /* Firefox 3.6+ */
background: -ms-radial-gradient(circle, #B3ECFF, #7EDEFF); /* IE 10 */
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2) inset, 0 -3px 7px rgba(0, 0, 0, 0.2) inset;
color: #FFFFFF;
padding: 40px 0;
position: relative;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.075);
}
.jumbotron h1{font-family: 'Roboto', sans-serif!important; font-size:45px;font-weight:300; border-bottom:1px solid rgba(255,255,255,0.4);padding-bottom:20px; }
.jumbotron h1 span{color:rgba(0,0,0,0.4); }
.jumbotron p {
font-family: 'Roboto', sans-serif!important;
font-size: 30px;
font-weight: 300;
line-height: 1.25;
color:#444;
}
.jumbotron .container {
position: relative;
z-index: 2;
}
.jumbotron:after {
background: url("../images/pattern.png") repeat scroll center center transparent;
bottom: 0;
content: "";
display: block;
left: 0;
opacity: 0.4;
position: absolute;
right: 0;
top: 0;
}
.jumbotron:after {
background-size: 400px 400px;
}
.masthead {
color: #FFFFFF;
margin-bottom: 0;
padding: 30px 0 10px;
}
h2.demo-text{font-family: 'Roboto', sans-serif!important; font-size:45px; font-weight:300; color:#51D2FF; text-align:center; margin:20px 0; line-height:40px;}
.features{padding:20px 0 10px 0;background:#EEE;font-family: 'Roboto', sans-serif!important; font-size:25px; line-height:35px;...
JavaScript
(function( $ ){
var methods = {
saveSelection: function() {
//Function to save the text selection range from the editor
$(this).data('editor').focus();
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
$(this).data('currentRange', sel.getRangeAt(0));
}
} else if (document.selection && document.selection.createRange) {
$(this).data('currentRange',document.selection.createRange());
}
else
$(this).data('currentRange', null);
},
restoreSelection: function(text,mode) {
//Function to restore the text selection range from the editor
var node;
typeof text !== 'undefined' ? text : false;
typeof mode !== 'undefined' ? mode : "";
var range = $(this).data('currentRange');
if (range) {
if (window.getSelection) {
if(text){
range.deleteContents();
if(mode=="html")
{
var el = document.createElement("div");
el.innerHTML = text;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
}
else
range.insertNode( document.createTextNode(text) );
}
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
else if (document.selection && range.select) {
range.select();
if(text)
{
if(mode=="html")
range.pasteHTML(text);
else
range.text = text;
}
}
}
},
restoreIESelection:function() {
//Function to restore the text selection range from the editor in...