JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.ckeditor.com/4.5.6/full-all/ckeditor.js"></script>
<textarea name="editor1">
  <p>Some <span class="test"></span> test text</p>
  <span class="test"></span>
</textarea>

JavaScript

CKEDITOR.plugins.add( 'test', {
  requires: 'widget,dialog',
  init: function(editor) {
    CKEDITOR.addCss( '.test { display: inline-block; width: 15px; height: 15px; vertical-align: middle; border: solid 1px red; }'  );
    CKEDITOR.dialog.add( 'test', function(editor) {
      return {
        title: 'test',
        contents: [{
          id: 'test',
          elements: [{
            id: 'name',
            type: 'text',
            label: 'Name',
            default: '',
            setup: function(widget) {
              this.setValue(widget.data.name);
            },
            commit: function(widget) {
              widget.setData('name', this.getValue());
            }
          }]
        }]
      }
    });
    editor.widgets.add( 'test', {
      button: 'test',
      template: '<span class="test"></span>',
      allowedContent: 'span(!test)',
      requiredContent: 'span(test)',
      dialog: 'test',
      inline: true,
      upcast: function(element) {
        return element.name == 'span' && element.hasClass('test');
      }
    });
  }
});

CKEDITOR.replace( 'editor1' , {
  extraPlugins: 'test',
  toolbar: [{ name: 'test', items: ['Test', '-', 'Source'] }]
});