A basic Javascript package called Summernote Editor can be used to create online WYSIWYG web editors. Any web application can use the Summernote editor by downloading it or using CDN links from a third party. Additionally, you can upload photos to a server via Summernote.
In this article, we'll discuss how to include the Summernote editor into a Laravel 8 application for creating blog material. We'll also talk about submitting photos for use as in-article graphics. We'll start the tutorial from scratch and work our way up. To construct a Summernote editor example in a Laravel 8 application, follow the instructions below.
Table of Content
- Step 1: Generate new Laravel application
- Step 2: Configure mysql database in .env file
- Step 3: Create migration
- Step 4: Create Article model class
- Step 5: Create controller class
- Step 6: Create new routes
- Step 7: Create blade views
Step 1: Generate new Laravel application
Using the composer command, we will first create a brand-new Laravel application. To build a new Laravel application, launch the Terminal or Command Prompt and enter the command below.
composer create-project --prefer-dist laravel/laravel articleand switch the Laravel application directory in the Terminal.
cd articleStep 2: Configure mysql database in .env file
Open the Laravel application you just created in your preferred text editor. Open the environment.env file in the root directory and modify the database credentials to match your MySQL.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=article
DB_USERNAME=root
DB_PASSWORD=secretStep 3: Create migration
We will generate a migration file for the articles table in the third step. Run the artisan command listed below from the Terminal to create a migration.
php artisan make:migration create_articles_tableThe database/migrations directory will now contain a migration file. To the up() method, open the migration file and add the two additional fields. The table fields are as follows.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateArticlesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('articles', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('articles');
}
}To create a table in the database, run the migrate command now.
php artisan migrateStep 4: Create Article model class
Additionally, a model class is required in order to conduct an eloquent query. All database queries are run through the Model class by a controller class. Run the command listed below in Terminal to create a new model.
php artisan make:model ArticleOpen the $fillable attribute in the model class in the app/Models/Article.php file. This attribute informs the application of the fields that can be assigned in bulk,
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
use HasFactory;
/**
* The attributes that are mass assignable.
*
* @var string[]
*/
protected $fillable = [
'title',
'description',
];
}Step 5: Create controller class
Application logic is implemented by the controller class, which utilises the model to query the database and sends the browser the results. Use the following artisan command to create a controller:
php artisan make:controller ArticleControllerWe will implement an article list, create articles, and display articles in this application.
Add the following code to the controller class located at app/Http/Controllers/ArticleController.php.
<?php
namespace App\Http\Controllers;
use File;
use App\Models\Article;
use Illuminate\Http\Request;
class ArticleController extends Controller
{
/**
* The article list view.
*
* @return Illuminate\Http\View
*/
public function index()
{
$articles = Article::get();
return view('articles.index', compact('articles'));
}
/**
* The article view.
*
* @return Illuminate\Http\View
*/
public function show($id)
{
$article = Article::where('id', $id)
->first();
return view('articles.show', compact('article'));
}
/**
* The article create view.
*
* @return Illuminate\Http\View
*/
public function create()
{
return view('articles.create');
}
/**
* The article create view.
*
* @return Illuminate\Http\View
*/
public function store(Request $request)
{
$validated = $request->validate([
'title' => 'required',
'description' => 'required'
]);
$dom = new \DomDocument();
$dom->loadHtml($validated['description'], LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$image_file = $dom->getElementsByTagName('img');
if (!File::exists(public_path('uploads'))) {
File::makeDirectory(public_path('uploads'));
}
foreach($image_file as $key => $image) {
$data = $image->getAttribute('src');
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$img_data = base64_decode($data);
$image_name = "/uploads/" . time().$key.'.png';
$path = public_path() . $image_name;
file_put_contents($path, $img_data);
$image->removeAttribute('src');
$image->setAttribute('src', $image_name);
}
$validated['description'] = $dom->saveHTML();
Article::create($validated);
return redirect()
->route('article.index')
->with('success', 'Article created successfully.');
}
}Methods explained:
- List of articles is displayed via the index() method.
- One article will be displayed via the show() method.
- The create() method displays the article creation form.
- The store() method will save the article and the image.
Step 6: Create new routes
We have so far introduced new methods and a new controller. We will establish routes for controller methods in this stage.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ArticleController;
Route::get('article/index', [ArticleController::class, 'index'])->name('article.index');
Route::get('article/show/{id}', [ArticleController::class, 'show'])->name('article.show');
Route::get('article/create', [ArticleController::class, 'create'])->name('article.create');
Route::post('article/store', [ArticleController::class, 'store'])->name('article.store');Step 7: Create blade views
We will develop blade views for the articles list, the create form, and the display in the last stage of coding. The resources/views directory houses Laravel views. Make a folder called "articles" in it, then add the files listed below for the views.
resources/views/articles/
-index.blade.php
-show.blade.php
-create.blade.phpindex.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articles</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">ALL Articles</h1>
<div class="mb-3">
<a class="btn btn-primary" href="{{ route('article.create') }}">New Article</a>
</div>
<div class="col-12">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($articles as $article)
<tr>
<th scope="row">{{ $article->id }}</th>
<td>{{ $article->title }}</td>
<td>{{ substr($article->description, 0, 10) }}</td>
<td>
<a href="{{ route('article.show', $article->id) }}" class="btn btn-secondary">View</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>show.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ $article->title }}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">{{ $article->title }}</h1>
<div class="col-12">{!! $article->description !!}</div>
</div>
<div class="mt-3">
<a class="btn btn-primary" href="{{ route('article.index') }}">Back</a>
</div>
</div>
</body>
</html>create.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create Article</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">Create Article</h1>
<div class="col-12">
<form method="post" action="{{ route('article.store') }}">
@csrf
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" name="title">
@error('title')
<div class="mt-1 alert alert-danger">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" id="description" name="description"></textarea>
@error('description')
<div class="mt-1 alert alert-danger">{{ $message }}</div>
@enderror
</div>
<div>
<input type="submit" class="btn btn-primary">
<a class="btn btn-danger" href="{{ route('article.index') }}">Back</a>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#description').summernote({
height: 500,
});
});
</script>
</body>
</html>All of the programming has now been completed. We will now test the application. Launch Laravel first by using the artisan command listed below.
php artisan serveAnd then go to http://localhost:8000/article/index in your browser. Create a new article, insert an image, and then save it.
Conclusion
We have so far learned how to incorporate the Summernote editor and save the photos used within articles into a Laravel application.
We appreciate you reading the article. I hope you enjoyed reading this.
