Change "createTextNode" to insert into HTML?

Question

all right? I’m having a certain doubt, because I’m trying to create a very simple Bbcode system, but for visual reasons, I’m not using a textarea normal. I’m using a div with the attribute Editable content to be able to edit the text, but the question is: how do I insert HTML, because in this case, it works all right, but inserts everything in plain text :/

Some way out?

I found this example on the web, but I couldn’t get it to come out in HTML >:o

function surroundSelection(textBefore, textAfter) {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            var startNode = range.startContainer, startOffset = range.startOffset;
            var boundaryRange = range.cloneRange();
			
            var startTextNode = document.createTextNode(textBefore);
            var endTextNode = document.createTextNode(textAfter);
			
            boundaryRange.collapse(false);
            boundaryRange.insertNode(endTextNode);
            boundaryRange.setStart(startNode, startOffset);
            boundaryRange.collapse(true);
            boundaryRange.insertNode(startTextNode);
            
            // Reselect the original text
            range.setStartAfter(startTextNode);
            range.setEndBefore(endTextNode);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

function surroundSelectionInBbcode(tagName) {
    surroundSelection("<span class='code'>[" + tagName + "]</span>", "<span class='code'>[/" + tagName + "]</span>");
}

document.getElementById("bold").onclick = function() {
    document.getElementById("pseudo_form").focus();
    surroundSelectionInBbcode("b");
    return false;
};

*{font-family: arial;}
#pseudo_form, #pseudo_form_ok
{
    width: 100%;
    height: 30vh;
    padding: 10px;
    background: #222;
    color: #e5e5e5;
    display: block;
    margin: 5px;
    font-family: courier new;
 }
 .code 
 {
    color: red;
 }

<button type="button" id="bold" value="b" unselectable="on">NEGRITO</button> (<<< selecione o texto e clique)

<div id="pseudo_form" contenteditable="true">
    meu texto
</div>

<HR>

<strong>EXEMPLO:</strong> Eu gostaria que ao clicar no botão "negrito", ficasse assim:

<div id="pseudo_form_ok">
    <span class='code'>[b]</span>meu texto<span class='code'>[/b]</span>
</div>

Who can give me a light, I thank you immensely already :D

Answer 1

You can make a .replace us < and us > which are the entities representing the symbols < and > respectively:

function surroundSelection(textBefore, textAfter) {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            var startNode = range.startContainer, startOffset = range.startOffset;
            var boundaryRange = range.cloneRange();
			
            var startTextNode = document.createTextNode(textBefore);
            var endTextNode = document.createTextNode(textAfter);
			
            boundaryRange.collapse(false);
            boundaryRange.insertNode(endTextNode);
            boundaryRange.setStart(startNode, startOffset);
            boundaryRange.collapse(true);
            boundaryRange.insertNode(startTextNode);
            
            
            // Reselect the original text
            range.setStartAfter(startTextNode);
            range.setEndBefore(endTextNode);
            sel.removeAllRanges();
            sel.addRange(range);

            // REPLACE AQUI
            var texto = document.getElementById("pseudo_form").textContent;
            document.getElementById("pseudo_form").innerHTML = texto.replace(/&lt;/g,"<").replace(/&gt;/g,">");
        }
    }
}

function surroundSelectionInBbcode(tagName) {
    surroundSelection("<span class='code'>[" + tagName + "]</span>", "<span class='code'>[/" + tagName + "]</span>");
}

document.getElementById("bold").onclick = function() {
    document.getElementById("pseudo_form").focus();
    surroundSelectionInBbcode("b");
    return false;
};

*{font-family: arial;}
#pseudo_form, #pseudo_form_ok
{
    width: 100%;
    height: 30vh;
    padding: 10px;
    background: #222;
    color: #e5e5e5;
    display: block;
    margin: 5px;
    font-family: courier new;
 }
 .code 
 {
    color: red;
 }

<button type="button" id="bold" value="b" unselectable="on">NEGRITO</button> (<<< selecione o texto e clique)

<div id="pseudo_form" contenteditable="true">
    meu texto
</div>

<HR>

<strong>EXEMPLO:</strong> Eu gostaria que ao clicar no botão "negrito", ficasse assim:

<div id="pseudo_form_ok">
    <span class='code'>[b]</span>meu texto<span class='code'>[/b]</span>
</div>