PHP Add WYSIWYG Html Editor To Textarea With Ckeditor Example

PHP 8 , PHP

Nicesnippets

3482

26-06-2021


PHP Add WYSIWYG Html Editor To Textarea With Ckeditor Example

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...


Recommended Posts