JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<script src="https://rawgithub.com/xing/wysihtml5/master/parser_rules/advanced.js"></script>
<script src="https://rawgithub.com/xing/wysihtml5/master/dist/wysihtml5-0.3.0.js"></script>
<div id="uxToolbar">
   <button type="button" tabindex="-1" class="btn btn-mini" title="Bold (ctrl+B)" data-wysihtml5-command="bold">&nbsp;<span style="font-weight:900;">B</span>&nbsp;</button>
   <button type="button" tabindex="-1" class="btn btn-mini" title="Italic (ctrl+I)" data-wysihtml5-command="italic">&nbsp;<span style="font-weight:700;font-style:italic;">I</span>&nbsp;</button>
   <button type="button" tabindex="-1" class="btn btn-mini" title="Underline (ctrl+U)" data-wysihtml5-command="underline">&nbsp;<span style="font-weight:700;text-decoration:underline;">U</span>&nbsp;</button>
    <button id="add_class_buton" type="button" title="View HTML" tabindex="-1" class="btn btn-mini" data-wysihtml5-action="change_view">Toggle HTML</button>
    <button data-wysihtml5-command="setClass" data-wysihtml5-command-value="span:my-wysihtml5-custom-class" type="button" title="View HTML" tabindex="-1" class="btn btn-mini">My class</button>
<textarea id="txtTest" rows="10" cols="40"></textarea>

JavaScript

//setup command
(function(wysihtml5) {
    
  wysihtml5.commands.setClass = {
    exec: function(composer, command, element_class) {
        element_class=element_class.split(/:/);
        element=element_class[0];
        newclass=element_class[1];
      var REG_EXP = new RegExp(newclass,'g');
    //register custom class
      wysihtml5ParserRules['classes'][newclass]=1;

      return wysihtml5.commands.formatInline.exec(composer, command, element, newclass, REG_EXP);
    },

    state: function(composer, command, element_class) {
        element_class=element_class.split(/:/);
        element=element_class[0];
        newclass=element_class[1];
        var REG_EXP = new RegExp(newclass,'g');
      return wysihtml5.commands.formatInline.state(composer, command, element, newclass, REG_EXP);
    }
  };
})(wysihtml5);

var editor = new wysihtml5.Editor("txtTest", { // id of textarea element
                toolbar: "uxToolbar", // id of toolbar element,
                parserRules: wysihtml5ParserRules // defined in parser rules set
});