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:
|
1 |
npm install trumbowyg --save |
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:
|
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, 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:
|
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' }); }); |
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:
|
1 2 3 |
... @import "node_modules/trumbowyg/dist/ui/sass/trumbowyg"; |
Now we have to compile the assets:
|
1 |
npm run dev |
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:
|
1 |
{!! $post->body !!} |
-