Laravel 5.4 #24 : Añadir librería WYSIWYG a nuestro proyecto

En esta entrada vamos a añadir una librería WYSIWYG de jQuery a nuestro proyecto. Lo añadiremos al textarea de la edición de posts y al de creación de posts.

He estado mirando por Internet y la librería jQuery que más me ha convencido ha sido una llamada Trumbowyg.

Primero de todo tenemos que descargarla, lo haremos a través de npm:

Ahora vamos a añadir una clase CSS que sea común para los dos textarea ( includes/form-submit-post.blade.php  y post_edit.blade.php ), en mi caso, le he puesto textarea-wysiwyg, pero puedes poner lo que quieras:

 

Ok, una vez descargada la librería y añadida la clase, tenemos que añadir la librería a nuestro JavaScript base y después el SCSS del plugin a nuestro archivo SCSS.

Abrimos el app.js  y añadimos estas líneas:

En la propiedad btns puedes añadir las que quieras y con el svgPath también, puedes poner los iconos donde quieras yo los he puesto ahí.

Vamos al archivo app.scss  y añadimos la siguiente línea:

Ahora debemos compilarlos:

Y ya estaría:

 

Falta una última cosa, lo que pasa es que a la hora de ver el post, no veremos el HTML renderizado veremos los tags HTML tal cual se guardan en la base de datos. Para forzar a que se renderice el código deberemos modificar en post.blade.php la línea que muestra el body del post:

 

-

– http://alex-d.github.io/Trumbowyg/


Aloja tu proyecto en DigitalOcean: Obtén $50 de crédito gratis al registrarte a través de este enlace.

Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.

💬 CONTACTAR

Deja un comentario

  Acepto la política de privacidad