Seleccionar frase y colocar BBCodes

[iEnrique]

Hola a todos.

No sé muy bien si este tema va aquí porque no estoy seguro de si se hace o no en este lenguaje o sus derivados pero bueno, si sois tan amables de moverlo si sabéis a lo que me refiero les estaré igual de encantado a los moderadores.

Lo que querría es que al seleccionar una parte de un texto osea así:



Y al darle a un botón para ponerla en negrita, los BBCode "" se pusieran justo entre el trozo seleccionado. Este mismo foro lo hace y muchos otros también, pero no tengo ni idea de como hacerlo.

Muchas gracias por su ayuda.

[PHPeros]

Esto te ayudará:

http://stackoverflow.com/questions/6...ent-and-replac

[iEnrique]

Vale, muchas gracias PHPeros, intenta ayudarme a comprender el código please

Lo que tengo es esto:

Código Javascript:

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}
 

Pero para coger la posición y ponerle un stringo con "[*b]" al principio y ponerle "[*/b]" (sin los *) al final como sería. Porque a lo más que llego con este código es a coger el HTML (que ya es un avance jeje), pero me pierdo al intentar hacer que lo que te digo arriba.

Muchas gracias

[PHPeros]

Buff, la verdad es que has tocado un tema puramente difícil

He buscado más en internet y parece que ya se discutió aquí, además con el BBCode incluido.

Una vez más StackOverflow nos salva!

[marlanga]

Deja los temas puramente difíciles para los que sabemos programar, phperos.

http://jsfiddle.net/4bthd/

Código HTML:

<button id="btnNegritas"><b>b</b></button>
<button id="btnCursiva"><i>i</i></button>
<button id="btnSubrayado"><u>u</u></button>
<br/>
<textarea id="campo"></textarea>
 

Código Javascript:

window.onload=function(){
    var Editor={
        textarea:document.getElementById("campo"),
        negritas:document.getElementById("btnNegritas"),
        cursiva:document.getElementById("btnCursiva"),
        subrayado:document.getElementById("btnSubrayado"),
        insertar:function(bbcode){
            var texto=Editor.textarea.value,
                inicio=Editor.textarea.selectionStart,
                fin=Editor.textarea.selectionEnd;
            
            texto=texto.slice(0,inicio)+"["+bbcode+"]"+texto.slice(inicio,fin)+"[\\"+bbcode+"]"+texto.slice(fin);
            Editor.textarea.value=texto;
        }
    };
    Editor.negritas.onclick=function(){
        Editor.insertar("b");
    };
    Editor.cursiva.onclick=function(){
        Editor.insertar("i");
    };
    Editor.subrayado.onclick=function(){
        Editor.insertar("u");
    };
};
 

Básicamente el código es una tontería, escrito en 5 minutos. Sólo es necesario saber cómo se cortan cadenas en javascript y cómo se recupera el texto seleccionado de cualquier elemento.

[iEnrique]

Iniciado por marlanga

Deja los temas puramente difíciles para los que sabemos programar, phperos.

http://jsfiddle.net/4bthd/

Código HTML:

<button id="btnNegritas"><b>b</b></button>
<button id="btnCursiva"><i>i</i></button>
<button id="btnSubrayado"><u>u</u></button>
<br/>
<textarea id="campo"></textarea>
 

Código Javascript:

window.onload=function(){
    var Editor={
        textarea:document.getElementById("campo"),
        negritas:document.getElementById("btnNegritas"),
        cursiva:document.getElementById("btnCursiva"),
        subrayado:document.getElementById("btnSubrayado"),
        insertar:function(bbcode){
            var texto=Editor.textarea.value,
                inicio=Editor.textarea.selectionStart,
                fin=Editor.textarea.selectionEnd;
            
            texto=texto.slice(0,inicio)+"["+bbcode+"]"+texto.slice(inicio,fin)+"[\\"+bbcode+"]"+texto.slice(fin);
            Editor.textarea.value=texto;
        }
    };
    Editor.negritas.onclick=function(){
        Editor.insertar("b");
    };
    Editor.cursiva.onclick=function(){
        Editor.insertar("i");
    };
    Editor.subrayado.onclick=function(){
        Editor.insertar("u");
    };
};
 

Básicamente el código es una tontería, escrito en 5 minutos. Sólo es necesario saber cómo se cortan cadenas en javascript y cómo se recupera el texto seleccionado de cualquier elemento.

Muchísimas gracias he hecho unos cuantos cambios para adaptarlo a lo que necesito y me funciona a la perfección. ¡Gracias por tu ayuda!

Iniciado por PHPeros

Buff, la verdad es que has tocado un tema puramente difícil

He buscado más en internet y parece que ya se discutió aquí, además con el BBCode incluido.

Una vez más StackOverflow nos salva!

Muchas gracias por intentarlo de todas formas, me sirvió tu anterior código para otras cosas Saludos.