JSFiddle - React, Tailwind, and code Playground

by Karl

HTML

<button id="btn-insert_image">image</button>
<button id="btn-italic"><i>i</i>

</button>
<button id="btn-bold"><b>B</b>

</button>
<div id="content" contenteditable="true">
    <p>How does it work? Just put your image size after our URL and you'll get a placeholder.</p>
</div>

JavaScript

$(document).ready(function () {
    $('#btn-italic').click(function () {
        document.execCommand('italic');
    });

    $('#btn-bold').click(function () {
        document.execCommand('bold');
    });

    $('#btn-insert_image').click(function () {
        var sel = document.selection;
        if (sel) {
            var textRange = sel.createRange();
            document.execCommand('insertImage', false, "http://jsfiddle.net/img/logo.png");
            textRange.collapse(false);
            textRange.select();
        } else {
            document.execCommand('insertImage', false, "http://jsfiddle.net/img/logo.png");
        }
    });
});