JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pell/0.7.0/pell.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pell/0.7.0/pell.min.js"></script>
<div id="pell" class="pell"></div>

CSS

.pell-content {
  background: #fff;
}

JavaScript

const {
  exec,
  init
} = pell;

function ensureHTTP(str) {
  return /^https?:\/\//.test(str) && str || `http://${str}`
}

var editor = window.pell.init({
  element: document.getElementById('pell'),
  styleWithCSS: false,
  actions: [
    'bold',
    'underline',
    'italic', {
      name: 'zitalic',
      icon: 'Z',
      title: 'Zitalic',
      result: () => window.pell.exec('italic')
    }, {
      name: 'image',
      result: () => {
        const url = window.prompt('Enter the image URL')
        if (url) window.pell.exec('insertImage', ensureHTTP(url))
      }
    }, {
      name: 'link',
      result: () => {
        const url = window.prompt('Enter the link URL')
        if (url) window.pell.exec('createLink', ensureHTTP(url))
      }
    }
  ],
  onChange: function(html) {
    document.getElementById('text-output').innerHTML = html
    document.getElementById('html-output').textContent = html
  }
})