03-Apr-2023
.
Admin
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.
I hope it can help you...
#PHP 8
#PHP
