Install Summernote With Laravel Tutorial

Udemy.com Home page wide-banner

WYSIWYG

What You See Is What You Get (WYSIWYG), is mostly used by the developers for describing a software program which they use for checking visibility of the final product. A user friendly interface is required to run WYSIWYG program. While to write descriptive codes, a developer could use WYSIWYG editor which helps them to see the content that will appear as the end result.

Purpose of Wysiwyg

Using WYSIWYG editor, developers get an opportunity to check out the outcome of desired document or code after processing. As how it will look like in real time and whether it could fulfill their output requirements or not. Therefore using it, developers can not only save a lot of time but could also make their job easier knowing the final result.

Which WYSIWYG Editor in Laravel to Use?

Well users of Laravel have good news, it supports multiple WYSIWYG editors. Therefore, if you are a developer and like developing applications with this brilliant framework, you’re in luck. In this article, I will elaborate about the best WYSIWYG editors you can use working with Laravel. With a plethora of WYSIWYG editors available, it’s quite hard to decide which one best suits your needs. Well, you don’t have to worry a bit. I will provide a detailed account on some of the best Laravel WYSIWYG editors in this article. With these editors, you can easily develop your content and codes. I will also highlight the pros and cons of WYSIWYG editors.

Pros

  • Easy usability.
  • Quick website creation.
  • Doesn’t need prior programming knowledge.
  • Perfect learning tool for absolute beginners.

Cons

  • Increases file size by adding unwanted codes to source files.
  • Slows down loading of files having bigger size.
  • Misses out some main attribute tags, like image ALT
  • Crawling process of search engines becomes longer and hence the indexing of site.

 

As mentioned above, there are many WYSIWYG editors that Laravel supports, but there are some editors that have made a mark for themselves by following the industry standards. Laravel editor by Vinelab and Laravel ckeditor by UniSharp are two of the most commonly used custom WYSIWYG editors. Froala and Summernote are known as the two most powerful and user-friendly WYSIWYG editors for Laravel. It allows developers to keep track of their codes as how their final web results will look like in real time.

Summernote

One of the best WYSIWYG editors that Laravel supports is Summernote. It ticks all the boxes when it comes to features, text editing, server integration, and HTML formatting. You can also use Summernote to paste images on your web pages, editing blocks of texts – all in real time. It allows you to see the final web page results in real time and gives you better idea about the code outcome. It is a very popular Laravel WYSIWYG editor as it caters more than 6000 stars on Github.

I have personally used Summernote in one of my projects and found the editor very helpful and inventive. As its user friendly features helped me a lot make my project up and running within few minutes without any major bugs.  

Now after getting the complete knowledge of its advantages, it’s time for you to learn how to integrate and implement Summernote WYSIWYG with Laravel.

Prerequisites

For the purpose of this tutorial, I assume that you have a Laravel application installed on a web server. My setup is:

  • Laravel 5.5
  • PHP 7.x
  • MySQL

For optimized developer stack, I have installed my Laravel application on a Cloudways managed server. You can also sign up for free on Cloudways PHP MySQL Web Hosting easily and can setup your application within few minutes.

Configure the Database

Time to setup the MySQL database and configure it.

Firstly, edit the .env and config/database.php files located in the root directory of the Laravel project. Update required DB credentials (username, DB name, and password) in them to setup the database.

Create the Migrations

Now generate a migration for creating a task table by going to the root of the app through Terminal.

cd /path-to-project/project-name

php artisan make:migration create_summernoteeditor_table --create=summernoteeditor

Now replace the up() function in the migration file with the below code. The file is located in the database/migration folder.

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;



class CreateSummernotesTable extends Migration

{

     public function up()

   {

       Schema::create('summernotes', function (Blueprint $table) {

           $table->increments('id');

           $table->longText('content');

           $table->string(‘feature’);

           $table->timestamps();

       });

   }



   /**

    * Reverse the migrations.

    *

    * @return void

    */

   public function down()

   {

       Schema::dropIfExists('summernotes');

   }

}

Setup Model

Generate a model along with a resourceful controller and a migration file.

$php artisan make:model Summernote -rcm

<?php



namespace App;



use Illuminate\Database\Eloquent\Model;



class Summernote extends Model

{

   //

}

 

Now as the model is created successfully, next step is to migrate your table to the database by performing the following:

Setup Routes

To create routes for summernote editor view and other post method, add the below routes in web.php.

Route::get('/', function () {

   return view('welcome');

});



Route::get('summernoteeditor',array('as'=>'summernoteeditor.get','uses'=>'SummernotefileController@getSummernoteeditor'));



Route::post('summernoteeditor',array('as'=>'summernoteeditor.post','uses'=>'SummernotefileController@postSummernoteeditor'));



Auth::routes();



Route::get('/home', 'HomeController@index')->name('home');

 

Setup Summer Note

After completing above, download the CSS and JavaScript files from the summernote.org and setup these files in your Laravel project. Use the below assets function to add JavaScript and CSS files.

<a href="http://!!asset('/assets/css/summernote.min.css')!!">http://!!asset('/assets/css/summernote.min.css')!!</a>

<a href="http://!!asset('/assets/js/summernote.min.js')!!">http://!!asset('/assets/js/summernote.min.js')!!</a>

Confirm your given directory reference again and add the above code in masterblade.php.

Summernote CDN

To directly link these summernote JavaScript and CSS files, use CDN and also include jQuery file for calling jQuery functions.

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script&gt;

 

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

$(document).ready(function() {

           $('#technig').summernote({

             height:300,

           });

       });

 

As we know that Summernote is also compatible with the jQuery framework, make sure that you have added jQuery to your project. While to make your Summernote functions work the way you want, you can also add some desired properties in it.

editor example

Setup Controller

Now as your web routes are set up successfully, next go to your controller files and set the controller by pasting the below code:

app/Http/Controllers/FileController.php

 

<?php



namespace App\Http\Controllers;



use Illuminate\Http\Request;

use App\ Summernote;



class SummernotefileController extends Controller



{



   /**



    *



    * @return \Illuminate\Http\Response



    */



   public function getSummernoteeditor()



   {



       return view('summernoteeditor');



   }



   /**



  



    *



    * @return \Illuminate\Http\Response



    */



   public function postSummernoteeditor(Request $request)



   {

$this->validate($request, [



           'detail' => 'required',

'feature' => 'required',



       ]);



       $detail=$request->input('detail');

$feature=$request->input('feature');



       $dom = new \DomDocument();



       $dom->loadHtml($detail, 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= "/upload/" . time().$k.'.png';



           $path = public_path() . $image_name;



           file_put_contents($path, $data);



           $img->removeAttribute('src');



           $img->setAttribute('src', $image_name);



       }



       $detail = $dom->saveHTML();

       $summernote = new Summernote;

       $summernote->content = $detail;

$summernote->Feature=$feature;

       $summernote->save();



      

echo "<h1>Feature</h1>" , $feature;



echo "<h2>Details</h2>" , $detail;



   }



}

 

Setup View

Now the next step is to create the view code for display. For that, just paste the below code in the blade file.

 

<!DOCTYPE html>



<html>



<head>



<title>Laravel 5 - Summernote Wysiwyg Editor with Image Upload Example</title>



   <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>



   <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />



   <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>



   <!-- include summernote css/js-->



   <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">



   <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>



</head>



<body>



<form method="POST" action="{{ route('summernoteeditor.post') }}">



   {{ csrf_field() }}



<div class="col-xs-12 col-sm-12 col-md-12">



   <div class="col-xs-12 col-sm-12 col-md-12">

<center><h1>What would you see in Laravel 5.7 ? </h1>



<h4>Just share your idea.</h4>



</center>



      <div class="form-group">

 <label for="usr">Title of Feature:</label>

 <input type="text" class="form-control" name="feature">

</div>



       <div class="form-group">



           <strong>Details:</strong>



           <textarea class="form-control summernote" name="detail"></textarea>



       </div>



    </div>



    <div class="col-xs-12 col-sm-12 col-md-12 text-center">



       <button type="submit" class="btn btn-primary">Submit</button>



   </div>



</form>



</body>



<script type="text/javascript">



   $(document).ready(function() {



    $('.summernote').summernote({



          height: 500,



     });



  });



</script>

</html>

live demo screenshot submit

When you will click on the submit button, it will show the following output.

live demo output

Final Words

In the above article, I have demonstrated in detail how to install and integrate Summernote WYSIWYG editor in Laravel. The editor is quite easy to use and provides rich features for text editing. You could also integrate the plugin with other popular PHP frameworks as well. You can see the application in action here. I hope that this article will help you develop your projects with further integrity and overall time-saving. Still if you got any further questions regarding this article, feel free to share your thoughts in the comments section below.

 

This is a guest post by Pardeep –

Pardeep is a PHP Community Manager at Cloudways – A Managed PHP Hosting Platform. He loves to work on Open source platforms, frameworks and on new ideas. You can email him at pardeep.kumar@cloudways.com

Interesting Links

 

Install Summernote With Laravel Tutorial

You May Also Like

Leave a Reply

Your email address will not be published.