CKEditor 5 is a rich text editor. It has a wide range of features that are meant to make the user’s experience as pleasant as possible.
In this tutorial, I show how you can initialize CKEditor 5 with file upload on the element and save its data to the MySQL database with PHP.
Contents
- Table structure
- Database Configuration
- Download and Include
- HTML & PHP
- AJAX – CKEditor file upload
- JavaScript
- Output
- Conclusion
1. Table structure
I am using messages
table.
CREATE TABLE `messages` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `subject` varchar(80) NOT NULL, `message` TEXT NOT NULL );
2. Database Configuration
Create a config.php
for database configuration.
Completed Code
<?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }
3. Download and Include
- Download CKEditor 5 library from here or you can use CDN –
<!-- ckeditor5 JS --> <script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/classic/ckeditor.js"></script>
4. HTML & PHP
HTML
Create a <form method="post" action="" >
. In the <form >
add a textbox, textarea, and a submit button.
PHP
If <form >
is submitted then read the POST values and assign them to the variables. If values are not empty then insert a new record in messages
table.
Completed Code
<?php include "config.php"; // Insert record if(isset($_POST['submit'])){ $subject = $_POST['subject']; $message = $_POST['message']; if($subject != '' && $message != ''){ mysqli_query($con, "INSERT INTO messages(subject,message) VALUES('".$subject."','".$message."') "); header('location: index.php'); } } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Add and Save CKEditor 5 data to MySQL database with PHP</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" > <style type="text/css"> .ck-editor__editable { min-height: 250px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 mt-5" style="margin: 0 auto;"> <form method="post" action=""> <div class="form-group mb-4"> <label class="control-label col-sm-2" for="subject">Subject:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="subject" placeholder="Enter Subject" name="subject" value=""> </div> </div> <div class="form-group mb-4"> <label class="control-label col-sm-2" for="message">Message:</label> <div class="col-sm-10"> <textarea class="form-control editor" name="message"></textarea> </div> </div> <div class="form-group "> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" class="btn btn-info" name="submit" value="Submit"> </div> </div> </form> </div> </div> </div> </body> </html>
5. AJAX – CKEditor file upload
Create ckfileupload.php
file for uploading CKEditor file. Also, create uploads
folder.
Access the file using upload
name.
Check if the file has a valid extension or not. If valid then upload the file to the uploads
folder and store some data for return response to CKEditor in $data
Array. Pass $filename
to $data['fileName']
, 1
to $data['uploaded']
, and $location
to $data['url']
.
If file is not uploaded then pass 0
to $data['uploaded']
and an error message to $data['error']['message']
.
Return $data
Array in JSON format.
Completed Code
<?php $data = array(); if(isset($_FILES['upload']['name'])){ // file name $filename = $_FILES['upload']['name']; // Location $location = 'uploads/'.$filename; // file extension $file_extension = pathinfo($location, PATHINFO_EXTENSION); $file_extension = strtolower($file_extension); // Valid extensions $valid_ext = array("jpg","png","jpeg"); if(in_array($file_extension,$valid_ext)){ // Upload file if(move_uploaded_file($_FILES['upload']['tmp_name'],$location)){ $data['fileName'] = $filename; $data['uploaded'] = 1; $data['url'] = $location; } }else{ $data['uploaded'] = 0; $data['error']['message'] = 'File not uploaded.'; } }else{ $data['uploaded'] = 0; $data['error']['message'] = 'File not uploaded.'; } echo json_encode($data); die;
6. JavaScript
Initialize CKEditor on .editor
class. With ckfinder
set upload file URL. Specify URL in uploadURL
. I set it to ckfileupload.php
.
Completed Code
ClassicEditor .create( document.querySelector( '.editor' ),{ ckfinder: { uploadUrl: "ckfileupload.php", } } ) .then( editor => { console.log( editor ); } ) .catch( error => { console.error( error ); } );
7. Output
8. Conclusion
To display saved data in the database of CKEditor on the page you just need to directly assign it to the textarea element and initialize the CKEditor. Content will automatically format.
You can also view these tutorials –
- Save CKEditor 5 data to MySQL database in CodeIgniter 4
- Add CKEditor 5 and save it to MySQL database in Laravel