removing wrapped tags not working javascript

[wolfgang1983]

If my slected text is wrapped in bold or iltalic or pre tag and then if i click on the revert button it should remove the tags around the selected text. But for some reason will not with my code.

Question when I select/highlight some text and then click my revert button how to make it remove the tags that are around that selected/highlighted text.

Codepen Live Demo

Codepen Full View Live Demo

$(document).ready(function() {
    $("button[id='revert']").on('click', function() {           
        var text, sel, range;

        if (window.getSelection) {

            text = window.getSelection().toString();
            sel = window.getSelection();

            if (sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                range.insertNode(range.createContextualFragment(text));
            }

        } else if (document.selection && document.selection.createRange) {

            text = document.selection.createRange().text;
            range = document.selection.createRange();
            range.innerHTML = text;
        }

        $('#code_view').trigger('click');
    });
});

[ryantroop]

Im sorry if this is not helpful, but why not just use tinyMCE? They have already gone through all the headaches that you are currently dealing with.

Ranges are weird, and are inconsistent across browsers. If you plan on being backwards compatible at all, you will find that your code will become bloated very quickly. If this is a personal project and you just want to learn more about it, just keep on trudging through until you get it to work on chrome, then modify for IE. When you are content with it all working, then go back and cry when you try to make it work for firefox.

Truthfully, I don't really remember all that had to be done to get this stuff working.

Likely, you are using a contentEditable div, and when you place any form of structure HTML into said div, the browser is parsing it and treating it as an actual element instead of the text you are attempting to display. Maybe try to convert all html entities to their escaped formats (< etc..) and see if that helps?

Good luck! ..really..

[wolfgang1983]

I would use a texted editor but the only seem to have a code_view button the do not have any code or inline code like on here.