10

PHP Add WYSIWYG Html Editor To Textarea With Ckeditor Example

 3 years ago
source link: https://rvsolutionstuff.com/blog/php-add-wysiwyg-html-editor-to-textarea-with-ckeditor-example
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

PHP Add WYSIWYG Html Editor To Textarea With Ckeditor Example

Jul 17, 2021 By Admin Category: PHP 8   Php  

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

I hope it can help you...


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK