[SOLUCIONADO] BBCode

[MaNuX0218]

Hola tengo en PHP una función para generar los BBCodes pero quiero que se muestren en javascript ya que tengo una función en javascript que me hace una muestra previa del mensaje pero los bbcode no se muestrán hasta que no se publica. ¿Cómo podría hacer que se visualicen los bbcodes en la vista previa?

Os dejo la función bbcode en php y la vista previa en javascript.

Código PHP:

<?php
function BBCodes($mensaje) {
    
    $mensaje = htmlentities($mensaje);
    
    $bbcode = array(
    
    '/\[b](.*?)\[\/b]/is',
    '/\[i](.*?)\[\/i]/is',
    '/\[u](.*?)\[\/u]/is',
    '/\[t](.*?)\[\/t]/is',
    '/\[ul](.*?)\[\/ul]/is',
    '/\[ol](.*?)\[\/ol]/is',
    '/\[li](.*?)\[\/li]/is',
    '/\[hr]/is',
    '/\[url](.*?)\[\/url]/is',
    '/\[url=(.*?)\](.*?)\[\/url]/is',
    '/\[img](.*?)\[\/img]/is',
    '/\[color=(.*?)\](.*?)\[\/color]/is',
    '/\[youtube](.*?)\[\/youtube]/is',
    '/\[size=(.*?)\](.*?)\[\/size]/is',
    '/\[align=(.*?)\](.*?)\[\/align]/is',
    '/\[quote=(.*?)\](.*?)\[\/quote]/is',
    '/\[:(.*?):]/is'
    
    );
    
    $html = array(
    
    '<b>$1</b>',
    '<i>$1</i>',
    '<u>$1</u>',
    '<strike>$1</strike>',
    '<ul style="list-style:outside; margin-left:30px">$1</ul>',
    '<ul style="list-style:decimal; margin-left:35px">$1</ul>',
    '<li>$1</li>',
    '<hr style="border:0.1em solid #DFDFDF" />',
    '<a href="$1" target="_blank" style="color:#06F">$1</a>',
    '<a href="$1" target="_blank" style="color:#06F">$2</a>',
    '<img src="$1" style="max-width:250px" />',
    '<span style="color:$1">$2</span>',
    '<iframe width="560" height="350" src="//www.youtube.com/embed/$1" frameborder="0"></iframe>',
    '<span style="font-size:$1em">$2</span>',
    '<p style="text-align:$1">$2</p>',
    '<div style="background:#fff; padding:1px 0 1px 5px; border:1px solid #ddd">Quote: <b>$1</b><p>$2</p></div>',
    '<img src="'.DIR_IMG.'smiles/$1.gif" />'
        
    );
   
    $mensaje = preg_replace($bbcode, $html, $mensaje);
   
    $resultado = nl2br($mensaje);
    
return $resultado;
    
}
?>
 

Código Javascript:

<script type="text/javascript">
function p_text(texto){
texto = texto.replace('/n','<br />');
document.getElementById('preview_text').innerHTML = texto;
}
 
function p_button(){
$("#previa").css("display", "block");
}
</script>
 

Haber si me puden guiar un poco a mostrar esos bbcodes mediante javascript para así mostrarlo en la vista previa sin necesidad de publicarlo.

Saludos.

[PHPeros]

No es necesario que sea a tiempo real, bien se podría hacer una vista previa pero recargando el sitio, eso sí, con los datos ya mostrados desde el servidor.

[MaNuX0218]

Si de ese metodo podria realizarlo, pero me gustaría que se viese la previa sin necesidad de recargar por eso intento hacerlo de está manera.

Saludos.

[Panino5001]

Para eso, en lugar de bbCode te conviene usar un editor wysiwyg como tinymce en combinación con htmlpurifier para evitar inyección de código malicioso.

[MaNuX0218]

Prefiero utilizar y crear uno propio para futuras modificaciones y/o ediciones.

De momento e conseguido realizarlo de está manera:

Código Javascript:

texto = texto.replace('[b]','<b>');
texto = texto.replace('[/b]','</b>');
 

Y claro eso se me aría muy extenso y da problemas a la hora de insertar enlaces o imagenes.

Por eso de está misma forma como podría crearlo mediante arrays por ejemplo que quede algo así:

Código Javascript:

var bbcode = ['[b][/b]']
 
var html = ['<b></b>']
 
texto = texto.replace(bbcode, html);
 

Saludos.

[MaNuX0218]

Ya lo tengo solucionado, los dejo por si a alguien le iciera falta crear bbcode en javascript.

Código Javascript:

var bbcode = [
/\[b\](.*?)\[\/b\]/g,
/\[i\](.*?)\[\/i\]/g,
/\[u\](.*?)\[\/u\]/g,
/\[t\](.*?)\[\/t\]/g
]
var html = [
'<b>$1</b>',
'<i>$1</i>',
'<u>$1</u>',
'<strike>$1</strike>'
]
 

Y gracias por responder.

Saludos.