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.

Demo Download

Table structure
Configuration
Download & Include
HTML
JavaScript
Demo
Conclusion

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>

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

If you found this tutorial helpful then don't forget to share.

Contents

1. Table structure

2. Configuration

3. Download & Include

4. HTML & PHP

5. JavaScript

6. Demo

7. Conclusion