Skip to content

All topics  /  PHP

PHP Add WYSIWYG Html Editor To Textarea With Ckeditor Example

PHP ·

Teams applying “PHP Add WYSIWYG Html Editor To Textarea With Ckeditor Example” in a production project can use visit this page to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.

Hi guys,

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>
</html>

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.';
        }
    }
?>

Now you can check your own.

More on this topic