bbcode – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Wed, 25 Nov 2015 01:58:35 +0000 es hourly 1 https://wordpress.org/?v=5.6.15 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png bbcode – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Convertir BBCode en HTML con PHP https://programacionextrema.com/2015/10/31/convertir-bbcode-en-html-con-php/ https://programacionextrema.com/2015/10/31/convertir-bbcode-en-html-con-php/#respond Sat, 31 Oct 2015 20:26:12 +0000 http://programacionextrema.com/?p=422 Hoy en día es muy común tener un editor BBCode en un sitio web, ya sea para un foro o no. En tutoriales anteriores aprendimos a insertar un editor BBCode en un sitio web, en este veremos cómo convertir BBCode en HTML con PHP para poder visualizarlo correctamente. ¿Cómo convertir BBCode en HTML con PHP?… Read More

La entrada Convertir BBCode en HTML con PHP aparece primero en ProgramaciónExtrema.com.

]]> Hoy en día es muy común tener un editor BBCode en un sitio web, ya sea para un foro o no. En tutoriales anteriores aprendimos a insertar un editor BBCode en un sitio web, en este veremos cómo convertir BBCode en HTML con PHP para poder visualizarlo correctamente.

¿Cómo convertir BBCode en HTML con PHP?

Realizar esto no es tan complicado, podemos utilizar la función preg_replace que nos proporciona PHP para remplazar valores dentro de una cadena de caracteres:

function bbcodeToHTML($text)
{
    // BBCode array
    $find = array(
        
        '~\[code\](.*?)\[/code\]~s',
        
        '/(?si)\\[list=\\d+\\](.*?)\\[\\/list\\]/',
        
        '/(?si)\\[list\\](.*?)\\[\\/list\\]/',
        
        '/(?si)\\[\\*\\](.*?)\\[\\/\\*\\]/',
        
        '~\[b\](.*?)\[/b\]~s',
        
        '~\[i\](.*?)\[/i\]~s',
        
        '~\[s\](.*?)\[/s\]~s',
        
        '~\[sup\](.*?)\[/sup\]~s',
        
        '~\[sub\](.*?)\[/sub\]~s',
        
        '~\[u\](.*?)\[/u\]~s',
        
        '~\[quote\](.*?)\[/quote\]~s',
        
        '~\[size=(.*?)\](.*?)\[/size\]~s',
        
        '~\[font=(.*?)\](.*?)\[/font\]~s',
        
        '~\[color=(.*?)\](.*?)\[/color\]~s',
        
        '~\[url=(.*?)\](.*?)\[/url\]~s',
        
        '~\[video\](.*?)\[/video\]~s',
        
        '~\[img\](https?://.*?\.(?:jpg|jpeg|gif|png|bmp))\[/img\]~s',
        
        '~\[center\](.*?)\[/center\]~s',
        
        '~\[left\](.*?)\[/left\]~s',
        
        '~\[right\](.*?)\[/right\]~s'
        
    );

    // Etiquetas HTML para remplazar el BBCode
    $replace = array(
        
        '<code>$1</code>',
        
        '<ol>$1</ol>',
        
        '<ul>$1</ul>',
        
        '<li>$1</li>',
        
        '<b>$1</b>',
        
        '<i>$1</i>',
        
        '<s>$1</s>',
        
        '<sup>$1</sup>',
        
        '<sub>$1</sub>',
        
        '<span style="text-decoration:underline;">$1</span>',
        
        '<pre>$1</' . 'pre>',
        
        '<font size="$1em">$2</font>',
        
        '<font face="$1">$2</font>',
        
        '<span style="color:$1;">$2</span>',
        
        '<a href="$1" target="_blank" rel="nofollow">$2</a>',
        
        '<iframe src="http://www.youtube.com/embed/$1" width="640" height="480" frameborder="0"></iframe>',
        
        '<img src="$1" alt="" style="max-width:740px"/>',
        
        '<p style="text-align:center;">$1</p>',
        
        '<p style="text-align:left;">$1</p>',
        
        '<p style="text-align:right;">$1</p>'
        
    );
    
    // Remplazando el BBCode por las etiquetas HTML
    return nl2br(preg_replace($find, $replace, $text));
}


/*Haciendo una prueba de la función*/
echo bbcodeToHTML('[b]Esto es una prueba[/b]');

Es importante ver que cada elemento del array $replace remplazará al elemento del mismo índice del $find sobre el texto pasado por parámetro. Si queremos agregar un nuevo BBCode a nuestra función solamente tenemos que incluir el código en el array $find y su HTML en el $replace (en el mismo índice).

Bueno gente, hemos llegado al final de este breve tutorial y como siempre digo ante cualquier problema no duden en dejar un comentario.

La entrada Convertir BBCode en HTML con PHP aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/10/31/convertir-bbcode-en-html-con-php/feed/ 0 Insertar un editor BBCode (wysibb) https://programacionextrema.com/2015/10/26/insertar-un-editor-bbcode-wysibb/ https://programacionextrema.com/2015/10/26/insertar-un-editor-bbcode-wysibb/#respond Mon, 26 Oct 2015 20:08:12 +0000 http://programacionextrema.com/?p=305 En este tutorial aprenderemos a insertar un editor BBCode en nuestra web. Para realizar esto vamos a necesitar de un editor, en este caso vamos a utilizar el plugin para jQuery llamado wysibb, que lo pueden encontrar en su página oficial: http://www.wysibb.com Entre las características más destacadas de este plugin podemos ver que: Es responsive. Tiene… Read More

La entrada Insertar un editor BBCode (wysibb) aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos a insertar un editor BBCode en nuestra web. Para realizar esto vamos a necesitar de un editor, en este caso vamos a utilizar el plugin para jQuery llamado wysibb, que lo pueden encontrar en su página oficial: http://www.wysibb.com

Entre las características más destacadas de este plugin podemos ver que:

  • Es responsive.
  • Tiene un diseño muy elegante.
  • Es rápido.
  • Permite manipular tablas y listas.
  • Permite insertar videos de youtube.
  • Se puede obtener el código HTML o BBCode del texto editado.

En la siguiente imagen podemos apreciar como se visualiza en una tablet con Android.

Editor BBCode WysiBB

Editor BBCode WysiBB

¿Cómo insertar un editor BBCode en mi web?

Realizar esto es muy sencillo, una vez que hayamos descargado el plugin en nuestra PC vamos a crear un archivo HTML e insertar el siguiente código:

<head>
  <!-- Cargando jQuery  desde internet-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <!-- Cargando WysiBB JS y el estilo css localmente-->
  <script src="/js/jquery.wysibb.min.js"></script>
  <link rel="stylesheet" href="/css/default/wbbtheme.css" />
  <!-- Iniciando WysiBB BBCode editor -->
  <script>
    $(function() {
      // Con esta linea ya se crea el editor BBCode en nuestra página.
      $("#editor").wysibb();
    })
  </script>
</head>
<body>
  <textarea id="editor"></textarea>
</body>

Ahora si tenemos que insertarlo en un sitio ya funcionando solamente debemos ubicar la etiqueta textarea en el lugar que más nos guste y listo, ahí aparecerá el editor BBCode.

Es importante mencionar que este plugin tiene muchas funcionalidades, estas mismas las pueden ver en la documentación oficial http://www.wysibb.com/docs.

Bueno gente, hemos llegado al final de este breve tutorial. Ante cualquier problema no duden en dejar un comentario.

La entrada Insertar un editor BBCode (wysibb) aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/10/26/insertar-un-editor-bbcode-wysibb/feed/ 0