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:
|
1 |
npm install trumbowyg --save |
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:
|
1 2 3 |
... <textarea class="textarea-wysiwyg" id="body" name="body">{{ old('body') }}</textarea> ... |
|
1 2 3 |
... <p>{{ Form::textarea('body', old('body'), ['class' => 'textarea-wysiwyg']) }}</p> ... |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... require('trumbowyg'); $(document).ready(function(){ ... $('.textarea-wysiwyg').trumbowyg({ btns: ['strong', 'em', '|', 'link'], autogrow: true, svgPath: '/icons/trumbowyg-icons.svg' }); }); |
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:
|
1 2 3 |
... @import "node_modules/trumbowyg/dist/ui/sass/trumbowyg"; |
Ahora debemos compilarlos:
|
1 |
npm run dev |
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:
|
1 |
{!! $post->body !!} |
-
– http://alex-d.github.io/Trumbowyg/
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