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.
what if we add an image in long_desc box(CKEditor).?
how to save images in database through Ckeditor..?
Can you explain this little bit more? If the explanation is added with this code then it will helpful for me.
good Editor for implemnetation…but one think i did’t undrstand.
if i insert a link,,Image..how to insert database…im useing MYSQLI data base