How to use CKEditor in PHP Installation and Uses

Here we will discuss what is CKEditor and How to use CKEditor in PHP how to install CKEditor and How to use it.

PHP CKEditor

What is CKEditor?

It is a Modern JavaScript rich text editor. It provides the perfect WYSIWYI UI for creating semantic content.

CKEditor5 is written in ES6 with MVC Architecture.

CKEditor provides rich text editor with auto formatting, Paste from word, Embed media and Responsive images.

It is also designed to handle tree structure complex data model. It also allows collaboration for real time complex structures.

CKEditor is modular, extensible and customizable component

A designable content not possible through HTML form field.

That’s why JS create editor which helps user to write designable content in website.

Lest see how to use ckeditor in php

Like Gmail use Closure Library JS editor, WordPress support TinyMCE WYSIWYG editor same as PHP support CKEditor, WYMeditor, FCKeditor.

Using this editor user can write blog easily with picture colorful content, admin can add product description with table design, product specification.

Admin can write their website content easily by this editor like About Us page content, Privacy Policy, Contact Us, Terms & Condition, etc.

How to Install CKEditor in PHP?

CKEditor is one of the best useful content editors. It is open source free editor.

You can download CKEditor 5 from this link.

ckeditor build

First you have to choose your build either Classic, Ballon, Ballon Block, Inline or Document

Based on build it will provide download link.

Below CKEditor download link is available for classic build.

Download CKEditor

CKEditor5 provides diffent ways to use it you can use command line npm install, can download Zip package or can use CDN.

For Demo purpose we use CKEditor CDN

For CKEditor 5 CDN is

How to use CKEditor5 in HTML

follows these three steps to include CKEditor5 in HTML

Step1:Inside your page add element that will replaced by CKEditor.

above div with id editor will replaced by CKEditor5

Step 2: Load the build(from CDN or download and include)

Step3: Call the ClassicEditor.create() method( for classic editor).

Complete CKEditor Demo Example is below




    
    CKEditor 5 – Classic editor
    


    
Classic CKEditor5

    

        
Classic CKEditor Working Fine
Try it
Classic CKEditor

Similar way you can create Inline, Ballon, Ballon Block and Document Editor.

All CKEditor Demo and JavaScript configuration can be find here

CKEditor in PHP

Save CKEditor data in database

Here we want to create CKEditor in PHP file and save data in database.

  1. Create Database table

Output

 
CREATE TABLE content_editor1 
  ( 
     id      INT NOT NULL auto_increment, 
     content TEXT NOT NULL, 
     PRIMARY KEY (id) 
  ) 
engine = innodb;

2. Write CKEditor and PHP dababase code in index.php

Here CKEditor with form is used to send data to php file.



    
        
        CKEditor 5 – Classic editor
        
    
    
        connect_error) {
                die("Connection failed: " . $conn->connect_error);
            }
            $sql = "INSERT INTO content_editor (content) VALUES ('$editor_data')";
            if ($conn->query($sql) === TRUE) {
                echo "New record created successfully";
            } else {
                echo "Error: " . $sql . "
" . $conn->error;
            }
            $conn->close();
        }
        ?>
        
CKEditor 5 Example with PHP

Run above program and click save button.

After submitting data in will show message New record created successfully.

PHP CKEditor Example

Here You can see record successfully saved in database.

Read CKEditor data from Database

display.php



    
        
        CKEditor 5 – Showing content
    
    
        connect_errno) {
            echo "Failed to connect to MySQL: " . $mysqli->connect_error;
            exit();
        }
        $sql = "SELECT content FROM content_editor where id = 1";
        echo "
Displaying content from database
";
        if ($result = $mysqli->query($sql)) {
            while ($row = $result->fetch_row()) {
                printf($row[0]);
            }
        }
        $mysqli->close();
        ?>
Display CKEditor content from database

How to submit CKEditor value by Ajax call

Here Html file contains jquery ajax call to submit CKEditor data to server.

ckeditor example in php as below



    
        
        CKEditor 5 – Classic editor
        
        
    
    
        
CKEditor 5 Example with PHP

        

        

            
Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX ❤️ for creating semantic content.

            
    
                
  • Written in ES6 with MVC architecture, custom data model, virtual DOM.
    • 
                
  • Responsive images and media embeds (videos, tweets).
    • 
                
  • Custom output format: HTML and Markdown support.
    • 
                
  • Boost productivity with auto-formatting and collaboration.
    • 
                
  • Extensible and customizable by design.
    • 
            

            
Rich text editor of tomorrow, available today. 

            Learn More

Below php file get data from html file and save to database.

connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    $sql = "INSERT INTO content_editor (content) VALUES ('$editor_data')";
    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "
" . $conn->error;
    }
    $conn->close();
}
?>