How to work with ckfinder and ckeditor incase of image upload
About CKEditor : CKEditor is a text editor to be used inside web pages.By CKEditor we can change font style,font color and other features found on desktop editing applications like Microsoft Word.By CKEditor we can also upload images but it is touhg if we only use CKEditor.Therefore we need to know about CKFinder.
About CKFinder : CKFinder is a powerful and easy to use Ajax file manager for web browsers. Its simple interface makes quick to learn for all kinds of users, from advanced professionals to Internet beginners.
How to implement CKEditor and CKFinder :
At first download CKEditor and Ckfinder consecutively from
http://ckeditor.com/download
http://ckfinder.com/download
Then place those folder in your project folder as your wish.
Second step : Then include ckeditor.js from CKEditor in the page whereyou want add the functionality of CKEditor . Like:
.
This ckeditor.js need the help of jquery library.That means you have to also include latest jquery library page.
Third step : Then You need to include following snippet of code
CKEDITOR.replace( ‘q_desc’,
{
filebrowserBrowseUrl : ‘http://localhost/quiz/ckfinder/ckfinder.html’,
filebrowserImageBrowseUrl : ‘http://localhost/quiz/ckfinder/ckfinder.html?Type=Images’,
filebrowserFlashBrowseUrl : ‘http://localhost/quiz/ckfinder/ckfinder.html?Type=Flash’,
filebrowserUploadUrl : ‘http://localhost/quiz/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files¤tFolder=%2F&NewFolderName=MyFolder’,
filebrowserImageUploadUrl : ‘http://localhost/quiz/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images¤tFolder=%2F&NewFolderName=MyFolder1′,
filebrowserFlashUploadUrl : ‘http://localhost/quiz/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash’
});
};
Here CKEDITOR.replace( ‘q_desc’ ) means,CKEditor replace the textarea field by field id name.
Fourth Step: Then open the page named config.php from CKFinder. Edit the function CheckAuthentication() ,which return will be true. Then you can change $baseUrl = ‘/ckfinder/userfiles/’; this line,where all the file will save.
Latest posts by Sahel Aktar
- SQL Query Optimization - September 21st, 2011
- How to create Google Charts - August 17th, 2011
- PHP Thumbnail Generator - June 15th, 2011
- SQL Training - April 25th, 2011
- PHP Tips - October 10th, 2010
This post has 2 comments
July 14th, 2011
Hi,
i tried to use your code but i can’t find the Upload button in the uoploadimage form.
When i click on the image button i’ve only the url field to fill…
How can i solve?
August 19th, 2011
@chris: have you copied all the code which i have explained above?
if you did so, then you will face some problems.you have to change the path as per your directory structure.Try it out now and then let me know the difference. By the way, thanks for the comment.