Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] BBCode

Estas en el tema de BBCode en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/07/2014, 04:43
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 8 años, 4 meses
Puntos: 67
BBCode

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:
Ver original
  1. <?php
  2. function BBCodes($mensaje) {
  3.    
  4.     $mensaje = htmlentities($mensaje);
  5.    
  6.     $bbcode = array(
  7.    
  8.     '/\[b](.*?)\[\/b]/is',
  9.     '/\[i](.*?)\[\/i]/is',
  10.     '/\[u](.*?)\[\/u]/is',
  11.     '/\[t](.*?)\[\/t]/is',
  12.     '/\[ul](.*?)\[\/ul]/is',
  13.     '/\[ol](.*?)\[\/ol]/is',
  14.     '/\[li](.*?)\[\/li]/is',
  15.     '/\[hr]/is',
  16.     '/\[url](.*?)\[\/url]/is',
  17.     '/\[url=(.*?)\](.*?)\[\/url]/is',
  18.     '/\[img](.*?)\[\/img]/is',
  19.     '/\[color=(.*?)\](.*?)\[\/color]/is',
  20.     '/\[youtube](.*?)\[\/youtube]/is',
  21.     '/\[size=(.*?)\](.*?)\[\/size]/is',
  22.     '/\[align=(.*?)\](.*?)\[\/align]/is',
  23.     '/\[quote=(.*?)\](.*?)\[\/quote]/is',
  24.     '/\[:(.*?):]/is'
  25.    
  26.     );
  27.    
  28.     $html = array(
  29.    
  30.     '<b>$1</b>',
  31.     '<i>$1</i>',
  32.     '<u>$1</u>',
  33.     '<strike>$1</strike>',
  34.     '<ul style="list-style:outside; margin-left:30px">$1</ul>',
  35.     '<ul style="list-style:decimal; margin-left:35px">$1</ul>',
  36.     '<li>$1</li>',
  37.     '<hr style="border:0.1em solid #DFDFDF" />',
  38.     '<a href="$1" target="_blank" style="color:#06F">$1</a>',
  39.     '<a href="$1" target="_blank" style="color:#06F">$2</a>',
  40.     '<img src="$1" style="max-width:250px" />',
  41.     '<span style="color:$1">$2</span>',
  42.     '<iframe width="560" height="350" src="//www.youtube.com/embed/$1" frameborder="0"></iframe>',
  43.     '<span style="font-size:$1em">$2</span>',
  44.     '<p style="text-align:$1">$2</p>',
  45.     '<div style="background:#fff; padding:1px 0 1px 5px; border:1px solid #ddd">Quote: <b>$1</b><p>$2</p></div>',
  46.     '<img src="'.DIR_IMG.'smiles/$1.gif" />'
  47.        
  48.     );
  49.    
  50.     $mensaje = preg_replace($bbcode, $html, $mensaje);
  51.    
  52.     $resultado = nl2br($mensaje);
  53.    
  54. return $resultado;
  55.    
  56. }
  57. ?>


Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. function p_text(texto){
  3. texto = texto.replace('/n','<br />');
  4. document.getElementById('preview_text').innerHTML = texto;
  5. }
  6.  
  7. function p_button(){
  8. $("#previa").css("display", "block");
  9. }
  10. </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.
  #2 (permalink)  
Antiguo 10/07/2014, 05:19
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 11 meses
Puntos: 578
Respuesta: BBCode

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.
  #3 (permalink)  
Antiguo 10/07/2014, 05:24
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 8 años, 4 meses
Puntos: 67
Respuesta: BBCode

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.
  #4 (permalink)  
Antiguo 10/07/2014, 06:35
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.143
Antigüedad: 18 años, 2 meses
Puntos: 832
Respuesta: BBCode

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.
  #5 (permalink)  
Antiguo 10/07/2014, 06:44
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 8 años, 4 meses
Puntos: 67
Respuesta: BBCode

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

De momento e conseguido realizarlo de está manera:

Código Javascript:
Ver original
  1. texto = texto.replace('[b]','<b>');
  2. 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:
Ver original
  1. var bbcode = ['[b][/b]']
  2.  
  3. var html = ['<b></b>']
  4.  
  5. texto = texto.replace(bbcode, html);

Saludos.
  #6 (permalink)  
Antiguo 10/07/2014, 12:34
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 8 años, 4 meses
Puntos: 67
Respuesta: BBCode

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

Código Javascript:
Ver original
  1. var bbcode = [
  2. /\[b\](.*?)\[\/b\]/g,
  3. /\[i\](.*?)\[\/i\]/g,
  4. /\[u\](.*?)\[\/u\]/g,
  5. /\[t\](.*?)\[\/t\]/g
  6. ]
  7. var html = [
  8. '<b>$1</b>',
  9. '<i>$1</i>',
  10. '<u>$1</u>',
  11. '<strike>$1</strike>'
  12. ]

Y gracias por responder.

Saludos.

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:27.