JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/akzhan/jwysiwyg/raw/master/jwysiwyg/jquery.wysiwyg.js"></script>
<html>
<body>
<textarea id="wysiwyg"></textarea>
</body>
</html>
CSS
#wysiwyg {width: 450px;}
div.wysiwyg { padding: 5px; padding-bottom: 0px; background-color: #ededed; }
div.wysiwyg * { margin: 0; padding: 0; }
div.wysiwyg iframe { border: 1px solid #ABABAB; clear: left; background-color: #fff; padding: 5px 2px 5px 4px; margin-bottom: 0px;}
div.wysiwyg ul.panel { border-bottom: 1px solid #ccc; float: left; width: 100%; padding: 0; }
div.wysiwyg ul.panel li { list-style: none; float: left; margin: 1px 3px 3px 0; background: #fff; -moz-user-select: none; -webkit-user-select: none; user-select: none;}
div.wysiwyg ul.panel li.separator { width: 0px; height: 24px; margin: 2px 1px; }
div.wysiwyg ul.panel li { text-indent: -5000px; display: block; width: 28px; height: 24px; background: url('http://static.goalscdn.com/img/wysiwygopt.png') no-repeat -64px -80px; border: 0; cursor: pointer; margin: 0px; }
div.wysiwyg ul.panel li.active { background-color: #f9f9f9; border: 0px solid #ccc; border-left-color: #aaa; border-top-color: #aaa; margin: 0; }
div.wysiwyg ul.panel li.bold { width: 27px; background-position: 0 0px; }
div.wysiwyg ul.panel li.bold:hover { width: 27px; background-position: 0 -25px; }
div.wysiwyg ul.panel li.bold:active { width: 27px; background-position: 0 -50px; }
div.wysiwyg ul.panel li.italic { width: 26px; background-position: -27px -0px; }
div.wysiwyg ul.panel li.italic:hover { width: 26px; background-position: -27px -25px; }
div.wysiwyg ul.panel li.italic:active { width: 26px; background-position: -27px -50px; }
div.wysiwyg ul.panel li.underline { width: 27px; background-position: -54px -0px; }
div.wysiwyg ul.panel li.underline:hover { width: 27px; background-position: -54px -25px; }
div.wysiwyg ul.panel li.underline:active { width: 27px; background-position: -54px -50px; }
div.wysiwyg ul.panel li.quote { width: 26px; background-position: -82px 0; }
div.wysiwyg ul.panel li.quote:hover { width: 26px; background-position: -82px -25px; }
div.wysiwyg ul.panel li.quote:active { width: 26px; background-position:...
JavaScript
$('#wysiwyg').wysiwyg({
controls: {},
css: 'http://static.goalscdn.com/css/jwysiwyg.css'
});
$('iframe').ready(function() {
$(this).contents().find('.wysiwyg').find('iframe').contents().find('.wysiwyg').bind('paste', function() {
// Completely strips tags. Taken from Prototype library.
var el = $(this);
setTimeout(function() {
var strClean = el.text().replace(/<\/?[^>]+>/gi, '');
el.text(strClean);
}, 0);
});
});