Like Us on Facebook

How to Integrate CKEditor in Web Page using PHP

I have received a request from my reader is that How to Integrate CKEditor in Web Page using PHP. So I am going to share this tutorial with you. CKEditor is a text editor which is used in the HTML web pages. Many powerful features are available in this editor, just like Microsoft office or any desktop editor. This editor mainly used for preparing any content or write any post. And this tutorial is also about making a post. You can arrange your content like Microsoft office, and submit it. Then you can see your full featured content on web page like blog post.
 




The script contains four folders called browser, ckeditor, uploader and images with four PHP files.
 

index.php // Main index file for show data

subBlog.php // Submit your post

conn.php // connection file file

viewPost.php // view file for your post


browser  // Browse image from CKEditor

ckeditor // CKEditor files

 images // Image 

uploader // Upload image from CKEditor
 

 

index.php

In index.php file you can see main form. You have to submit this form for your post. And also connection with CKEditor file.
 
<?php
    include "ckeditor/ckeditor/ckeditor.php";  
// Connection with editor files
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>
Integrate CKEditor in Web Page using PHP - UandBlog</title>
  </head>

<body style="background:#E9E9E9;">


<h2 style="margin-left:220px;">Integrate CKEditor in Html Page using PHP - UandBlog</h2>

<form role="form" action="subBlog.php" method="post">

  <table width="100%" border="0" cellspacing="5" cellpadding="5">
    <tr>
       <td width="16%">
Title</td>
       <td width="84%">
<input name="title" type="text" style="width:300px; padding:2px;" /></td>
    </tr>

    <tr>
       <td>
Your Content:</td>
       <td>

            <?php
  
                      
 $CKeditor = new CKeditor();
                        $CKeditor->BasePath = 'ckeditor/';
                      
 $CKeditor->config['filebrowserBrowseUrl'] = 'ckfinder/ckfinder.html';
                        
$CKeditor->config['filebrowserImageBrowseUrl'] = 'browser/browser.php?type=Images';
                        
$CKeditor->config['filebrowserFlashBrowseUrl'] = 'ckfinder/ckfinder.html?type=Flash';
                        
$CKeditor->config['filebrowserUploadUrl'] = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
                        
$CKeditor->config['filebrowserImageUploadUrl'] = 'uploader/uploader.php?type=Images';
                        
$CKeditor->config['filebrowserFlashUploadUrl'] = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
                      
 $CKeditor->editor('content','');   
                                                
                                                
                    ?>

         </td>
   </tr>

   <tr>

          <td colspan="2" style="text-align:center;"><input name="sub" type="submit" value="Submit" /></td>
   </tr>

</table>

     </form>

   </body>
</html>
 
 

subBlog.php

Submit your post to the database.
<?php

include('conn.php');

$title = $_REQUEST['title'];
$content = $_REQUEST['content'];
mysql_query("INSERT INTO `blog` (`title`, `content`) VALUES ('$title', '$content')");
$id=mysql_insert_id();

?>

<script>window.location = 'viewPost.php?id=<?php echo $id; ?>'</script>  
// Redirect to your view page
 

conn.php

This is connection page.
<?php

error_reporting(E_ALL && ~E_NOTICE);
mysql_connect(
"localhost","root","");
mysql_select_db(
"ckeditor");

?>
 
 

viewPost.php

View your post.
<?php

include('conn.php');
error_reporting(E_ALL && ~E_NOTICE);
$id = $_GET['id'];
$gv = mysql_query("select * from blog where id = '$id'");
$fetgv = mysql_fetch_assoc($gv);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Integrate CKEditor in Web Page using PHP - UandBlog</title>
</head>

<body style="background:#E9E9E9;">

  <div style=" width:900px; margin:0 auto;">

      <h2 style="color:#FF0000;"><?php echo $fetgv['title']; ?></h2>
      <span><?php echo $fetgv['content']; ?></span>
  </div>
  
  <div style="width:900px; margin:0 auto; margin-top:40px;">
       <a href="" style="font-size:24px;">Back to Tutorial</a>
  </div>

</body>
</html>


 

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.