Site Admin
Site Admin Founder of MeaningArticles
652 Views

PHP Add WYSIWYG Html Editor To Textarea With Ckeditor

Hello Dev.

Today i will explained how to Add WYSIWYG HTML Editor To Textarea With CKEditor in php. This example is so easy to use in php. This example to i am add to the CKEditor in your form textarea input and add value to the database in php.

This exampel to i am use three php files and use to the ckeditor cdn. So let's start to the example.


dbconfig.php

<?php
    $dbHost     = "localhost";
    $dbUsername = "root";
    $dbPassword = "root";
    $dbName     = "login";
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    
    if ($db->connect_error) {
        die("Connection failed: " . $db->connect_error);
    }


index.php

<?php 
    include 'submit.php';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP Add WYSIWYG Html Editor To Textarea With Ckeditor Example</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="//cdn.ckeditor.com/4.16.1/standard/ckeditor.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <h2 class="card-header">PHP Add WYSIWYG Html Editor To Textarea With Ckeditor Example</h2>
                    <?php if(!empty($statusMsg)){ ?>
                        <p class="mt-2 text-center <?php echo $status; ?>"><?php echo $statusMsg; ?></p>
                    <?php } ?>
                    <div class="card-body">
                        <form action="" method="post">
                            <label>Enter Text:</label>
                            <textarea class="form-control" name="editor" id="editor" rows="10" cols="80"></textarea> 
                            <button type="submit" name="submit" value="Upload" class="btn btn-block mt-1"> Submit</button>
                        </form>
                        <?php if(!empty($editorContent)){ ?>
                            <div class="result mt-3">
                                <h4>Inserted Content</h4>
                                <?php echo $editorContent ?>
                            </div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        CKEDITOR.replace('editor');
    </script>
</body>


submit.php

<?php 
    require_once 'dbConfig.php';
    $editorContent = $statusMsg = '';
    if(isset($_POST['submit'])){
        $editorContent = $_POST['editor'];
        
        if(!empty($editorContent)){
            $insert = $db->query("INSERT INTO editor (content, created) VALUES ('".$editorContent."', NOW())");
            
            if($insert){
                $statusMsg = "The editor content has been inserted successfully.";
            }else{
                $statusMsg = "Some problem occurred, please try again.";
            } 
        }else{
            $statusMsg = 'Please add content in the editor.';
        }
    }
?>

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.