JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<textarea>Hello Stack Overflow Thank you for your support.</textarea>

CSS

.word span {
  font-size: 12px;
  background: #ccc;
  cursor: pointer;
}

JavaScript

tinymce.init({
  selector: 'textarea',
  menubar: false,
  statusbar: false,
  plugins: "code",
  toolbar: 'helloWorld allBase code',
  setup: function(editor) {
    var makeSpan = function(str) {
      return '<span class="word">&nbsp;' + str + '&nbsp;<em>x</em><span>&nbsp;';
    }
    editor.ui.registry.addButton('helloWorld', {
      text: 'Hello World!',
      onAction: function(_) {
        editor.insertContent(makeSpan("Hello World!"));
      }
    });
    editor.ui.registry.addButton('allBase', {
      text: 'All your Base',
      onAction: function(_) {
        editor.insertContent(makeSpan("All your base"));
      }
    });
  },
  content_style: 'span.word em { font-style: normal; font-size: 12px; background: #ccc; cursor: pointer; padding: 1px; border-radius: 3px; }',
  init_instance_callback: function(editor) {
    editor.on('click', function(e) {
      if (e.target.nodeName == "EM") {
        console.log("Remove Word.");
        e.target.parentElement.remove();
      }
    });
  }
});