- Download zipped version of ckeditor from its official website (It is recommended to use full package version) and extract it.
- Start Apache and MySQL using XAMPP and create a folder (say “ckeditorEx”) in htdocs.
- Put the extracted folder ckeditor inside “ckeditorEx” and create a new file (say index.php) inside ckeditorEx.
- Put the following code in index.php and this gives a fully functional ckeditor to work with in browser.
<!DOCTYPE html>
<html>
<head>
<title>Test of ckeditor</title>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea class="ckeditor" name="editor"></textarea>
</body>
</html>
- Now it can create any text content using ckeditor but there is need to save it. To do so, create a database say “ckeditor”. Inside the DB, create a table (say “content” having attributes “id” as primary key with auto increment and “content” as a varchar of 50000 characters).
- Next create a form and save the info to “content” table.
<!DOCTYPE html>
<html>
<head>
<title>Test of ckeditor</title>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form method="post" action="">
<textarea class="ckeditor" name="editor"></textarea>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
<?php
if (isset($_POST['submit'])) {
$text = $_POST['editor'];
//connect to DB
$con = mysqli_connect("localhost","root","","ckeditor") or die("Error");
//insert into DB
$query = mysqli_query($con, "insert into content (content) values ('$text')");
if ($query) { echo "Insertion complete"; }
else { echo "Error while inserting"; }
}
?>
- The saved content can be displayed using the following “retrieve.php” file.
<!DOCTYPE html>
<html>
<head>
<title>Retrieval Test</title>
</head>
<style type="text/css">
td{
border: 1px solid;
}
</style>
<body>
<table style="border: 2px solid;">
<tr>
<td>ID</td>
<td>Content</td>
</tr>
<?php
$con = mysqli_connect("localhost","root","","ckeditor") or die("Error");
$query = mysqli_query($con,"select * from content");
while ($row = mysqli_fetch_array($query)) {
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['content']; ?></td>
</tr>
<?php
}
?>
</table>
</body>
</html>
- To work with image uploads, it needs “kcfinder”. So download the latest zipped stable version of it and unzip it inside “ckeditorEx”. Next configure “ckeditor” and for that, update it’s “config.js” file with the following info:
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'http://localhost/ckeditorEx/kcfinder/browse.php?opener=ckeditor&type=files';
config.filebrowserImageBrowseUrl = 'http://localhost/ckeditorEx/kcfinder/browse.php?opener=ckeditor&type=images';
config.filebrowserFlashBrowseUrl = 'http://localhost/ckeditorEx/kcfinder/browse.php?opener=ckeditor&type=flash';
config.filebrowserUploadUrl = 'http://localhost/ckeditorEx/kcfinder/upload.php?opener=ckeditor&type=files';
config.filebrowserImageUploadUrl = 'http://localhost/ckeditorEx/kcfinder/upload.php?opener=ckeditor&type=images';
config.filebrowserFlashUploadUrl = 'http://localhost/ckeditorEx/kcfinder/upload.php?opener=ckeditor&type=flash';
};
- Next configure “kcfinder” and for that, go to “kcfinder/conf/config.php” and make 'disabled' => false in “GENERAL SETTINGS”.
- Now, it's all set. Upload any number of images and put text in any format, save it and retrieve it.
No comments:
Post a Comment