Although there isn’t a file browser built into CKEditor, they do have a tool you can download. Unfortunatly they charge for it. Boo.
There are a few alternatives on the web however, so I have selected the best, and integrated it with CkEditor in my cakePHP powerd CMS.
Download the file manager from the nice chaps at core five: http://labs.corefive.com/Projects/FileManager/
Install that in a subdirectory of ckeditor
Follow the instructions and set up your filemanager.config.js like this:
// Set this to the server side language you wish to use. var lang = 'php'; // options: lasso, php, py // Set this to the directory you wish to manage. var fileRoot = '/app/webroot/somedir/'; // Show image previews in grid views? var showThumbs = true;
Then, nip over to your filemanager.config.php file and set this up:
function auth() {
session_name("CAKEPHP");
session_start();
if( isset($_SESSION['Auth']['User']) )
{
return true;
}
return false;
}
Make sure you set your timezone and any other configs you need.
Now open up your CkEditor config.js and set up the editor to use the filemanager by default. Here is my config.js so there is no confusion:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
config.uiColor = 'green';
config.width = '500';
config.filebrowserBrowseUrl = '/ckeditor/filemanager/index.html';
config.filebrowserImageBrowseUrl = '/ckeditor/filemanager/index.html?type=Images';
config.filebrowserFlashBrowseUrl = '/ckeditor/filemanager/index.html?type=Flash';
config.filebrowserUploadUrl = '/ckeditor/filemanager/connectors/php/filemanager.php';
config.filebrowserImageUploadUrl = '/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Images';
config.filebrowserFlashUploadUrl = '/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Flash';
config.toolbar_Full =
[
['Bold', 'Table', 'Format' ,'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-', 'Image', 'Style', '-', 'Source']
];
};
Thats it, fire up your page with CkEditor, hit the image button, and there will be a browse server button. click that and up comes the manager. Hit the grid or table buttons to see all your images!
Credits
Obviously Core 5. Good job guys!
This chap helped me out with auth section:
hello there,
Thanks for your posting! but looks like i cannot get it right.
i follow this (http://www.asecondsystem.com/2009/09/14/integrating-ck-editor-with-cakephp/) and get ckeditor (v3.1) working.
I followed all the steps in your post, except filemanager.config.php – i left it untouched,function auth() alway returns true; but the browse server button never show up.
anything i am missing here?
my code:
file: app/views/nodes/admin_edit.ctp:
link(‘/ckeditor/ckeditor’, false);
echo $form->create(‘Node’);?>
CKEDITOR.replace(‘body’, {
filebrowserBrowseUrl : ‘/ckeditor/filemanager/index.html’,
filebrowserImageBrowseUrl : ‘/ckeditor/filemanager/index.html?type=Images’,
filebrowserFlashBrowseUrl: ‘/ckeditor/filemanager/index.html?type=Flash’,
filebrowserUploadUrl : ‘/ckeditor/filemanager/connectors/php/filemanager.php’,
filebrowserImageUploadUrl : ‘/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Images’,
filebrowserFlashUploadUrl : ‘/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Flash’
});
input(‘body’, array(‘class’=>’ckeditor’));
echo $form->input(‘status’);
?>
end(‘Submit’);?>
file: app/webroot/ckeditor/filemanager/scripts/filemanager.config.js
// Set this to the server side language you wish to use.
var lang = ‘php’; // options: lasso, php, py
// Set this to the directory you wish to manage.
var fileRoot = ‘/app/webroot/usr/’;
// Show image previews in grid views?
var showThumbs = true;
file: app/webroot/ckeditor/config.js
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = ‘fr’;
config.uiColor = ‘red’;
config.width = ’500′;
config.filebrowserBrowseUrl = ‘/ckeditor/filemanager/index.html’;
config.filebrowserImageBrowseUrl = ‘/ckeditor/filemanager/index.html?type=Images’;
config.filebrowserFlashBrowseUrl = ‘/ckeditor/filemanager/index.html?type=Flash’;
config.filebrowserUploadUrl = ‘/ckeditor/filemanager/connectors/php/filemanager.php’;
config.filebrowserImageUploadUrl = ‘/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Images’;
config.filebrowserFlashUploadUrl = ‘/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Flash’;
config.toolbar_Full =
[
['Bold', 'Table', 'Format' ,'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-', 'Image', 'Style', '-', 'Source']
];
};
hello,
this problem fixed, just add following lines before mod_rewrite module.
AddType application/x-javascript .js
AddType text/css .css
but still cannot upload file to the server.
Hi, Sounds like you are almost there.
Do you get an error message? Have you checked your file permissions on the target folder? Checked the paths are set right?
The reason this does not work for me is because you are using absolute paths in your example (like /app/webroot/somedir/ and /ckeditor/filemanager/).
I like my CakePHP apps to be flexible enough to run from (almost) anywhere…
Is there an elegant solution in getting this right?
Hi there
Thanks for the post
I’ve got most of it working, now my problem is that the files tree does not show when I try to upload an image.
Any help would be greatly appreciated.
When you click browse to select an image it dosn’t display a dialog to select the file to upload? Or it dosn’t show the files already uploaded?
What happens when you click the buttons on the right to show list view or icon view? do the files show then?
Thanks for the tutorial. I’ve almost got it to work, but now I have the same problem as Killawabbit: the file tree does not show.
When I press either the ‘switch to grid view’ or ‘switch to list view’ buttons the images do show up on the right panel, but not the folders. Uploading files does work.
Another thing i observed is that if I create a folder within the file manager it does appear on the file tree.
hmm. I think there is a missing bit of config in the jqueryFiletree.php
add $root = $_SERVER{‘DOCUMENT_ROOT’}; to the top so it knows where it is looking for the file tree
That made it work. Thank you!!
No problem
. Bare in mind it might not work if you are deploying to a subfolder; you might have to factor the subfolder into the path.
Hello,
I have another Problem. After added $root = $_SERVER{‘DOCUMENT_ROOT’}; I’m now able to see the Filetree on the left. But I cannot add Folders an wenn i click on an image in the tree, I online see the buttons SELECT DOWNLOAD RENAME DELETE. Pressing on them, nothing happens.
hmm. im not able to reproduce that. what happens when you add a folder? error messages? are you running firebug? look for a js error there. or any php errors in the log?
similarly with the buttons. any error messages in JS or PHP?
Wenn I add a folder, nothing happens. And I get no Errors.
Korbi, you should look to crack into that information blackout there and debug it a bit. firebug? incease php’s reporting settings? go through the code and get it to echo something out at the diffrerent stages of adding a folder. anything. try and isolate the problem a bit.
Also, have a think about what could be causeing a problem specific to your set up. ie, your permissions probably don’t allow folder creation. change that.
Good luck!
Hi, i got the FileBrowserworking fine but, when I add the QuickUpload buttons on CKeditor I never upload the file on server.
Any ideas?
Do not use $_SERVER{‘DOCUMENT_ROOT’};
It will not work, when you use virtual domains per “VirtualDocumentRoot“. Instead construct the root from the file path itself, which is available in php as __file___
I use something like that in scripts that use DOCUMENT_ROOT:
$_SERVER['DOCUMENT_ROOT'] = realpath(dirname(__file__) . “/../../../..”);
Topic from C5 forum:
http://forum.filemanager.corefive.com/topic/patch-for-filemanager-that-fixes-a-number-of-problems
and file U can find on:
http://github.com/simogeo/Filemanager/archives/master
For me works fine.
Here is Polish language:
http://www.lagunawebdesign.pl/polish/pl.js
Pozdrawiam
Hello!
When I select a photo from filemanager, the url is wrong.
shown: http://www.mydomain.es//miapp/upload/ckeditor/myphoto.png
instead of: http://www.mydomain.es/miapp/upload/ckeditor/myphoto.png
As you can see, there are two bars (//). to that is?
I have the following configuration:
filemanager.config.js file:
fileRoot var = ‘/ myapp / upload / ckeditor /’;
filemanager.config.php file:
$ config [ 'add_host'] = false;
Thank you very much for the responses!
excuse me,
filemanager.config.php the file:
$ config [ 'add_host'] = true;
Thanks again!
I cannot set up authorization.
I dumped $_SESSION in auth function into filemanager.config.php and is empty. I think it is empty because session vars are only available in current cakephp script if ‘register globals’ is off.
I’d like to not activate ‘register globals’ but I don’t know how to read session vars from filemanager.php.
Any idea?
I’m wrong with ‘register_globals’… but I’ve an empty $_SESSION array into filemanager.config.php… who had deleted my beatiful session vars???
Nice tute.
I have the same issue how can i get session inside filemanager.php. file?
Hi,
You can also try PGRFileManager http://pgrfilemanager.sourceforge.net.
It integrates with CKEditor easily.
Cheers, Grzesiek
Hi, I tried the above code, it shows the browse server button but nothing happens when i choose the file and click on upload. Any help will be much appreciated.
Thanks,
Hi, I configured File manager with CKEditor successfully but have a problem My problem is: While i delete any image from the File Manager it deletes it from the left tree but show me the image in details page and if i clicks on select it bring the image in the CKeditor, same with rename, and while clicks Download it gives error. Is any body have this problme or it works like this, or i have some configuration problem.