1

tudo bem? Estou com uma certa dúvida, pois estou tentando criar um sistema bem simples de BBCode, mas por questões de visual, não estou usando um textarea normal. Estou usando uma div com o atributo content editable para poder editar o texto, mas a dúvida é: como faço para inserir HTML, pois no caso, ele funciona tudo certinho, mas insere tudo em texto plano :/

Alguma saída?

Eu achei este exemplo na web, mas não consegui fazer com quê ele saísse em 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>

Quem puder me dar uma luz, agradeço imensamente desde já :D

1 Resposta 1

1

Você pode fazer um .replace nos &lt; e nos &gt; que são as entidades que representam os símbolos < e > respectivamente:

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>

1
  • 1
    Nossa, cara hahaha você salvou o pelotão inteiro. Nem tinha me mancado de faze replace. Agradeço de coração mesmo a ajuda. irei estudar o código pra ver se arrumo alguns bugs que encontrei de toda linha ficar colorida (mas isso aí já é comigo hahhaa) Um abraço ,colega! Commented 7/05/2018 às 21:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .