TECHNIG
Gateway for IT Experts and Tech Geeks

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.

Wysiwyg Editor in Laravel
Wysiwyg Editor in Laravel

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::label(‘title’, ‘Title’)}} {{Form::text(‘title’,null,array(‘class’ => ‘form-control’, ‘placeholder’=>’Title’))}}
{{Form::label(‘body’, ‘Content’)}} {{Form::textarea(‘body’,null,array(‘class’ => ‘form-control’, ‘placeholder’=>’Content’, ‘id’ => ‘technig’))}}
{{Form::submit(‘Publish Post’,array(‘class’ => ‘btn btn-primary btn-sm’))}}

{{Form::close()}}

As you can see, my content textarea has an ID field of technig, so that I can add summernote to this form field.

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.

summernote to laravel
summernote to laravel

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. 🙂

8 Comments
  1. rahul says

    Hi,
    I am using your editor in my laravel project…text is going in email but not pic….what i am doing wrong can you tell me ??

  2. Shahriar says

    Hi,

    I have a form with multiple textarea. I have successfully installed Summernote and loaded the editor in a single textarea but can’t load again in another textarea.

    Do I need to declare separate ID=”” for each textarea to load the editor everytime?

    1. Hujjat Nazari says

      If you are using the same textarea in the same page, you have give different ID and apply the editor to the second id separately.

  3. Izat says

    Hi i this issue. I use the summernote in my laravel 5.2 project.

    I can save it to the database. But it does not store the html format. Is there any other settings i should include?

  4. grey says

    your example is not working because you dont use id ‘technig’ which you defined on textarea.

  5. Serge says

    Damn right:) And Hujjat haven’t corrected it yet:) Thanks for the article, though!

    1. Hujjat Nazari says

      You’re welcome, The issue fixed. 🙂

  6. gul says

    Dear I want to use Photoshop/corledraw/freehand editor in laraval website which works like Wysiwyg Editor use by any user.

    Thanks In Advance,

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More