Not able to format editable div
<p>I'm trying to build a WYSIWYG Editor, I've the working buttons on a popup. Whenever editable div is being hovered it shows a border and when this div is clicked, a button fades in which displays the buttons on the popup. I've included the js code below:</p>

<pre><code> $.fn.nitspopupeditor = function () { //Function to format editable items.
        this.each(function () {
            setTimeout(function () {}, 100);
            var $this = $(this);
            var selected_text = null;
            var uniquid = "nits" + new Date().getTime();

            $this.attr('data-nitsselect', uniquid); //set element unique id

            function getSelected() { //get selected text
                var selection = window.getSelection();
                range = selection.getRangeAt(0);
                return range;
            }


            function waitForPasteData(context, content) { //wait for paste data
                if (context.childNodes &amp;&amp; context.childNodes.length &gt; 0) {
                    processPaste(context, content);
                } else {
                    that = {
                        e: context
                        , s: content
                    };
                    that.callself = function () {
                        waitForPasteData(that.e, that.s);
                    }
                    setTimeout(that.callself, 20);
                }
            }

            function getHTMLOfSelection() {
                var range;
                if (document.selection &amp;&amp; document.selection.createRange) {
                    range = document.selection.createRange();
                    return range.htmlText;
                } else if (window.getSelection) {
                    var selection = window.getSelection();
                    if (selection.rangeCount &gt; 0) {
                        range = selection.getRangeAt(0);
                        var clonedSelection = range.cloneContents();
                        var div = document.createElement('div');
                        div.appendChild(clonedSelection);
                        return div.innerHTML;
                    } else {
                        return '';
                    }
                } else {
                    return '';
                }
            }

            function processPaste(context, content) {
                paste_data = context.innerHTML;

                context.innerHTML = content;

                var $div = $('&lt;div&gt;&lt;/div&gt;');
                $div.html(paste_data);
                $(context).append($div.text());
            }

            $this.on('mouseup', function () {
                selected_text = getSelected(); //get current selected text
            });

            $this.on('paste', function (e) {
                var saved_content = $(this).html(); //manipulate paste-text
                if (e &amp;&amp; e.clipboardData &amp;&amp; e.clipboardData.getData) {
                    if (/text\/html/.test(e.clipboardData.types)) {
                        $(this).html(e.clipboardData.getData('text/html'));
                    } else if (/text\/plain/.test(e.clipboardData.types)) {
                        $(this).html(e.clipboardData.getData('text/plain'));
                    } else {
                        $(this).html('');
                    }
                    waitForPasteData($(this)[0], saved_content);
                    if (e.preventDefault) {
                        e.stopPropagation();
                        e.preventDefault();
                    }
                    return false;
                } else {
                    $(this).html('');
                    waitForPasteData($(this)[0], saved_content);
                    return true;
                }
            });

            $('[data-nitsedittag]').on('click', function (e) {

                var selection = window.getSelection();
                var $parent = $(selection.anchorNode.parentElement);
                if ($parent.data('nitsselect') == uniquid &amp;&amp; $parent.is(':focus')) {

                    var tag = $(this).data('nitsedittag');
                    switch (tag) {
                        default: document.execCommand(tag);
                    }

                }
                e.preventDefault();

            });
        })
    };



    function closep() { // Function to close the popup on close button.
        $('[data-nitstextpopup]').fadeOut(400);
        $('[data-nitstextbutton]').show();
    }
    $(function () {
        var mouseX;
        var mouseY;
        var modal = false;
        $(document).mousemove(function (f) {
            mouseX = f.pageX;
            mouseY = f.pageY;
        });

        var openPopup = function (e) { //Function to open popup
            $(e).fadeIn(400);
            $('[data-nitstextpopup]').fadeIn(400).css({
                'top': mouseY
                , 'left': mouseX
            }).draggable();
            $('[data-nitstextbutton]').hide();
        };


        var closePopup = function () { // Function to close the popup
            $('[data-nitstextpopup]').fadeOut(400);
            $('[data-nitstextbutton]').show();
        };

        $('[data-nitspagelabel]').hover(function () { // to hover only editable items
            $(this).css('border', 'solid 1px #777');
        }, function () {
            $(this).css('border', 'none');
        });
        $('[data-nitspagelabel]').click(function () { //click function on editable div to get editable buttons
            $(this).attr('contenteditable', 'true');
            var labeltype = $('[data-nitspagelabel]').data("nitslabeltype");
            if (labeltype == "text") {
                if (modal == false) {
                    modal = true;
                    $('[data-nitstextbutton]').css({ //popup text editing buttons 
                        'top': mouseY
                        , 'left': mouseX
                    }).fadeIn(400).click(function (e) {
                        var popupbox = $(this).attr('href');
                        openPopup(popupbox); // opens the editing tools popup
                        $('[data-nitspagelabel]').nitspopupeditor; // formatting buttons in action
                    });
                }
            }
        });

        $(document).click(function (e) { // clicking outside closing the popup
            closePopup();
            modal = false;
            $('[data-nitstextbutton]').hide();
        });


        $('[data-nitstextpopup]').click(function (e) { // setting execption areas for closing popup
            e.stopPropagation();
        });


        $("#btnedit").click(function (e) { // setting execption areas for closing popup
            e.stopPropagation();
        });


        $("#editable").click(function (e) { // setting execption areas for closing popup
            e.stopPropagation();
        });

        $(document).keyup(function (e) { // setting esc button close popup
            if (e.keyCode == 27) {
                closePopup();
                modal = false;
                $('[data-nitstextbutton]').hide();
            }
        });

    });
</code></pre>

<p>For more details please check the JS fiddle:</p>

<p><a href="https://jsfiddle.net/nitishkmr09/c56hzmmt/1/" rel="nofollow">https://jsfiddle.net/nitishkmr09/c56hzmmt/1/</a></p>

<p>For time being I've included bold and italics just to check the working functionality. Please help me out as I'm not getting the result.</p>