Editor BBCode jQuery y Java Script

Insertar un editor BBCode (wysibb)

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *