Como crear un BBC para 2.0 RC3

[DoctorMalboro]

Como crear un BBC para 2.0 RC3

Hola,

Este tutorial ví que se pidió una vez y ya que es algo tan simple, decidí explicarlo con un ejemplo práctico. En este caso supongamos que ustedes quieren crear un BBCode de GoEar para su foro, así que van a la página de GoEar y sacan este código:

Code Select Expand

<object width="353" height="132"><embed src="http://www.goear.com/files/external.swf?file=ebafb41" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="353" height="132"></embed></object>

El código después lo vamos a limpiar así queda de tal forma que se pueda poner cualquier URL (en este caso, siempre depende den BBCode que usen)...

Ahora van a Subs.php y van a buscar la línea 917 o buscar esto:

Code Select Expand

/* The following bbc are formatted as an array, with keys as follows:

Y ahí tienen una explicación de como agregarle funciones a su BBCode... la gran mayoria son funciones que tal vez no les sirvan dependiendo de el tipo de BBCode que hagan... pero se los voy a ir explicando de a poco.
Se puede crear más de un tipo de BBCode, dependiendo de lo que necesiten, y esto se basa si es un código externo (como el que hacemos ahora), una función de SMF o un código que sea usado a través de un mod... pero lo único importante es saber estas 2 cosas:

• Se usa la variable $1 como también se puede usar la variable $2, $3, etc. Cuando tengamos que aplicar más de una url (ej. uso $1 para la url de algo y $2 para que salte una descripción que yo quiera poner).
  
• La función block_level la van a usar para evitar que un BBCode sea interferido por otros (ej.

Code Select Expand

[center][goear]la url[/goear][/center]

se va a evitar que el código de GoEar se centre...)

Entonces, empezemos a hacer el BBCode de a poco...



En su Subs.php van a tener que buscar esta línea:

Code Select Expand

$codes = array(

y abajo de este están todos los BBCodes que ustedes posean.

entonces vamos a empezar a reconocer algunos códigos para poder crear nuestro BBCode:

array(        Con esto empieza el BBCode, se crea en base a un array(
'tag'        Con esto vamos a definir el nombre del tag, en este caso goear, que iría así:

Code Select Expand

'tag' => 'goear',
esto significa que el nombre del tag es igual a goear (eviten usar mayúsculas en lo posible)
'type'        Con esto definimos el tipo de código que se utilizará para crear el BBCode, los más usados son 'unparsed_content' (se utiliza para contenidos externos...), 'unparsed_equals' (para códigos de HTML o PHP) o directamente no ponen nada si es algo como un color o tamaño de fuente... en nuestro caso iría

Code Select Expand

'type' => 'unparsed_content',
'content'        Con esto definimos que contenido va a alojar el BBCode, en este caso sería esto:

Code Select Expand

<object width="353" height="132"><embed src="" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="353" height="132"></embed></object>

Pero vamos a hacer 3 modificaciones:

• Vamos a reemplazar el link (http://www.goear.com/files/external.swf?file=ebafb41) por $1 que fue explicado anteriormente..
• vamos a cambiar ambos ancho y alto (width="353" height="132") por esto:
  

Code Select Expand

width="{width}" height="{height}"

[/li]

• vamos a crear un parámetro (voy a explicarlo con profundidad más adelante) que va a ser así:

Code Select Expand

                'parameters' => array(
                      'width' => array('optional' => false),
                      'height' => array('optional' => false),
                ),

así el usuario puede poner el ancho y alto que desee...[/li]

Y nos quedarí así el código casi terminado:

Code Select Expand

'content' => '<object width="{width}" height="{height}"><embed src="$1" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="{width}" height="{height}"></embed></object>',
'parameters'        Con esto podemos crear opciones secundarias, como hicimos anteriormente, eso depende (como dije antes) de que BBCode quieran crear...
'block_level'        Ya fue explicada...
),        Con esto cerramos el array y tenemos el BBCode casi terminado...

Y así nos quedó la primera parte del BBCode...

Code Select Expand

array(
   'tag' => 'goear',
   'type' => 'unparsed_content',
           'parameters' => array(
                      'width' => array('optional' => false),
                      'height' => array('optional' => false),
                ),
   'content' => '<object width="{width}" height="{height}"><embed src="$1" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="{width}" height="{height}"></embed></object>',
   'block_level' => 'true',
),

Ahora van a Subs-Editor.php así terminamos nuestro BBCode... vayan a la línea 1514 o busquen esto:

Code Select Expand

// The below array makes it dead easy to add images to this control. Add it to the array and everything else is done for you!
$context['bbc_tags'] = array();
$context['bbc_tags'][] = array(

y abajo veremos los BBCodes que tienen...

Veamos las partes del BBCode que usaremos como representación del código anterior...

array(        Empezamos otro array(, como explicamos anteriormente...
'image'        Este es el nombre que le pondremos a la imágen que representa al BBCode (traten de hacerla de no más de 23x22 pixeles y en formato .gif)
'code'        Este es el nombre que va a representar a su BBCode, en este caso goear...
'before'        Con esto empezaremos el BBCode... en este caso usaré esto

Code Select Expand

'before' => '[goear width=353 height=132]',
ya que quiero setear el ancho y alto por default...
'after'        Con esto cerramos el BBCode... yo uso [/goear]... pero ustedes le pueden poner el nombre que quieran.
'description'        Acá pueden poner una descripción, les recomiendo usar variables $txt así no tienen lios a la hora de modificar la descripción, algo así

Code Select Expand

'description' => $txt['goear']
),        Cerramos el BBCode

Y listo! tendría que aparecer su BBCode, quedando algo así:

Code Select Expand

array(
   'image' => 'goear',
   'before' => '[goear width=353 height=132]',
   'after' => '[/goear]',
   'description => $txt['goear']
),

y tendría que aparecer el BBCode con éxito...



La imágen de BBCode la suben a ./Themes/default/images/bbc/ y a la carpeta bbc de su theme
La variable la ponen en ./Themes/default/languages/Modifications.suidioma.php

Cualquier duda pregunten en este tema...

Saludos!

[lucas-ruroken]

Buen tuto dr

[Aportadordelmix]

Muy educativo.

Gracias. 

[DANIEL!]

muy buen manual tio! , evitara post en vano...

[distante]

buen manual! lo usare para unos embeds

[gantz]

Este es un codigo para mostrar lo seleccionado estilo nfo pero mi duda es lo estoy haciendo bien o estoy fallando en algun paso salu2 y espero me puedas ayudar.

Code Select Expand

array(
'tag' => 'nfo',
'before' => '<pre><div class="code_body" style="border: medium none ; background: transparent none repeat scroll 0% 0%; font-size: 9pt; font-family: terminal,'courier new'; line-height: 95%; letter-spacing: 0px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">',
'after' => '</div></pre>',
),

array(
'image' => 'nfo',
'before' => '[nfo]',
'after' => '[/nfo]',
'description' => $txt['nfo'],
),

[DoctorMalboro]

Este es un codigo para mostrar lo seleccionado estilo nfo pero mi duda es lo estoy haciendo bien o estoy fallando en algun paso salu2 y espero me puedas ayudar.

Code Select Expand

array(
'tag' => 'nfo',
'before' => '<pre><div class="code_body" style="border: medium none ; background: transparent none repeat scroll 0% 0%; font-size: 9pt; font-family: terminal,'courier new'; line-height: 95%; letter-spacing: 0px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">',
'after' => '</div></pre>',
),

array(
'image' => 'nfo',
'before' => '[nfo]',
'after' => '[/nfo]',
'description' => $txt['nfo'],
),

Esta bien el código...

[gantz]

Parse error: syntax error, unexpected T_STRING, expecting ')' in /Sources/Subs.php on line 1030

hola ya revise el codigo pero no veo ningun error pero al momento de modificar el subs.php me da este error me podrian ayudar por favor salu2 y muchas gracias por su ayuda

[DoctorMalboro]

Leí algo mal y pense que habías escrito mal... el código esta mal... me parece que no leíste el tutorial

[DoctorMalboro]

Code Select Expand

            'content' => '<img src="http://www.forkosh.dreamhost.com/mathtex.cgi?{{$1}}" alt="" class="bbc_img" />',

esto: {{ y esto: }} no es necesario... solo con el $1 tendría que funcionar...

[lsda.math]

es que sin las llaves cuando hay expresiones separadas con espacios, da problemas ... sin embargo el bbcode funciona, estoy tratando de colocar la imagen en el theme ... vamos a ver si lo logro ...

Gracias por tu rapida respuesta ...

y perdon por la falta de acentos, estoy trabajando en un teclado ingles :S

[lsda.math]

Saludos nuevamente,

la cuestión está en que el bbcode como tal funciona a la perfección. Lo que no he logrado hacer es colocar un botón en la botonera ... imagino que el segundo pedazo de código es el que se encarga de dicha tarea, pero cuando lo coloco, simplemente el foro no se carga :S

sobre las llaves que citaste, no afectan en nada, es algo que necesito colocar, y de nuevo, el bbcode funciona así correctamente. Es decir, de existir un error se encuentra en:

Code Select Expand


array(
                     'image' => 'latex',
                     'code' => 'tex'
                     'before' => '[tex]',
                     'after' => '[/tex]',
                     'description => $txt['latex']
         ),


el icono del botón lo subí en los directorios que recomiendas. Y lo único que me falta por hacer es modificar ./Themes/default/languages/Modifications.suidioma.php lo cual no entiendo bien 

[DoctorMalboro]

Si esa parte no la entendes bien, cambia $txt['latex'] por 'Acá la descripción' sin quitar las comillas...

En qué parte de tu Subs-Editor.php lo pusiste?

[lsda.math]

Lo puse seguido de:

Code Select Expand


array(
'image' => 'hr',
'code' => 'hr',
'before' => '[hr]',
'description' => $txt['horizontal_rule']
),
array(),


y antes del  parentesis coma final

Code Select Expand


),


[YoMismo]

Hola, estoy intentando incluir un BBcode para llamar a un fichero html donde hay un editor de ecuaciones, en concreto dragmath, y que me devuelva la fórmula creada en dicho editor, para ello estoy utilizando parte de un código obtenido en el foro en inglés. El botón ya he conseguido ponerlo, gracias a este tutorial, pero lo que necesito es que al pulsar el botón se ejecute la función dragmath que aparece en el siguiente código, pero no tengo ni idea de como hacerlo, ni donde incluir el código para que se ejecute correctamente.

Code Select Expand


// now display a dragmath button
      echo '
      <a href="javascript:dragmath();">';
      // Okay... we have the link. Now for the image and the closing </a>!
      echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/dragmath.gif" align="bottom" width="23" height="22" alt="DragMath" title="DragMath" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';

      // and then insert a bit of javascript to display the dragmath editor
      echo '
        <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
           
            var dragmathWindow;
            var messageControl;
           
            function dragmath()
            {
            if(dragmathWindow)
               dragmathWindow.close();
           
            messageControl = document.forms.', $context['post_form'], '.', $context['post_box_name'],';
           
            dragmathWindow = window.open("http://YOURDOMAIN/dragmath.html", "create_maths", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,width=560,height=350,resizable=yes");
            }
           
         // ]]></script>';


Nota: para ingresar al foro, el enlace en mi firma, podéis usar como nombre y contraseña: invitado

[YoMismo]

Hola de nuevo, solo es para decir que ya no me hace falta, ya me buscaré otra opción.

Gracias.

[gohanjaja]

Te animas a explicarlo como hacer para 4shared? ..el código es este:


<embed src="http://www.4shared.com/embed/1108977861/5586836" width="420" height="250" allowfullscreen="true" allowscriptaccess="always"></embed>

[rafadizeo]

muchas gracias, me fue de gran ayuda!

[camus360s]

excelente, acabo de aplicar tu tutorial en un nuevo BBCode para SMF 2.0.2 y funciona de maravilla. Muchas gracias por éste excelente tutorial y por el tiempo que te tomaste en crearlo.

Saludos.

[Diego Andrés]

Una pregunta, ¿de qué forma sería para que el usuario necesite tener asignado un permiso para poder ver el bbc?