A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

Using FCKEditor with Zend Framework (File Browser Enabled)

If you are trying to use FCKEditor with Zend Framework, you might be getting errors where ZF is trying to look for a controller named: “FCKEditor”.

To fix this, open your .htaccess file in your /html directory and add “xml” and “php”. Like something below:

RewriteEngine on
RewriteRule !.(htm|html|txt|swf|js|ico|gif|jpg|png|css|php|xml)$ index.php

This is so that all files with xml and php extension does not thrown to index.php – which is the bootstrap file of the Zend Framework. You might be asking why add “php” in the .htaccess. Well, FCKEditor has a built-in File Browser. The File Browser has connectors for different server side programming languages – and the default is PHP. So in short, there are PHP files inside the FCKEditor directories. It gets executed when you enable the File Browser in FCKEditor. And FCK also loads XML files. Adding both xml and php in the rewrite rule would allow FCKEditor to run properly inside a Zend Framework application.

The View File
Now, in your view file, you can have something like this:

< script type="text/javascript" >
    window.onload = function()
    {
        if(document.getElementById('content_text')) {
            var oFCKeditor = new FCKeditor('content_text') ;
            oFCKeditor.BasePath = "< ?=$this->baseUrl ?>/js/fckeditor/" ;
            oFCKeditor.Height = 500;
            oFCKeditor.ReplaceTextarea() ;
        }
    }
< / script >

Notice the $this->baseUrl in the oFCKeditor.BasePath? Take note of it.

The File Browser Config
Now in /home/ekini/public_html/js/fckeditor/editor/filemanager/connectors/php/config.php I have UserFilesPath set to /images/uploads/ – see below:

$Config['UserFilesPath'] = '/images/uploads/' ;

Make sure the you have CHMOD to 777 the uploads directory.

Bilgehan, got his FckEditor working in Windows using the following config for FckEditor:

$Config[’UserFilesPath’] = ‘/user/’ ;
$Config[’UserFilesAbsolutePath’] = ‘C:/Documents and Settings/Bill/Desktop/v.2.subversion/httpdocs/user/’;

Thanks Bilgehan ;)

I hope that I didn’t miss anything. It took me more than an hour to figure things out :-(
If you have comments, suggestions or corrections feel free to post them below.

This entry was posted in General and tagged , . Bookmark the permalink.

52 Responses to Using FCKEditor with Zend Framework (File Browser Enabled)

  1. jfalvarez says:

    Cool, I have a question for you, did you set this variable too: $Config['UserFilesPath'] ? cuase if I don’t set it I can upload files and I can’t see the files browser, I got an error, something about that can’t create some folders.

  2. Wenbert says:

    the $Config['UserFilesPath'] is set to /images/uploads

    The full path to this – i think is – /home/ekini/public_html/images/uploads

    It is found in the html folder of your ZF app.
    /html
    index.php (bootstrap file)
    /js
    /images
    /uploads (CHMOD to 0777)

    make sure you have the xml, js, php and other file extensions included the .htaccess list above though.

    hope this helps. if there are still errors, just send a reply to this post and il double check my settings in my site.

    -wenbert

  3. jfalvarez says:

    Well, this is my .htaccess fike data:

    RewriteEngine on
    RewriteRule !.(js|ico|gif|jpg|png|css|pdf|eps|ai|doc|xls|ppt|zip|rar|sit|jpeg|swf|xml|xst|txt|js.php|jar|php)$ index.php

    Doesn’t work, still the framework thinks that folder is a controller/action. I’m using fckeditor 2.5.1, latest one. And this is the config in my php connector:

    $Config['Enabled'] = true ;
    $Config['UserFilesPath'] = ‘/userfiles/’ ;
    // $Config['UserFilesAbsolutePath'] = ‘/userfiles/’ ;

    The problem is this, If I don’t set $Config['UserFilesAbsolutePath'] with all the absolute path, doesn’t work, I mean, I got an error about that can’t create some folders, :S, you are using that variable ?

  4. Wenbert says:

    you have a typo in your .htaccess file.
    check the |js.php| part…
    it should be |js|php|
    no .

    RewriteEngine on
    RewriteRule !.(js|ico|gif|jpg|png|css|pdf|eps|ai|doc|xls|ppt|zip|rar|sit|jpeg|swf|xml|xst|txt|js|php|jar|php)$ index.php

    if that doesn’t work, i will check the files on the application when i get home. im still at work :P

  5. jfalvarez says:

    hehehe, js.php is a special file :P, js + php to print some stupid constants and stuff with php.

  6. Bilgehan says:

    Great stuff man.I have a slight problem though :)
    My installation was a little bit different then yours. I like all my 3rd party libs under library folder. So I created the directory FCKeditor under library folder and put fckeditor.php fckeditor_php4.php and fckeditor_php5.php under this.rest of the files went to /httpdocs/scripts/FCKeditor

    And in the controller/action
    $oFCKeditor = new FCKeditor(‘FCKeditor1′);
    $oFCKeditor->BasePath = ‘/scripts/FCKeditor/’;
    $oFCKeditor->Value = ‘Default text in editor’;
    $returnHTML= $oFCKeditor->CreateHtml();
    $this->view->editor = $returnHTML;

    and of course in the phtml file
    editor?>

    suprisingly the editor comes and perfectly. all buttons work etc. but when I try to browse server for image upload I get
    Error creating folder “redirt:index.php/” (can’t create directory: directory) message.

    in the configuration file I have
    $Config['Enabled'] = true ;
    $Config['UserFilesPath'] = ‘/userimages’ ;
    and of course the directory exists.

    as I honestly believe that your are a genius, could you please help me on this one?
    Thanks
    B.

  7. Bilgehan says:

    sorry, made a mistake
    ===========
    and of course in the phtml file
    editor ? >

  8. Wenbert says:

    Hello, hope ur doing fine. Is the directory writable? Have u chmod it to 777?

  9. Wenbert says:

    @jfalvarez well if ZF stil thinks that fckeditor is a controller then the .htaccess part is still sending stuff to index.php (boobstrap). Try double checking that part — htaccess

  10. Bilgehan says:

    Hi wenbert,
    This is a windows xp machine I am trying on, so I don’t think the permissing will be an issue.

  11. Wenbert says:

    hi Bilgehan,
    can you check your apache error logs?
    did u try removing the js.php? and just use .php instead? (in the .htaccess file)

    i just had the same problem – ZF was looking for an fckEditor controller – the problem was that i forgot to edit the .htaccess file beside the index.php (bootstrap)

  12. Bilgehan says:

    Wenbert, thanks for your time and help!
    My htaccess file says
    RewriteRule !.(htm|html|txt|swf|js|ico|gif|jpg|png|css|php|xml)$ index.php
    and apache error logs is clean.
    you can check the page here
    http://fmuw.dyndns.org/test/index/fck

  13. Bilgehan says:

    Good news!
    I have changed the config.php as follows
    $Config['UserFilesPath'] = ‘/user/’ ;
    $Config['UserFilesAbsolutePath'] = ‘C:/Documents and Settings/Bill/Desktop/v.2.subversion/httpdocs/user/’;
    and everything works fine!
    I hope this helps others.

    Thanks again Wenbert.

  14. Wenbert says:

    Hi Bilgehan,

    Thanks for your input! :-)
    I will put some notes regarding file paths for Windows machines…

  15. Hendi says:

    It’s easier than that: just put a .htaccess file in your fckeditor folder with just RewriteEngine Off in it. That’s it :)

  16. Wenbert says:

    Thanks hendi! :-) I never thought of that… way better and easier solution…

  17. Pablo Triviño says:

    You’re the machine!!. I´m spanish!!
    You’re the best!!
    Thank you!!!

  18. at says:

    more elegant version of .htaccess

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule .* index.php

  19. Chlebik says:

    I just spend 3h looking for an answer about the FCK and ZF – it’s Windows case – the best solution is to set things like that:

    $Config['UserFilesPath'] = ‘/images/upload/’;

    AND COMPLETLY COMMENT
    $Config['UserFilesAbsolutePath']!!!!!!

    Then it’s universal (working both on Win and Linux). Of course previously change .htaccess.

  20. pouderstream says:

    Ha!It worked for me too.The only thing that I didn’t found here is where exactly should I put my .htaccess with RewriteEngine Off..
    So you should put it in JS folder. E.g. web_root/js/.htaccess

    Tnx,u helped me a lot ;)

  21. Nearher says:

    Hi,
    It seems hendi’s system is the best. But where to place FCKeditor folder? In application? or in the public folder of the site?
    Thanks

  22. Wenbert says:

    Nearher,

    You place it inside: public/js/FCKEditor
    On your views/layouts, you can use the base_url to call the FCKEditor files.

    Regards,
    Wenbert

  23. Trushal says:

    Hi,

    I am new in zend…
    I wann a integrate FckEditor in my application but first i am not getting this fckeditor folder to upload this in our Library folder ya somewhere ..?

    and how to use that in model as well as in phtml file

    Please give me that folder with step by step that i can implement this

    i am using xampp

  24. What about this little script:

    window.onload = function() {
    var textareas = document.getElementsByTagName(“textarea”);
    if (textareas) {
    for (i=0; i<textareas.length; i++) {
    var oFCKeditor = new FCKeditor(textareas[i].name);
    oFCKeditor.BasePath
    oFCKeditor.BasePath = “baseUrl ?>/addons/fckeditor/” ;
    oFCKeditor.Width = 640;
    oFCKeditor.Height = 320;
    oFCKeditor.ToolbarSet = ‘Basic’;
    oFCKeditor.ReplaceTextarea() ;
    }
    }
    }

    It finds all textareas in the document and transforms them, so you don’t have do to it each time.

  25. Sorry, there was 1 line too much.

    window.onload = function() {
    var textareas = document.getElementsByTagName(“textarea”);
    if (textareas) {
    for (i=0; i<textareas.length; i++) {
    var oFCKeditor = new FCKeditor(textareas[i].name);
    oFCKeditor.BasePath = “baseUrl ?>/addons/fckeditor/” ;
    oFCKeditor.Width = 640;
    oFCKeditor.Height = 320;
    oFCKeditor.ToolbarSet = ‘Basic’;
    oFCKeditor.ReplaceTextarea() ;
    }
    }
    }

  26. leon says:

    Thanks a lot!!!

  27. Will says:

    Hi,
    Has anyone had any luck getting styles in the fck_editorarea.css file to show up in the editor area? Everything else in the editor seems to be working fine except for this feature.

    I have checked my apache and php logs, no errors. set the path to FCKConfig.EditorArea = ‘/css/fck_editorarea.css’ ;

    and thats where the file is (ie public/css/fck_editorarea.css)

    Quite stuck now! any help gratefully recieved.

    Will

  28. jast call me Aw. says:

    Guys, just remember, adding to RewriteRule php extension is a big security breach.

  29. Illus23 says:

    Hello,
    i got a problem i made the js in my View and now he say

    Fatal error: Uncaught exception ‘Zend_Controller_Dispatcher_Exception’ with message ‘Invalid controller specified (fckeditor)’ in /var/www/test/library/Zend/Controller/Dispatcher/Standard.php:249 Stack trace: #0 /var/www/test/library/Zend/Controller/Front.php(914): Zend_Controller_Dispatcher_Standard->dispatch(Object(Zend_Controller_Request_Http), Object(Zend_Controller_Response_Http)) #1 /var/www/test/referenz2/public/index.php(41): Zend_Controller_Front->dispatch() #2 {main} thrown in /var/www/test/library/Zend/Controller/Dispatcher/Standard.php on line 249

    What is wrong?

  30. Illus23 says:

    yes, i got it … haven’t uploaded the .htaccess

  31. tommybui says:

    heloo

  32. tommybui says:

    // this file is in index.phtml

    Height = “300px”;
    $oFCKeditor->Width = “730px”;
    $oFCKeditor->BasePath = $sBasePath ;
    $oFCKeditor->Value = ‘aaaaaa’ ;
    $oFCKeditor->Create() ;
    ?>
    //.htaccess
    RewriteEngine on
    RewriteRule !.(htm|html|txt|swf|js|ico|gif|jpg|png|css|php|xml)$ index.php
    RewriteCond %{SCRIPT_FILENAME} !-f
    RewriteCond %{SCRIPT_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1

    => didn’t appear anything , can bro help me ?

  33. tommybui says:

    // this file is index.phtml

    Height = “300px”;
    $oFCKeditor->Width = “730px”;
    $oFCKeditor->BasePath = $sBasePath ;
    $oFCKeditor->Value = ‘aaaaaa’ ;
    $oFCKeditor->Create() ;
    ?>

  34. tommybui says:

    //

    //Height = “300px”;
    $oFCKeditor->Width = “730px”;
    $oFCKeditor->BasePath = $sBasePath ;
    $oFCKeditor->Value = ‘aaaaaa’ ;
    $oFCKeditor->Create() ;
    ?>

  35. tommybui says:

    hp require_once ‘C:/Program Files/Zend/Apache2/htdocs/SimpleHo/application/default/views/scripts/test/fckeditor/fckeditor.php’ ;?>

    <?php
    $ctrl_name = ‘comments’;
    $sBasePath = ‘fckeditor/’;
    $oFCKeditor = new FCKeditor($ctrl_name) ;

  36. Wenbert says:

    @tommybui, I am not familiar with Windows. But can you try to use \ double-backslashes instead?

  37. tommybui says:

    i mean , fckeditor didn’t appear on the screen

    RewriteEngine on
    RewriteRule !.(js|ico|gif|jpg|png|css)$ index.php
    RewriteCond %{SCRIPT_FILENAME} !-f
    RewriteCond %{SCRIPT_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1

    Height = “300px”;
    $oFCKeditor->Width = “730px”;
    $oFCKeditor->BasePath = $sBasePath ;
    $oFCKeditor->Value = ‘aaaaaa’ ;
    $oFCKeditor->Create() ;
    ?>

  38. tommybui says:

    i mean , fckeditor didn’t appear on the screen

    RewriteEngine on
    RewriteRule !.(js|ico|gif|jpg|png|css)$ index.php
    RewriteCond %{SCRIPT_FILENAME} !-f
    RewriteCond %{SCRIPT_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1

    $ctrl_name = ‘comments’;
    $sBasePath = ‘C:/Program Files/Zend/Apache2/htdocs/SimpleHo/application/default/views/scripts/index/fckeditor/’;
    $oFCKeditor = new FCKeditor($ctrl_name) ;
    $oFCKeditor->Height = “300px”;
    $oFCKeditor->Width = “730px”;
    $oFCKeditor->BasePath = $sBasePath ;
    $oFCKeditor->Value = ‘aaaaaa’ ;
    $oFCKeditor->Create() ;

  39. Wenbert says:

    Try to add php in RewriteRule !.(js|ico|gif|jpg|png|css)$ index.php
    If it still did not work, try to ask ZF mailing list: http://www.nabble.com/Zend-Framework-Community-f16154.html

  40. tommybui says:

    i added but still not work , do you have nick yahoo , i want to chat with you .

  41. tommybui says:

    hey , is there htaccess in fckeditor ?? ,
    that htaccess above i add is under public’s folder

  42. craig says:

    Programmed fck editor right into zend forms
    Instructions Demo

  43. Vikram says:

    Thanks a lot. Both the article and comments were helpful

  44. Bin says:

    I also meet the problem, when i browse image to upload to server

    Invalid controller specified (fckeditor)

    Stack trace:

    #0 /home/domainname/public_html/library/Zend/Controller/Front.php(954): Zend_Controller_Dispatcher_Standard->dispatch(Object(Zend_Controller_Request_Http), Object(Zend_Controller_Response_Http))
    #1 /home/domainname/public_html/library/Zend/Application/Bootstrap/Bootstrap.php(97): Zend_Controller_Front->dispatch()
    #2 /home/domainname/public_html/library/Zend/Application.php(366): Zend_Application_Bootstrap_Bootstrap->run()
    #3 /home/domainname/public_html/index.php(27): Zend_Application->run()
    #4 {main}

    What is wrong?
    Does any once solve this problem, could you help me?

  45. Wenbert says:

    @Bin, i think your rewrite rule is not working because the “fckeditor” is being read as a controller instead of a directory containing the FCKEditor Javascript files.

  46. Bin says:

    i run on my computer (window 7) it is ok, but when i upload to host the file upload can not run
    Invalid controller specified (fckeditor)

    Stack trace:

    #0 /home/domainname/public_html/library/Zend/Controller/Front.php(954): Zend_Controller_Dispatcher_Standard->dispatch(Object(Zend_Controller_Request_Http), Object(Zend_Controller_Response_Http))
    #1 /home/domainname/public_html/library/Zend/Application/Bootstrap/Bootstrap.php(97): Zend_Controller_Front->dispatch()
    #2 /home/domainname/public_html/library/Zend/Application.php(366): Zend_Application_Bootstrap_Bootstrap->run()
    #3 /home/domainname/public_html/index.php(27): Zend_Application->run()
    #4 {main}

    I has add a router in my bootstrap
    $routs= new Zend_Controller_Router_Route(
    ‘:lang/:controller/:action’,
    array(
    ‘module’ => ‘default’,
    ‘controller’ => ‘:controller’,
    ‘action’ => ‘:action’
    ),
    array(
    ‘lang’ => ‘[a-z]{2}’
    )
    );

    does cause the error above.
    Why the rewrite not affect.

    Does the rewrite rule:
    RewriteRule !.(htm|html|js|ico|gif|jpg|png|css|pdf|eps|ai|doc|xls|ppt|zip|rar|sit|jpeg|swf|xml|xst|txt|js|php|jar|php)$ index.php

    mean when i open files that have extention such as .html, .js, .php it open derect not rout to index.php to call the bootstrap.php file?

  47. Wenbert says:

    Yes. It should not route to the bootstrap.php file.

  48. Bin says:

    I upload .htaccess in to fckeditor and editor folder, it run, the file browser show ok, but i don’t see any images in my upload folder, though in my upload folder have some image there, and i had used to display in some page ok.

    here is my setting in the config.php of the fck.
    $Config['UserFilesPath'] = ‘/upload/’;
    $Config['UserFilesAbsolutePath'] = $_SERVER["DOCUMENT_ROOT"].’/upload/’;

    my DOCUMENT_ROOT is: /home/domain/public_html

    and when i browse an image and click upload, the progress bar run, and the upload button disable and, i see the text: Upload a new file in this folder (Upload in progress, please wait…)

    But i don’t see any things

    Could you help me?

  49. Bin says:

    when i click browse server, i don’t see any images, even thought already image in upload/image

    But when i click on the upload tab and choose image from my computer and click “Send it to server” then it upload the selected image to the upload folder.

    Why i can’t browse and upload image by choose browse server, and file browser dont list images in upload/image

    Can any one help me?

  50. Wenbert says:

    Bin, you have to make sure that the files where actually written on the server. CHMOD the directories properly, etc.

  51. Bin says:

    I have set CHMOD to the upload directory to 777
    but i have two problem
    1. fck file browser not list available files in upload/image folder
    2. when i browse an i mage and upload, i get the message: “Upload a new file in this folder (Upload in progress, please wait…)” but no image image uploaded

    But when i click on the upload tab and choose image from my computer and click “Send it to server” then it upload the selected image to the upload folder. The select file actually written on the server

    i config the fck as follow
    $Config['Enabled'] = true ;
    $Config['UserFilesPath'] = ‘/upload/’;
    $Config['UserFilesAbsolutePath'] = $_SERVER["DOCUMENT_ROOT"].’/upload/’;

    The $_SERVER["DOCUMENT_ROOT"] return value is:
    /home/mywebsite/public_html

    example my website is abc.com, then $_SERVER["DOCUMENT_ROOT"] return: /home/abc/public_html

    i think file browser not list resource files because php on host can not run function opendir and readdir so the function GetFolders, GetFoldersAndFiles can not list the files

    my host is linux (share hosting)

    does any once meet this problem? could you help me?

  52. Wenbert says:

    Hello Bin, have tried asking Stackoverflow.com or the FCKEditor mailing list?

Leave a Reply to Bilgehan Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>