Howi.In

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Znac0rQLKPU/VlhMT6IA6hI/AAAAAAAAHGc/fWln78UWI4E/s1600/CKEditor%2BImplementation%2BTutorial%2Bfor%2BPHP-min.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Add CKEditor to Your PHP Page" border="0" src="https://1.bp.blogspot.com/-Znac0rQLKPU/VlhMT6IA6hI/AAAAAAAAHGc/fWln78UWI4E/s1600/CKEditor%2BImplementation%2BTutorial%2Bfor%2BPHP-min.png" title="Add CKEditor to Your PHP Page" /></a></div>
<h2>
Introduction:</h2>
<div>
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.</div>
<h4 style="text-align: left;">
What is CKEditor:</h4>
<div>
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.<br />
<br />
<a class="btn-slide" href="http://forum.howi.in/Downloads/ckeditor/Demo/" rel="nofollow" target="_blank"> <span class="circle"><i class="fa fa-laptop"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a class="btn-slide2" href="https://github.com/trainerplus1/ckeditor_live_demo" rel="nofollow" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a>
<br />
<h4 style="text-align: left;">
Step 1: Downloading Package:</h4>
<div>
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.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-NFntUrMzMhk/VlfxwUJrwoI/AAAAAAAAHGM/wAsJiSG6w_Q/s1600/Capture-min%2B%25286%2529.JPG" style="margin-left: 1em; margin-right: 1em;"><img alt="Download The Package" border="0" height="276" src="https://2.bp.blogspot.com/-NFntUrMzMhk/VlfxwUJrwoI/AAAAAAAAHGM/wAsJiSG6w_Q/s640/Capture-min%2B%25286%2529.JPG" title="Download The Package" width="640" /></a></div>
<div>
<ul style="text-align: left;">
<li>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.</li>
<li>Secondly, you need to click the checkbox that near at the "<b>CKEditor CDN</b>" Package Title. Then copy the "<b>Javascript</b>" That show right below it.</li>
</ul>
<div>
<h4 style="text-align: left;">
Step 2: HTML Form for Inputting Data:</h4>
</div>
<div>
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 <b></head></b> Tag. Just like the example that given below.<br />
<pre class="brush: js;"><!DOCTYPE html>
<html>
<head>
  <script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
</head>
<body></pre>
Now you need to name the "<b>Text-area</b>" that you want to transform to CKEditor. For that, you need to use '<b>name</b>' and '<b>id</b>' attributes.<br />
<b>Example:</b> <textarea name="text" id="text"></textarea><br />
<br />
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.<br />
<pre class="brush: js;"><textarea name="text" id="text">This is a demo .</textarea>
<script>
 CKEDITOR.replace( 'text' );
</script></pre>
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.<br />
<h4 style="text-align: left;">
Step 3: Uploading Data from CKEditor to the Database:</h4>
<div>
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 <b>FORM</b> page that you created. Just open your Mysql Database using <b>PHPMYADMIN</b> or the interface that you are using to manage Mysql Database and create a <b>Database</b> with <b>name 'forum'</b> and establish a <b>Table</b> with <b>name 'ckeditor'</b> with the below Mysql Query.</div>
<div>
<pre class="brush: js;">CREATE TABLE `ckeditor`(id int(10), file varchar(100));</pre>
Now you need take a look at the code with the full example that given right below this paragraph.<br />
<pre class="brush: js;"><!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></pre>
When a user clicks on the "<b>Submit</b>" button. The user inputs inside the "<b>CKEditor</b>" will upload to the "<b>Mysql Database</b>" using the query that given below.<br />
<pre class="brush: js;">$query ="INSERT INTO `ckeditor`(`file`) VALUES ('$file')";</pre>
Here the "<b>$file</b>" was indicating the input values that entered by the user to the "<b>CKEditor</b>". If the data successfully uploaded to the "<b>Database</b>" then you will get a message "<b>Record Saved</b>" otherwise you will get an another message "<b>Record Not Saved</b>".<br />
<iframe allowfullscreen="" frameborder="0" height="350" src="https://www.youtube.com/embed/Am1dN0I_k1s" width="820"></iframe>
<h4 style="text-align: left;">
Suggested Article for Programmers:</h4>
</div>
</div>
</div>
<div>
<ul style="text-align: left;">
<li><a href="http://www.howi.in/2015/10/xampp-installation-uac-warning-message-issue-solved.html" target="_blank">Xampp Installation UAC Problem was Solved.</a></li>
<li><a href="http://www.howi.in/2015/10/execute-mysql-query-in-php.html" target="_blank">How to Execute Mysql Database Query in PHP.</a></li>
<li><a href="http://www.howi.in/2015/10/how-to-implement-new-google-recaptcha-in-php.html" target="_blank">How to Implement New reCpatcha Captcha in PHP Page.</a></li>
<li><a href="http://www.howi.in/2015/09/select-best-programming-language-for-a-project.html" target="_blank">How to Select the Best Programming Language for a Project.</a></li>
</ul>
<div>
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.</div>
</div>
</div>
</div>

How to Add CKEditor in PHP Page Step By Step Tutorial

Introduction: We were familiar with Blogger and Wordpress Blog posting functions. All that functions are developed with a kind of edit...

+ Read more »