JSFiddle - React, Tailwind, and code Playground

by nzifnab

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/4.12.5/css/medium-editor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/4.12.5/css/themes/default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/4.12.5/js/medium-editor.js"></script>
<div class='editable-1'>
    <p>This should be some editable content with only bold and h2 buttons</p>
</div>

<div class='editable-2'>
    <p>This is editable content with only bold and italic buttons, but the options are defined incorrectly.</p>
</div>

<button class='editable-3-enable'>Click me to activate the below editor</button>
<div class='editable-3'>
    <p>This is editable content with bold and h2 buttons outside of the 'toolbar' option, but it generates a JS error</p>
</div>

CSS

[contenteditable]{
    background-color: #F2EC99;
    margin-bottom: 10px;
}

JavaScript

editor = new MediumEditor('.editable-1', {
  toolbar: {
    buttons: ["bold", "h2"]
  }
});

editor2 = new MediumEditor('.editable-2', {
  buttons: ["bold", "italic"]
});

$(".editable-3-enable").on("click", function(){ 
  editor3 = new MediumEditor('.editable-3', {
    buttons: ["bold", "h2"]
  });
});