JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
<div id="editor">
    <p>Hello <span class="colorful"> colorful </span> world.</p>
    <p>Apply 'blockquote' from <b>Paragraph Format</b> dropdown menu to part of this senetense.</p>
</div>
<ol id="issues">
    <li>You will not be able to change color (foreground) of word colorful, but you will be able to change background color. <br/><b>Ticket:</b> <a href="https://dev.ckeditor.com/ticket/10995">https://dev.ckeditor.com/ticket/10995</a></li>
    <li>Apply 'blockquote' and 'small' from <b>Paragraph Format</b> dropdown menu to part of this sentence.
        <ol>
            <li>Blockquote: It will not work at all. Although other H1 to H6 are working just fine.</li>
            <li>Small: It will get applied to selected text, but It will not set 'small' as a value in dropdown, wherein H1 to H6 and some other are getting set as value in dropdown properly.</li>
            <li><b>Ticket:</b> <a href="https://dev.ckeditor.com/ticket/10996">https://dev.ckeditor.com/ticket/10996</a></li>
        </ol>
    </li>
    
    <li>
        <b>NOTE:</b> Uses external ckeditor config file. Please refer it for details. 
    </li>
</ol>

CSS

body {
    font-family: sans-serif;
}
#editor {
    border: 1px solid #ccc;
    width: 500px;
    height: 150px;
}
.colorful {
    background-color: blue;
    color: green;
}
#issues {
    background-color: #EEE;
    margin:20px 0px;
    padding: 15px 15px 15px 40px;
}
li {
    padding: 5px 0px;
}

JavaScript

var textEl = $('editor');
textEl.setAttribute('contenteditable', true);
this.ckEditor = CKEDITOR.inline(textEl, {
    customConfig: 'https://dl.dropboxusercontent.com/u/1414257/ckeditor_bug_config.js'
});