CKEditor is a WYSIWYG HTML editor.
It makes HTML textarea lot more user-friendly by providing various features like – adding images, writing HTML code, formatting text, etc.
This can also be added to HTML containers.
It does not depend on other libraries like – jQuery and can be used in 3 different modes – Article Editor, Document Editor, and Inline Editor.
Different options are available to customize the editor.
In this tutorial, I am adding Article and Inline mode CKEditor on the same page and save it to MySQL database on submit with PHP.
Contents
1. Table structure
Create contents table.
CREATE TABLE `contents` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `title` varchar(255) NOT NULL, `short_desc` text NOT NULL, `long_desc` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2. Configuration
Create a config.php for database connection.
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 & Include
- Download CKEditor from here.
- Extract the downloaded zip file in your project directory.
- Include
ckeditor.jslibrary either in<head>or end of<body>section.
<script src="ckeditor/ckeditor.js" ></script>
OR
- You can also use CDN.
<script src="//cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
4. HTML & PHP
HTML –
Create a <form >.
In the <form > add a textbox, two <textarea > elements, and a submit button. Initialize CKEditor on <textarea > using JavaScript.
PHP –
On <form > submit read POST values and prepare a query to INSERT a record in contents table.
Completed Code
<?php
include "config.php";
// Insert record
if(isset($_POST['submit'])){
$title = $_POST['title'];
$short_desc = $_POST['short_desc'];
$long_desc = $_POST['long_desc'];
if($title != ''){
mysqli_query($con, "INSERT INTO contents(title,short_desc,long_desc) VALUES('".$title."','".$short_desc."','".$long_desc."') ");
header('location: index.php');
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Integrate CKeditor to HTML page and save to MySQL with PHP</title>
<!-- CSS -->
<style type="text/css">
.cke_textarea_inline{
border: 1px solid black;
}
</style>
<!-- CKEditor -->
<script src="ckeditor/ckeditor.js" ></script>
</head>
<body>
<form method='post' action=''>
Title :
<input type="text" name="title" ><br>
Short Description:
<textarea id='short_desc' name='short_desc' style='border: 1px solid black;' > </textarea><br>
Long Description:
<textarea id='long_desc' name='long_desc' ></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
5. JavaScript
Initialize CKEditor on the <textarea> elements.
- In the first
<textarea >define inline type editor. The toolbar will display while typing.
Syntax –
CKEDITOR.inline([element-id]);
- In the second
<textarea >define CKEditor with default configuration. For example purpose, I have addedwidthandheightoptions which you can remove if you don’t want.
Syntax –
CKEDITOR.replace([element-id],{ options [optional] });
Completed Code
<script type="text/javascript">
// Initialize CKEditor
CKEDITOR.inline( 'short_desc' );
CKEDITOR.replace('long_desc',{
width: "500px",
height: "200px"
});
</script>
6. Demo
7. Conclusion
Just Include the CKEditor library on the page and initialize it on the HTML textarea or container using CKEDITOR.replace([element-id]).
You can also use class='ckeditor' to initialize it on an element. In this case, you don’t have to write JavaScript code.
