Change "createTextNode" to insert in HTML?

Question

Change "createTextNode" to insert in HTML?

Navigation

#1 by (1 votes)

1

Alright? I'm having a bit of a doubt as I'm trying to create a very simple BBCode system, but for visual reasons, I'm not using a normal textarea . I am 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 case, it works everything right, but inserts everything in plain text: /

Any output?

I found this example on the web, but I could not get it to go out in HTML >:

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 right now: D

javascript

asked by anonymous 07.05.2018 / 23:09

1 answer

How to send the src value of an img tag to the value of a text field? Load dynamic content in navbar

score 1 · Accepted Answer

You can make a .replace in < and > which are the entities that represent the < and > symbols 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>