How to Integrate CKEditor in Web Page using PHP

I have received a request from my reader is that. 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.