Using Summernote WYSIWYG editor with Laravel

Using Summernote WYSIWYG editor with Laravel

Summernote is a WYSIWYG (What You See Is What You Get) style editor which offers lots of nifty features such as pasting images from clipboard, interactive text editing, easy server integration and it has all the features for standard HTML formatting.

I recently had to use summernote in a Laravel based project at work and I must say it was a breeze to setup and get running. Also, the Summernote project is very active and has over 6000 stars on GitHub which makes me happy as it means better future maintainability and support. Now let me show you how you can implement Summernote with Laravel.

Set up routes:

  • We will define routes for displaying summernote form, storing the summernote content and finally to display the content by fetching it from the database.
  • Note that the Route::view method is new in laravel 5.5 and if you are using an older version then you can use a traditional Route::get and return the view in a method callback.

Summernote input form:

  • Create a summernote.blade.php and add the form which will display our summernote input.
  • We will include summernote related assets and initialize summernote on our textarea input which has a class of summernote on document ready,
  • This is how it might look like:summernote_laravel_tutorial

Parse and store Summernote content:

  • Generate a model along with a resourceful controller and a migration file.
  • Add a longText content field to the summernote migration so that it can suffice for a decent length of content.
  • Don’t forget to generate summernote table from the migration file.
  • Now we will parse our summernoteInput in the store method of SummernoteController.

    • We use domdocument() method to generate a native PHP dom object which makes it easier to navigate HTML in a logical manner.
    • Also, the Summernote encodes any images in the content to base64 format which means easy transfer from client to server but is not feasible if you intend to store the content in a database. As even a small image encoded in base64 format could add tens of thousands of characters to the content.
    • We work around this by decoding the base64 format image (using base64_decode()) and saving it into the public directory. We then replace the src attribute of the image in the content with the link to the image we just stored.
    • We finally store the content in DB and return a view to display the content.

Fetch and display content from the view:

  • In summernote_display.blade.php add the following code to display the content.
  • Yeah, a single {!! $summernote->content !!} is enough!. Note that we use {!! !!} and not {{ }} as the latter escapes the string which we do not want in this case.
  • This is how mine looks like:Using Summernote WYSIWYG editor with Laravel

Update:

If you need to show an edit form for Summernote content. Wherein you may want to fetch the content stored in a databse and load it into Summernote.

You can do:

 

That’s it and it’s that easy to use Summernote with Laravel!. It’s mostly straightforward except for the image conversion part. I hope you found this article helpful and I would be happy to hear your thoughts and opinions in the comments below.

The source code of the project is available in my GitHub repository.

Also, I share tutorials like this all the time. Be sure to check Laravel or PHP section to find more interesting articles!.

47
Leave a Reply

avatar
24 Comment threads
23 Thread replies
13 Followers
 
Most reacted comment
Hottest comment thread
23 Comment authors
firdausHarhukam SinghsapneshnaikMuhammed Musthafaprathamesh Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Adriano Biolchi
Guest
Adriano Biolchi

Thank you very much, this helped me a lot, especially the part of updating, of the to do it also to create a new post.
Only remove:
  // assign the variable passed from controller to a variable JavaScript.
             var content = {!! json_encode ($ summernote-> content) !!};

And everything works very beautiful.
Hugs.
Thank you from ♥

kivas
Guest
kivas

thank you so much bro . i love you :3

Danushka Herath
Guest

Woow, Thanks for great tutorial.

Mark Hendriks
Guest
Mark Hendriks

You have no working example. You should import that. Beginners like me would like to see what we are making first. Especially with the image part.
Cheers

See_dev
Guest
See_dev

This worked beautifully. I created this a private function and used it on multiple fields

Inna Kairite
Guest
Inna Kairite

Thanks so much! I already had a controller for my posts and only needed to know how to save images that are added in the body (in summernote editor) to my public path. Your tutorial helped a lot!

Kumar Sourabh
Guest
Kumar Sourabh

The code breaks as it expects file as an input for every ‘img’ tag. There are two solutions, either don’t allow url as an input or after ‘foreach($images as $k => $img)’ give a condition as if(substr($img->getattribute(‘src’),0,4)!=’http’) { //code }

Inna Kairite
Guest
Inna Kairite

Having trouble with editing a post with images. What should be added in the Controller for editing a post that had images and I deleted one of them or added another?
Also if the post is deleted completely, the images are not deleted.

mindio
Guest
mindio

Yes, would appreciate if you add controller method for update. Now it breaks if you edit input by adding more images…

Riyaz
Guest

Thank You so much.

Now I can make my blog admin as WordPress. So it will be easy to format text. 👌👌

Wong Njowo
Guest

Exelent tutorial bro….
keep working

edna
Guest
edna

Hello, thanks for your tutorial.
I have a problem to show the data it’s showing with html cod and , don’t pic up the picture. what can i do?

Min
Guest
Min

Hi, thank you for sharing this brilliant code.

I’m trying to save uploaded image to the following folder public/asset/uploads. What should I do to make the src of the image pinpoint to the folder and display the uploaded image? Is this posibble?

Ashraf
Guest
Ashraf

How can i add video url and sent in email this video url? Please help me.

Ashraf
Guest
Ashraf

How can i sent video url in email after inert database using summernote?

Jessica Mathis
Guest

Ad sed quidem rerum veniam do ea voluptatem Maiores cupiditate facere voluptatem voluptas ut ad veritatis debitis molestiae

Waqas Ali
Guest
Waqas Ali

Hey Sapneshnaik i had a question, the images in summernote content , is this all data store directly to database so we can view later on and also the images store in db or we need to move them to server first ?

Stian
Guest
Stian

Thank you for this tutorial.

What should I do if I have special characters that are misinterpreted when I display the text in a blade? And how could I reference the image with laravel?
Thank you!

luis clarke
Guest

Generate error with update content… add try catch for new images foreach($images as $k => $img){ $data = $img->getattribute(‘src’); try{ list($type, $data) = explode(‘;’, $data); list(, $data) = explode(‘,’, $data); $data = base64_decode($data); $image_name= time().$k.’.png’; $path = public_path() .’/pages/’. $image_name; file_put_contents($path, $data); $img->removeattribute(‘src’); $img->setattribute(‘src’, “/pages/”.$image_name); }catch(\Exception $e) { } }

sina
Guest
sina

So thanks man.

sina
Guest
sina

Can you please a tutorial on how to upload files using these editor?

prathamesh
Guest
prathamesh

Thank you so much brother. You saved my life 🙂 Best of luck for future. <3

Muhammed Musthafa
Guest

anybody knows how to add image attributes ?

Harhukam Singh
Guest

i’m new in laravel please help me how to save summernote data as plain text public function store(Request $request) { request()->validate([ ‘title’ => ‘required’, ‘description’ => ‘required’, ]); // $title=$request->title; $description=$request->description; //description my sumernote text area name //$detail=$request->summernoteInput; $dom = new \domdocument(); $dom->loadHtml($description, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); $images = $dom->getelementsbytagname(‘img’); foreach($images as $k => $img){ $data = $img->getattribute(‘src’); list($type, $data) = explode(‘;’, $data); list(, $data) = explode(‘,’, $data); $data = base64_decode($data); $image_name= time().$k.’.png’; $path = public_path() .’/’. $image_name; file_put_contents($path, $data); $img->removeattribute(‘src’); $img->setattribute(‘src’, $image_name); } $description = $dom->savehtml(); // $blog = new Blog; // $Blog->title = $title; // $Blog->description = $description; //… Read more »

firdaus
Guest

Hye , please im stuck on updating