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
Laravel 9 Create Middleware For XSS Protection
Laravel 9 Create Middleware Fo...

In this article, we will see laravel 9 create middleware for XSS protection. Cross-site scripting is a type of...

Read More

Apr-30-2022

Laravel 9 Vue JS CRUD Operation Example
Laravel 9 Vue JS CRUD Operatio...

In this article, we will see the laravel 9 vue js crud operation example. Here, we will learn how to create a vue 3...

Read More

Dec-07-2022

How to Convert DateTime to Timestamp in PHP
How to Convert DateTime to Tim...

In PHP, converting DateTime objects to timestamps is a common task, especially when dealing with databases or manipulati...

Read More

Mar-13-2024

Laravel 8 Create Custom Helper Function Example
Laravel 8 Create Custom Helper...

In this article, we will see laravel 8 create a custom helper function example. As we all know laravel provides man...

Read More

Oct-12-2020