Laravel 5.4 #24 : Add WYSIWYG plugin to our project

In this post, we are going to add a WYSIWYG jQuery plugin to our project. We will add it to the textarea of the posts edition and to the creation of posts.

I have been Googling and the jQuery library that has convinced me the most has been one called Trumbowyg.

First of all, we have to download it, we will do it through npm:

Now, we are going to add a CSS class that will be common for both textarea ( includes/form-submit-post.blade.php  and  post_edit.blade.php ), in my case, I have put textarea-wysiwyg, but you can put what you what:


Ok, once the library is downloaded and the class added, we have to add the plugin to our JavaScript and then the plugin’s SCSS to our SCSS file.

Open   app.js  and add these lines:

The property btns  can be what you want  and the svgPath as well, I have decided to put the icons there, but you can put them where you want.

Open the  app.scss  file and add the following line:

Now we have to compile the assets:

And it will be done:


One last thing is missing, what happens is that at the time of viewing the post, we will not see the HTML rendered we will see the HTML tags as they are stored in the database. To force the code to be rendered, we need to modify the line that shows the body of the post in post.blade.php: