PHP CKEditor Integration Tutorial


Share:
Published By: Admin, Published On: May 03, 2021, Category: PHP

Hi Dev,

In this blog, I will learn you what is CKEditor and How to use CKEditor in PHP how to install CKEditor and How to use it.

What is CKEditor

It is a Modern JavaScript rich text editor. they provides the impeccable 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 withal designed to handle tree structure complex data model. It withal sanctions collaboration for genuine time involute structures.

CKEditor is modular, extensible and customizable component

A designable content not possible through HTML form field.

That’s why JS engender editor which avails user to write designable content in website.

Let's 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 utilizer can write blog simply with picture colorful content, admin can add product description with table design, product designation.

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

How to Install CKEditor in PHP?

CKEditor is very useful content editors. It is open source free editor.

You can download CKEditor 5 from this link.

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

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.
    <div id="editor"></div>

above div with id editor will replaced by CKEditor5

Step 2 : Load the build(from CDN or download and include)
    <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>
Step3: Call the ClassicEditor.create() method( for classic editor).
<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>
Example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <h2>Classic CKEditor5</h2>
    <div id="editor">
        <p>Hi, Welcome To MyWebtuts.com</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>
Output

CKEditor in PHP

Save CKEditor data in database

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

Create Database table
CREATE TABLE `ckeditor` 
  ( 
     `id` INT NOT NULL auto_increment, 
     `content` TEXT NOT NULL, 
     PRIMARY KEY (`id`) 
  ) 
engine = innodb; 

Write CKEditor and PHP dababase code in index.php

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 – Classic editor</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>
    </head>
    <body class="bg-dark">
        <?php
        $msg = "";
        if (isset($_POST['content'])) {
            $editor_data = $_POST['content'];
 
            // Create connection
            $conn = new mysqli("localhost", "root", "root", "test");
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            }
 
            $sql = "INSERT INTO ckeditor (content) VALUES ('$editor_data')";
 
            if ($conn->query($sql) === TRUE) {
                $msg = "New record created successfully";
            } else {
                $msg = "Error: " . $sql . "<br>" . $conn->error;
            }
 
            $conn->close();
        }
        ?>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-warning">
                       <h2 class="my-3">CKEditor 5 Example with PHP - MyWebtuts.com</h2>
                    </div>
                    <div class="card-body">
                        <form action="" method="post">
                            <textarea name="content" id="editor">
                            <blockquote> <h2>Hi, Welcome To MyWebtuts.com</h2></blockquote>
                            <p>Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX ❤️ for creating semantic content.</p>
                            <ul>
                                <li>Written in ES6 with MVC architecture, custom data model, virtual DOM.</li>
                                <li>Responsive images and media embeds (videos, tweets).</li>
                                <li>Custom output format: HTML and Markdown support.</li>
                                <li>Boost productivity with auto-formatting and collaboration.</li>
                                <li>Extensible and customizable by design.</li>
                            </ul>
                            <blockquote><h2>Rich text editor of tomorrow, available today. </h2></blockquote>
                            <a href="">Learn More</a>
                            </textarea>
                            <p><button class="btn btn-success mt-2" type="submit">Submit</button></p>
                        </form>
                        <div class="mt-2"> <?php echo $msg ?> </div>
                        <script>
                            ClassicEditor
                                    .create(document.querySelector('#editor'))
                                    .catch(error => {
                                        console.error(error);
                                    });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Output

I Hope It will help you..

Share: