JSFiddle - React, Tailwind, and code Playground
by cmruser
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<textarea id="summernote"></textarea>
<div id="test"><p><span>test</span></p></div>
CSS
.note-editor {
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
}
.note-editor article,
.note-editor aside,
.note-editor details,
.note-editor figcaption,
.note-editor figure,
.note-editor footer,
.note-editor header,
.note-editor hgroup,
.note-editor main,
.note-editor nav,
.note-editor section,
.note-editor summary {
display: block;
}
.note-editor audio,
.note-editor canvas,
.note-editor video {
display: inline-block;
}
.note-editor audio:not([controls]) {
display: none;
height: 0;
}
.note-editor [hidden],
.note-editor template {
display: none;
}
.note-editor html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.note-editor body {
margin: 0;
}
.note-editor a {
background: transparent;
}
.note-editor a:focus {
outline: thin dotted;
}
.note-editor a:active,
.note-editor a:hover {
outline: 0;
}
.note-editor h1 {
font-size: 2em;
margin: 0.67em 0;
}
.note-editor abbr[title] {
border-bottom: 1px dotted;
}
.note-editor b,
.note-editor strong {
font-weight: bold;
}
.note-editor dfn {
font-style: italic;
}
.note-editor hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
.note-editor mark {
background: #ff0;
color: #000;
}
.note-editor code,
.note-editor kbd,
.note-editor pre,
.note-editor samp {
font-family: monospace, serif;
font-size: 1em;
}
.note-editor pre {
white-space: pre-wrap;
}
.note-editor q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
.note-editor small {
font-size: 80%;
}
.note-editor sub,
.note-editor sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.note-editor sup {
top: -0.5em;
}
.note-editor sub {
bottom: -0.25em;
}
.note-editor img {
border: 0;
}
.note-editor svg:not(:root) {
overflow: hidden;
}
.note-editor figure {
margin: 0;
}
.note-editor fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
.note-editor legend {
border: 0;
...
JavaScript
/**
* Super simple wysiwyg editor on Bootstrap v0.5.10
* http://hackerwins.github.io/summernote/
*
* summernote.js
* Copyright 2013-2014 Alan Hong. and other contributors
* summernote may be freely distributed under the MIT license./
*
* Date: 2014-10-03T06:12Z
*/
(function (factory) {
/* global define */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals: jQuery
factory(window.jQuery);
}
}(function ($) {
if ('function' !== typeof Array.prototype.reduce) {
/**
* Array.prototype.reduce fallback
*
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
*/
Array.prototype.reduce = function (callback, optInitialValue) {
var idx, value, length = this.length >>> 0, isValueSet = false;
if (1 < arguments.length) {
value = optInitialValue;
isValueSet = true;
}
for (idx = 0; length > idx; ++idx) {
if (this.hasOwnProperty(idx)) {
if (isValueSet) {
value = callback(value, this[idx], idx, this);
} else {
value = this[idx];
isValueSet = true;
}
}
}
if (!isValueSet) {
throw new TypeError('Reduce of empty array with no initial value');
}
return value;
};
}
if ('function' !== typeof Array.prototype.filter) {
Array.prototype.filter = function (fun/*, thisArg*/) {
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
if (fun.call(thisArg, val, i, t)) {
...