Integrate CKEditor to HTML page and save to MySQL with PHP

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.


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.js library 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 added width and height options 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. 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.

Related Posts