Wednesday, October 13, 2010

Install CKEditor and CKFinder in Symfony

  1. Create the sfCKEditorPlugin folder in the Plugins folder.
  2. Download package:
  3. Go to and download the last version.
  4. Put the ckeditor folder to the web\js folder.
  5. Go to and download the last version.
  6. Put the ckfinder folder to the web\js folder.
  7. Add sfCKEditorPlugin to the ProjectConfiguration.class.php
  8. Open app.yml (apps/frontend or backend/config..) and put:

      # sfCKEditorPlugin
        basePath: /js/ckeditor
        active: true
        basePath: /js/ckfinder
  9. Create autoload.yml file and put:

        name:       ckeditor
        path:       %sf_web_dir%/js/ckeditor
        recursive:  on
        name:       ckfinder
        path:       %sf_web_dir%/js/ckfinder
        recursive:  on
  10. Add  js files to the view.yml in this way:
    javascripts:    [ckeditor/ckeditor.js, ckfinder/ckfinder.js]
  11. Edit /js/ckfinder/config.php... find CheckAuthentication() method and modify it to return true; however read the comments, it can be dangerous!

    My solution: In production you will need to add a special cookie to the authenticated users, ex. imgupload... in this case you can use return isset($_COOKIE['imgupload']); in the function.
  12. Change the $baseUrl to /js/ckfinder/userfiles/ in config.php
  13. Type symfony cc to clear the cache.
  14. Use the following syntax to call CKEditor:
    $this->widgetSchema['my_editor'] = new sfWidgetFormCKEditor();
  15. I usually change the ckeditor interface. I remove the h1 tag and the unused functions. Try to put this to the ckeditor/config.js and refresh the browser window:

    CKEDITOR.editorConfig = function( config )
        //config.language = 'hu';
        config.format_tags = 'p;h2;h3;h4;h5;h6';
        config.height = 500;

        config.entities = false;
        config.disableNativeSpellChecker = false;
        config.scayt_autoStartup = false;

    CKEDITOR.config.toolbar_Full =
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'Templates'],


  1. thank you so much for this :)

  2. You can install plugin just with plugin:install task with option --stability="beta" set.

  3. I follow this step by step and CKEditor run. But when I press image icon and jump "Image properties" dialog box all crashed..... I guess, this is from configuration come. "Browse button" follow from config.js

    config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html';

    and I going to address and nothing happen.. Where is problem. how can ran CKFinder properly.

    Sorry for my bad English.