How To Add Ckeditor In Laravel

Websolutionstuff | Jun-18-2020 | Categories : Laravel PHP jQuery

In this article, I will explain you how to add ckeditor in laravel, CKEditor is a WYSIWYG rich text editor, in ckeditor we can writing content directly inside of web pages or online applications.

CKEditor provides 200 plus features like add images, create html tables, changes font size and style, add links, add snippet ,code and many more feature. it is opensource editor, and you can create your customize package and download from it's official website.

Step 1: Create a new project(if not exist) 
Step 2: Add cdn file
Step 3: Add HTML code
Step 4: Add the script of CKEditor

So, let's see add CKEditor to our application or how to use CKEditor in laravel.

<html>
    <head>
        <meta charset="utf-8">
        <title>How to add CKEditor in laravel - websolutionstuff.com</title>
        <script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-12">
                <h1 style="text-align: center;">How to add CKEditor in laravel - websolutionstuff.com</h1>
                <div class="col-md-12">        
                    <textarea name="editor1"></textarea>
                </div>
            </div>
        </div>        
        <script>
                CKEDITOR.replace( 'editor1',{
                    height:300,
                });
        </script>
    </body>
</html>

 

 

You need to add ckeditor's js file and a script and you will find output like the below screenprint.

 

ckeditor


You might also like:

Recommended Post
Featured Post
Target Class Does Not Exist In Laravel 8
Target Class Does Not Exist In...

In this article, we will see target class does not exist in laravel 8 and how to fix target class not found in...

Read More

Sep-23-2020

How To Create Custom Middleware In Laravel 9
How To Create Custom Middlewar...

In this article, we will see how to create custom middleware in laravel 9. Laravel middleware provides a conve...

Read More

Mar-27-2022

How To Drop Foreign Key In Laravel 10 Migration
How To Drop Foreign Key In Lar...

In this article, we will explore the process of removing foreign key constraints in Laravel 10 migrations. We will delve...

Read More

Apr-28-2023

How To Open Datepicker Popup In Angular 15 Material
How To Open Datepicker Popup I...

In this tutorial, I will guide you through the process of opening the datepicker popup in the Angular 15 Material framew...

Read More

Jul-10-2023