JSFiddle - React, Tailwind, and code Playground

by mehmetatas

HTML

<div contenteditable="true" class="editor"></div>
    <input type="button" class="cmd" value="bold" data-command="bold" />
    <input type="button" class="cmd" value="italic" data-command="italic" />
    <input type="button" class="cmd" value="underline" data-command="underline" />
    <input type="button" class="cmd" value="strikethrough" data-command="strikethrough" />
    <input type="button" class="cmd" value="pre" data-command="formatBlock" data-param="pre" />
    <input type="button" class="cmd" value="blockquote" data-command="formatBlock" data-param="blockquote" />
    <input type="button" class="cmd" value="orderedlist" data-command="formatBlock" data-param="blockquote" />

<textarea></textarea>

CSS

.editor {
    width: 400px;
    height: 200px;
    overflow: scroll;
    border: solid 1px;
    padding 10px;
}

textarea {
    width: 400px;
    height: 200px;
}

pre {
    border: solid 1px;
    padding: 5px;
}

blockquote {
    border-left: solid 3px #ccc;
    font-style: italic;    
    padding-left: 5px;
}

JavaScript

$(function(){
    $('.cmd').on('click', function(){
        var cmd = $(this).attr('data-command');
        var param = $(this).attr('data-param');
        document.execCommand(cmd, false, param);
        $('textarea').val($('.editor').html());
    });
    
    $('.editor').on('keyup', function(){
        $('textarea').val($(this).html());
    });
    
    $('textarea').on('keyup', function(){
        $('.editor').html($(this).val());
    });
});