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>
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
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");
?>
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>
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>
 |
Live Demo |
|
|||
Comments ( 0 )
Subscribe Latest Information
Categories
Most Popular Posts
How to Withdraw Money from ATM Machine 7steps 1037058 Views
How to Create Chat Application in Android Studio 137937 Views
Top 10 Best Android Games Under 100MB 84537 Views
You May Like Also
Search Box with Result using jQuery Ajax PHP 9263 Views
SEO Friendly URLs using PHP with HTACCESS 6410 Views
How to Create a Captcha Code using PHP 6399 Views