BB Code para los comentarios

Bueno, anoche programé algo que me habían pedido varios: agregué al blog la posibilidad de utilizar BB Code.

¿Qué es el BBCode? es el sistema que tienen los foros para poder agregar en un comentario tanto formato de texto como enlaces, imagenes y videos sin que se rompa todo. ¿Por qué el blog no permite comentar con HTML? Sencillo, cuando esa función estaba liberada en muchos sitios algunos pillos la usaron para inyectar Javascript o código que rompía el sitio así que, de alguna forma, había que limitarlo.

El blog tenía, ya de por sí, su propio sistema que todavía funciona (no se chocan) así que los viejos comentarios deberían funcionar pero ahora pueden usar BBCode para los nuevos. ¿Cómo se usa? A continuación les comento un poco, después veo de ponerlo de alguna forma más amena.

Obviamente los cambios en el blog no se terminan, por eso es que sigo armando cosas y tirando algunas líneas de código.

Es simple, no son tantas funciones, pero ahora si quieren meter un link, una imagen o un video de Youtube será mucho más fácil:

  • [ b ]: Negrita  - [ b]Hello world[ /b]
  • [ i ]: Cursiva[ i]Hello world[ /i]
  • [ s ]: Tachadp - [ s]Hello world[ /s]
  • [ u ]: Subrayado - [ u]Hello world[ /u]
  • [code]: código - [code]Hello world[/code]
  • [email]: Email (clickeable) - [email][email protected][/email]
  • [ url ]: URL (clickeable) - [ url=http://example.com]Example.com[ /url]
  • [img ]: Image (no clickeable) - [img ]http://example.com/example.png[ /img]
  • [ quote ]: Cita - [ quote ]Hello world[ /quote ]
  • [youtube]: Video de Youtube, hay que usar sólo el código - [youtube]a-video-id-123456[/youtube]
  • [font]: Font (sólo las que son usuales) - [font=Arial]Hello world![/font]
  • [size]: Font size - [size=12]Hello world![/size]
  • [color]: Font color - [color=red]Hello world![/color]
  • [left]: Text-align: left - [left]Hello world[/left]
  • [center]: Text-align: center - [center]Hello world[/center]
  • [right]: Text-align: right - [right]Hello world[/right]
  • List:
    • [list]: List - [list]...list items...[/list]
    • [*]: List item within a list - [*]Hello world!\r\n[*]Hello moon!
    • [li]: List item within a list (alias) - [li]Hello world!\r\n[/li][li]Hello moon!/[li]
    • Ejemplo: [list][*]Hello world![li]Hello moon![/li][/list]

Los espacios agregados son para que , justamente, no me reemplace los míos :P le sacan esos espacios en los tags y listo, después armo una listita más copypasta como ayuda de memoria, los viejos usuarios de foros ya se los saben de memoria Guiño

Además estuve cambiando algunas cositas menores que alguno notará, por el lado del admin todavía estoy al 50% pero las funciones relevantes estan funcionando, no me acuerdo qué otra cosa querían por ahí pero el Nightmode funciona y el sistema lo recuerda, después armo un post explicando cómo programarle el nightmode a tu sitio sin depender de mucho framework que digamos.

Si te gustó esta nota podés...
Invitame un café en cafecito.app

Categoría: Programación Etiquetas:  bbcode blog php programación

Otros posts que podrían llegar a gustarte...

Comentarios

  • Germán     21/11/2018 - 10:38:56

    +10 por le modo nocturno!!

  • Fabio Melloni     21/11/2018 - 11:30:23

    aha..... y tenes sin azucar de esas cosas?

  • Hugo     21/11/2018 - 11:45:14 Revisado: 21/11/2018 - 11:46:24

    Yo era uno de los que pedía mejoras en los comentarios:

    Me gustaría mejoras en el sistema de comentarios
    Hugo Mdq, mayo 2012


    Ahora que están, no los voy a usar nunca, solo porque soy un jodido :D

  • DrMato     21/11/2018 - 12:53:34

    Una cosita, en el nightmode (aplausos!) los títulos de los post quedan bastante oscuros también, al borde de complicarse la lectura :D

  • Damian     21/11/2018 - 13:10:34

    No iba a comentar nada, pero me tocó Putin :D

  • timoss     21/11/2018 - 16:13:45

    Así era como se escribían textos en el Wordstar.

  • Danbat     21/11/2018 - 19:29:10 Revisado: 21/11/2018 - 19:35:40

    Size y color abren una puerta muy peligrosa.

    Poner links donde se pueda saber qué se linke y agregar imágenes y videos de manera más simple creo que enriquecerá la sección, aunque también pienso que abren puertas peligrosas para que cualquiera meta cualquier delirio.

    Pero igual está bueno.

    • Fabio Baccaglioni     22/11/2018 - 00:21:19

      siempre puedo limitar las funciones, es bastante simple bloquearlo, así que aunque las use, si me molesta el resultado, le quito la posibilidad en un comment de php

  • Dario     22/11/2018 - 00:54:09

    Muy bueno lo del dark-mode. Tanto blanco hace que se "pierda" la separacion entre los distintos elementos del site (post, comentarios, etc.)

    Si, ya se que es la moda googleosa de que cada vez haya menos contraste entre los componentes, pero yo soy un viejo choto!! :D

    Quiero la autopista Matlock!!!!!

  • kyo     22/11/2018 - 11:57:19

    timoss dijo:

    Así era como se escribían textos en el Wordstar.

    y en el wordperfect.. y en todos bajo DOS antes de que hubiera algo remotamente que fuera WYSIWYG jaja

  • furoya     09/06/2021 - 16:07:23

    ¿Esto funciona en el 2021?
    Porque entonces, ya sé qué hago mal para que no me aparezca el formato de cursiva. Estoy usando la etiqueta de emphasis y no la de italic. :|

    • Fabio Baccaglioni     09/06/2021 - 19:32:37

      ja, si, está funcionando desde hace tres años :P igual se puede usar el tag em

Deje su comentario:

Tranquilo, su email nunca será revelado.
La gente de bien tiene URL, no se olvide del http/https

Negrita Cursiva Imagen Enlace


Comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador. Los comentarios son filtrados por ReCaptcha V3.