JSFiddle - React, Tailwind, and code Playground

by Greggg

HTML

<script src="https://rawgit.com/Voog/wysihtml/master/dist/wysihtml-toolbar.min.js"></script>
<script src="https://rawgit.com/Voog/wysihtml/master/parser_rules/advanced_and_extended.js"></script>
<div class="wrap">
  <h1>wysihtml5 - Advanced Editor Example</h1>

  <div class="ewrapper" contentEditable="false">
    <div class="toolbar" style="display: none;">
      <div class="block">
        <a data-wysihtml5-command="bold" title="CTRL+B">bold</a>
        <a data-wysihtml5-command="italic" title="CTRL+I">italic</a>
        <a data-wysihtml5-command="underline" title="CTRL+U">underline</a>
        <a data-wysihtml5-command="superscript" title="sup">superscript</a>
        <a data-wysihtml5-command="subscript" title="sub">subscript</a>
      </div>
      <div class="block">
        <a data-wysihtml5-command="createLink">link</a>
        <a data-wysihtml5-command="removeLink"><s>link</s></a>
        <a data-wysihtml5-command="insertImage">image</a>
        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a>
        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a>
        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h3">h3</a>
        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="p">p</a>
        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="pre">pre</a>
        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-blank-value="true">plaintext</a>
        <a data-wysihtml5-command="insertBlockQuote">blockquote</a>
        <a data-wysihtml5-command="formatCode" data-wysihtml5-command-value="language-html">Code</a>
      </div>
      
      <div class="block">
        <a data-wysihtml5-command="fontSizeStyle">Size</a>
        <div data-wysihtml5-dialog="fontSizeStyle" style="display: none;">
          Size:
          <input type="text" data-wysihtml5-dialog-field="size" style="width: 60px;" value="" />
          <a...

CSS

body {
    font-family: Verdana;
    font-size: 11px;
  }
  
  h2 {
    margin-bottom: 0;
  }
  
  small {
    display: block;
    margin-top: 40px;
    font-size: 9px;
  }
  
  small,
  small a {
    color: #666;
  }
  
  a {
    color: #000;
    text-decoration: underline;
    cursor: pointer;
  }
  
  #toolbar [data-wysihtml5-action] {
    float: right;
  }
  
  #toolbar,
  textarea {
    width: 920px;
    padding: 5px;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  textarea {
    height: 280px;
    border: 2px solid green;
    font-family: Verdana;
    font-size: 11px;
  }
  
  textarea:focus {
    color: black;
    border: 2px solid black;
  }
  
  .wysihtml5-command-active, .wysihtml5-action-active {
    font-weight: bold;
  }
  
  [data-wysihtml5-dialog] {
    margin: 5px 0 0;
    padding: 5px;
    border: 1px solid #666;
  }
  
  
  
  a[data-wysihtml5-command-value="red"] {
    color: red;
  }
  
  a[data-wysihtml5-command-value="green"] {
    color: green;
  }
  
  a[data-wysihtml5-command-value="blue"] {
    color: blue;
  }
  
  .wysihtml5-editor, .wysihtml5-editor table td {
    outline: 1px dotted #abc;
    
  }
  
  code {
    background: #ddd;
    padding: 10px;
    white-space: pre;
    display: block;
    margin: 1em 0;
  }
  
  .toolbar {
    display: block;
    border-radius: 3px;
    border: 1px solid #fff;
    margin-bottom: 9px;
    line-height: 1em;
  }
  .toolbar a {
    display: inline-block;
    height: 1.5em;
    border-radius: 3px;
    font-size: 9px;
    line-height: 1.5em;
    text-decoration: none;
    background: #e1e1e1;
    border: 1px solid #ddd;
    padding: 0 0.2em;
    margin: 1px 0;
  }
  .toolbar a.wysihtml5-command-active, .toolbar .wysihtml5-action-active {
    background: #222;
    color: white;
  }
  .toolbar .block { 
    padding: 1px 1px;
    display: inline-block;
    background: #eee;
    border-radius: 3px;
    margin: 0px...

JavaScript

var editors = [];

  $('.ewrapper').each(function(idx, wrapper) {
    var e = new wysihtml5.Editor($(wrapper).find('.editable').get(0), {
      toolbar:        $(wrapper).find('.toolbar').get(0),
      parserRules:    wysihtml5ParserRules,
      useLineBreaks: false,
      pasteParserRulesets: wysihtml5ParserPasteRulesets
      //showToolbarAfterInit: false
    });
    editors.push(e);
    
    e.on("showSource", function() {
      alert(e.getValue(true));
    });
    
  });