JSFiddle - React, Tailwind, and code Playground

by zedsaid

HTML

<ul id="toolbar">
    <li><a class="bold" href="#">Bold</a></li>
    <li><a class="insertLink" href="#">Insert Link</a></li>
    <li><a class="getHTML" href="#">Get HTML</a></li>
</ul>
<div id="zss_editor_content" contenteditable="true">
    <p>Select a part of this text!</p>
    <ul>
        <li>test</li>
    </ul>
    <img src="http://www.puc.edu/__data/assets/image/0003/74505/logo-dark-trans-bg.png" />
</div>

CSS

* {outline: 0px solid transparent;}
img {-webkit-user-drag:element;}
img:-webkit-drag {
    padding:10px;
    border: 1px dashed #000;
}

JavaScript

var zss_editor = {};

zss_editor.getSelection = function() {
    return window.getSelection();   
}

zss_editor.setBold = function() {
    document.execCommand('bold', false, null);
}

zss_editor.setItalic = function() {
    document.execCommand('italic', false, null);
}

zss_editor.createLink = function() {
    var html = '<a href="fdsfasf">Test link</a>';
    document.execCommand('InsertHTML', false, html);
}

zss_editor.getHTML = function() {
    return document.getElementById("zss_editor_content").innerHTML;  
}


zss_editor.isCommandEnabled = function(commandName) {
    return document.queryCommandEnabled(commandName);   
}

$('#zss_editor_content').mouseup(function() {
    if (zss_editor.isCommandEnabled('bold')) {
        //alert('bold!');
    }
});

$('#toolbar a').click(function() {
    var c = $(this).attr('class');
    if (c == 'bold') {
        zss_editor.setBold();
    } else if (c == 'insertLink') {
        zss_editor.createLink();
    } else if (c == 'getHTML') {
        var h = zss_editor.getHTML();
        console.log(h);
    }
});