Blog
Insertar un editor BBCode (wysibb)
- Publicado por: admin
- Categoría: Blog Java Script jQuery
![Editor BBCode jQuery y Java Script](https://unipython.com/wp-content/uploads/2015/10/editor-bbcode-jquery-329x216.jpg)
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](https://unipython.com/wp-content/uploads/2015/10/wysibb-bbcode-tablet.png)
¿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.