JSFiddle - React, Tailwind, and code Playground

by Adrien Antoine

HTML

<div id="buttonBar">
    <button class="bold"></button>
    <button class="italic"></button>
    <button class="orderedList"></button>
    <button class="unorderedList"></button>
    <button class="alignLeft"></button>
    <button class="alignCenter"></button>
    <button class="alignRight"></button>
    <button class="horizontalLine"></button>
</div>

<div id="text" contenteditable="true"></div>

CSS

#buttonBar {
    background: #CFCFCF;
    padding: 5px;
}

#buttonBar button {
    background: url(http://ckeditor.com/apps/ckeditor/4.3.1/plugins/icons.png?t=DBA9);
    background-size: auto;
    border: 1px solid #CFCFCF;
    cursor: pointer;
    height: 18px;
    width: 18px;
}

#buttonBar .bold {
    background-position: 0 -24px;
}
#buttonBar .italic {
    background-position: 0 -48px;
}
#buttonBar .orderedList {
    background-position: 0 -1344px;
}
#buttonBar .unorderedList {
    background-position: 0 -1296px;
}
#buttonBar .alignLeft {
    background-position: 0 -1104px;
}
#buttonBar .alignCenter {
    background-position: 0 -1080px;
}
#buttonBar .alignRight {
    background-position: 0 -1128px;
}
#buttonBar .horizontalLine {
    background-position: 0 -888px;
}

#buttonBar button:hover {
    background-color: #A7A7A7;
}

#text {
    height: 500px;
    border: 1px solid #CFCFCF;
    padding: 5px;
}

JavaScript

$('#buttonBar .bold').click(function(){
    document.execCommand('bold');
});
$('#buttonBar .italic').click(function(){
    document.execCommand('italic');
});
$('#buttonBar .orderedList').click(function(){
    document.execCommand('insertOrderedList');
});
$('#buttonBar .unorderedList').click(function(){
    document.execCommand('insertUnorderedList');
});
$('#buttonBar .alignLeft').click(function(){
    document.execCommand('justifyLeft');
});
$('#buttonBar .alignCenter').click(function(){
    document.execCommand('justifyCenter');
});
$('#buttonBar .alignRight').click(function(){
    document.execCommand('justifyRight');
});
$('#buttonBar .horizontalLine').click(function(){
    document.execCommand('insertHorizontalRule');
});