Add CKEditor to Your PHP Page

Introduction:

We were familiar with Blogger and Wordpress Blog posting functions. All that functions are developed with a kind of editor. The job of that editor is to convert the content that a user was writing to the editor to HTML format. The HTML formatted content can quickly upload to the database. By using the editor, the user can quickly format the text content align, bold, italic, etc. Today through this article we are going to learn, how to implement this kind of editor in PHP pages and upload the HTML content in the editor to the Database.

What is CKEditor:

CKEditor (formerly FCKEditor) is an open source WYSIWYG text editor designed to bring common word processor features directly to a web page, Simplifying the content creation.

Demo Click here Download Click here

Step 1: Downloading Package:

CKEditor was providing three kinds of packages for downloading. In the Basic Package, you will get the Basic Function and the other two Packages providing advanced facilities. The following image will help you to select the best package for your website.
Download The Package
  • First of all, you need to choose the Editor Package that you want to implement on your site by clicking the checkbox that showed near at the Package Title like the image do.
  • Secondly, you need to click the checkbox that near at the "CKEditor CDN" Package Title. Then copy the "Javascript" That show right below it.

Step 2: HTML Form for Inputting Data:

Now you need to create an HTML Form to receive inputs from users. The HTML Form that you are going to make must contain a Text-area. We transform the Text-area to the CKEditor later. The next step is to add the CKEditor Hosted Javascript before the </head> Tag. Just like the example that given below.
<!DOCTYPE html>
<html>
<head>
  <script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
</head>
<body>
Now you need to name the "Text-area" that you want to transform to CKEditor. For that, you need to use 'name' and 'id' attributes.
Example: <textarea name="text" id="text"></textarea>

Also after it, you need to add an Identifier Javascript that to transform the Text-area to CKEditor. You can follow the example that given below.
<textarea name="text" id="text">This is a demo .</textarea>
<script>
 CKEDITOR.replace( 'text' );
</script>
You need to replace the 'text' with the name of your 'Text-area' otherwise it will not work correctly. After adding the Javascript, you can see the change happen in the page that you created for CKEditor. The Text-area that you created will change to CKEditor.

Step 3: Uploading Data from CKEditor to the Database:

Almost everyone thinks that it is very hard to upload the data from CKEditor to Mysql Database. It was not. It is very easy to Upload Data from CKEditor to the Database. All you want to do that make some condition in PHP and apply it them to the FORM page that you created. Just open your Mysql Database using PHPMYADMIN or the interface that you are using to manage Mysql Database and create a Database with name 'forum' and establish a Table with name 'ckeditor' with the below Mysql Query.
CREATE TABLE `ckeditor`(id int(10), file varchar(100));
Now you need take a look at the code with the full example that given right below this paragraph.
<!DOCTYPE html>
<html>
<head>
  <script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
</head>
<body>
  <?php
   $con = @mysql_connect("localhost","root","");
   $database = mysql_select_db("forum");
    if(isset($_POST['submit']))
 {
  $file = $_POST['text'];
  $query ="INSERT INTO `ckeditor`(`file`) VALUES ('$file')";
  $result = mysql_query($query,$con);
  if(!$result)
  {
   echo 'Record Not Saved';
  }
  else
  {
   echo 'Record Saved';
  }
 }
  ?>
  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
  <textarea name="text" id="text">This is a demo text.</textarea>
  <script>
  CKEDITOR.replace( 'text' );
  </script>
  <input type="submit" value="Save Changes" name="submit">
  </form>
  <?php
  $query2 = "SELECT * from ckeditor";
  $show = mysql_query($query2,$con);
  while($row = mysql_fetch_array($show))
  {
  echo $row['file'];
  }
  ?>
</body>
</html>
When a user clicks on the "Submit" button. The user inputs inside the "CKEditor" will upload to the "Mysql Database" using the query that given below.
$query ="INSERT INTO `ckeditor`(`file`) VALUES ('$file')";
Here the "$file" was indicating the input values that entered by the user to the "CKEditor". If the data successfully uploaded to the "Database" then you will get a message "Record Saved" otherwise you will get an another message "Record Not Saved".

Suggested Article for Programmers:

I hope this article helped you very much. If you have any doubts or suggestions related to this article. Please let me know by using the comment box that given below this article.

3 comments:

  1. Replies
    1. It is easy.. If you have any problem in implementation just tell me. I will help you

      Delete
    2. I just added a Demo and Download link as per your doubt just check it out and implement your self my friend...

      Delete

Wapmaster or Webmaster can Comment Us with the following Comment Box . Don't add Links to your site for Spamming our Blog .. Once you add Comment with Link . It will be deleted immediatly by our Admins .

 
Top