Implementar BBCODE en tus proyectos con NBBC

Author: danielgara - Date: 2013-01-08 15:00:17
 
¿Que es BBCODE?
Bulletin Board Code es un lenguaje de marcas ligero utilizado preferentemente en foros de discusión y en e-mails para embellecer la forma en que un mensaje o post es presentado.

¿Para que sirve?
BBCode fue ideado para proporcionar un mecanismo que permitiera a los usuarios mejorar la presentación de sus mensajes de una manera más segura, más sencilla y más limitada. Previamente muchos foros permitían el uso de HTML, con el efecto colateral de que si había HTML mal escrito se trastornaba toda la distribución de la página, o el HTML podía ser usado para incluir JavaScript o formularios lo que causa graves problemas de seguridad al permitir ataques XSS.

¿Como funciona?
Los datos se recogen normalmente de campos de texto, pero en lugar de utilizar código HTML, se usa BBCODE, estos datos son guardados común y corriente en la base de datos tal cual se recogen con las etiquetas BBCODE, el truco esta en que a la hora de mostrar los datos, se debe utilizar un modulo que interprete las etiquetas BBCODE y las transforme en HTML. Existe muchos interpretes pero por experiencia se recomienda NBBC.

Ejemplo de uso de BBCODE
Supongamos que queremos crear un mensaje y colocarle negrilla, simplemente se usarían las etiquetas
Code:
[b] [/b]
Y en el medio se colocaría el texto al que se desea colocar esta negrilla. (Miremos un ejemplo).
Code:
[b]Hola[/b]
Luego cuando estos datos se guardarían en la base de datos, y cuando se desee mostrarlos por pantalla, se usa el módulo interprete para convertir esas etiquetas que estan BBCODE a html, el NBBC convertiría el código anterior en:
Code:
<b>Hola</b>

Tutorial Implementación del módulo NBBC
  1. Se descarga el paquete nbbc del enlace: http://nbbc.sourceforge.net/#download
  2. Se crea la carpeta m_nbbc dentro de la ruta work/modules/
  3. Una vez descargo el paquete, este se descomprime y se mueven todos los archivos que se encuentra en la carpeta src a la ruta work/modules/m_nbbc/
    • src/nbbc_email.php a la ruta work/modules/m_nbbc/nbbc_email.php
    • src/nbbc_lex.php a la ruta work/modules/m_nbbc/nbbc_lex.php
    • src/nbbc_lib.php a la ruta work/modules/m_nbbc/nbbc_lib.php
    • src/nbbc_main.php a la ruta work/modules/m_nbbc/nbbc_main.php
    • src/nbbc_parse.php a la ruta work/modules/m_nbbc/nbbc_parse.php
  4. Se busca la siguiente linea en el archivo work/templates/t_dark/header.tpl
    <script type='text/javascript'>l_global = '{/literal}{$gvar.l_global}{literal}';</script>
    Si no existe se agrega la linea anterior después de:
    <style type="text/css"> @import url({/literal}{$gvar.l_global}{literal}css/t_dark.css); </style>
  5. Se edita el archivo t_dark.css que se encuentra en la ruta work/css/t_dark.css, se agrega al final del archivo lo siguiente:
    .button {
    border: 1px solid #ccc;
    margin: 1px;
    padding: 2px;
    }

    .button:hover {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    -moz-opacity: 0.6;
    }

    .ed {
    width: 400px;
    height: 150px;
    }
  6. Se descarga el paquete de BBcode editor en javascript (el cual nos permite visualizar de un modo mas sencillo las etiquetas bbcode que podemos usar) https://www.dropbox.com/s/z4n6w1c41zk4mbs/bbeditor.rar
  7. Se crea la carpeta bbcode dentro de la ruta work/images/
  8. Se descomprime el archivo anterior y se mueven los archivos del siguiente modo:
    • images/bbcode/* a la ruta work/images/bbcode/*
    • ed.js a la ruta work/js/ed.js
  9. Crear el controlador nbbc.php en la ruta work/nbbc.php con el siguiente contenido:
    <?php

    require('./configs/include.php');
    require(
    C_FULL_PATH.'modules/m_nbbc/nbbc_main.php');

    class 
    c_nbbc extends super_controller {
        
        public function 
    preview()
        {
            
    $bbcode = new BBCode();    
            
    $text=$bbcode->Parse($this->post->mensaje);
            
    $this->engine->assign('text',$text);
        }

        public function 
    display()
        {
            
    $this->engine->assign('title','BBCODE example with nbbc');
            
    $this->engine->display('header.tpl');
            
    $this->engine->display('nbbc.tpl');
            
    $this->engine->display('footer.tpl');
        }
        
        public function 
    run()
        {
            if (isset(
    $this->get->option)){$this->{$this->get->option}();}
            
    $this->display();
        }
    }

    $call = new c_nbbc();
    $call->run();

    ?>
  10. Crear el template nbbc.tpl en la ruta work/templates/t_dark/nbbc.tpl co el siguiente contenido:
    {if isset($text)}
    <div class="square">
    <table width="100%" border="0" cellpadding="0" cellspacing="5">
    <tr><td>{$text}</td></tr></table>
    </div><br />
    {/if}

    {literal}<script src="{/literal}{$gvar.l_global}{literal}js/ed.js" language="Javascript"></script>{/literal}
    <form class="well form-search" method="post" action="{$gvar.l_global}nbbc.php?option=preview">
    <legend>Test BBCODE</legend>
    <fieldset>
    <table cellspacing="2">
    <tr><td>Ingrese el mensaje: {literal}<script type="text/javascript">edToolbar('mytxtarea'); </script>{/literal}
    <textarea name="mensaje" id="mytxtarea" class="ed">{$smarty.post.mensaje|escape}</textarea></td>
    </tr>
    <tr><td><input class="btn btn-primary" type="submit" value="Preview"></td></tr>
    </table>
    </fieldset>
    </form>
  11. Finalmente acceder a la ruta localhost/work/nbbc.php para ver el funcionamiento
  12. El resultado seria algo como lo siguiente:
    testbbcode29512.jpg

Comments

Alerts There are not comments, be the first
Alerts To post comments, you must be a registered