Blog
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.
¿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.