How to Add Wysiwyg Editor in Laravel?

A WYSIWYG (pronounced “wiz-ee-wig”) editor is one that allows you to see what the end result will look like while the interface or document is being created. WYSIWYG is an acronym for “what you see is what you get”. Today you will learn how to add wysiwyg editor in Laravel 5 project with a few simple steps.

What is the Purpose of Wysiwyg in Word Processing?

WYSIWYG implies a user interface that allows the user to view something very similar to the end result while the document is being created. The purpose of using wysiwyg editor is to make text editing easy and simple. Using markdown is the other way of editing the text, but that is a little hard and you must learn the syntax of markdown language to be able to use it.

Which Wysiwyg Editor in Laravel to Use?

There are many options for Using wysiwyg editor in laravel, but which one is better and essay to use? We will point out to a few with it’s pro and cons, but will show you how to use one of them in you project. As Laravel grow up, developers contribute a lot of packages for Laravel, including packages for wysiwyg editors. The example packages are: laravel-editor by Vinelab and laravel-ckeditor by UniSharp. But, this packages need a little configuration. What we are going to show you is a custom wysiwyg editor. Again there are many chooses. Ckeditor editor, froala editor and summernote are the good examples of wysiwyg editors. We are going to show you how to use summernote editor. Of course they will not pay me anything or there is no limitation about which one to use, but I personally like it, because it’s easy and simple to use.

How to Use Summernote Editor with Laravel 5?

To use Summernote, I assume you have basic knowledge of using laravel, like creating form and adding JavaScript to your project. If you know them, let’s start adding this amazing wysiwyg editor in laravel 5.

Now, I have a create.blade.php in my view directory of my laravel project. Inside that, I have a very simple form.

{{Form::open([‘route’ => ‘post.store’])}}

{{Form::close()}}

Adding Summer Note.

Now, go to summernot.org getting start page, and download the JavaScript and css fiels. Once you download the files, put it anywhere in your laravel project. I put mine on public directory. To add the css and JavaScript files, use the assets function. like so,

 http://!!asset('/assets/css/summernote.min.css')!!

 http://!!asset('/assets/js/summernote.min.js')!!

make sure you have referenced the directory correctly. I have add the above code in master.blade.php, so you will do the same of course.

At the bottom of the master.blade.php file, open a script tag and add the summernote code.

    
        $(document).ready(function() {
            $('#technig').summernote({
              height:300,
            });
        });
    

Summernote uses the jQuery framework as well, so make sure you have jQuery added to your project. As you can see, you can add some more properties to summernote functions to make it look the way you want. I have added the height:300, to make it height of the textarea 300px. You can see other properties in the official documentation of the summernote.

Now you have the following editor in your project.

Conclusion

It was all about it, I have it has been helpful for you, if you have any question, feel free to comment it below, we will solve it for you. 🙂