JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<script src="http://ckeditor.com/apps/ckeditor/4.3/ckeditor.js"></script>
<figure id="toolbar">
    <a data-command="bold" href="#bold">Bold</a> |
    <a data-command="italic" href="#italic">Italic</a> |
    <a data-command="underline" href="#underline">Underline</a>
</figure>

<div id="wysiwyg">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, cupiditate, molestias hic vero harum eligendi id dolorum ea obcaecati quidem rem in totam non debitis minus ipsam fugiat repellendus impedit nulla vitae. Placeat, facere ut architecto saepe minus minima cumque fugit incidunt impedit cupiditate! Totam, libero, non, omnis, consectetur ipsum distinctio voluptas fugit molestiae consequatur eveniet ipsa voluptates est error nostrum dolor voluptatum provident!</p>
</div>

CSS

strong
{
    font-weight: bold;
}

JavaScript

$(function() {
    var editable = $('#wysiwyg').get(0);
    
    CKEDITOR.replace( editable , {
        removePlugins : 'toolbar'
    });
    
    $('[data-command]').on({
        click : function(e)
        {
            var command = $(this).data('command');

            command = CKEDITOR.instances['wysiwyg'].execCommand(command);

            e.preventDefault();
        }
    });
});