Wednesday, October 13, 2010

Install CKEditor and CKFinder in Symfony

  1. Create the sfCKEditorPlugin folder in the Plugins folder.
  2. Download package: http://www.symfony-project.org/plugins/sfCKEditorPlugin
  3. Go to http://ckeditor.com/ and download the last version.
  4. Put the ckeditor folder to the web\js folder.
  5. Go to http://ckfinder.com/ 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
      ckeditor:
        basePath: /js/ckeditor
      ckfinder:
        active: true
        basePath: /js/ckfinder
  9. Create autoload.yml file and put:

    autoload:
      ckeditor:
        name:       ckeditor
        path:       %sf_web_dir%/js/ckeditor
        recursive:  on
       
      ckfinder:
        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 =
    [
        ['Source'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'Templates'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        '/',
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Link','Unlink','Anchor'],
        '/',
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
        ['Format','FontSize'],
        ['TextColor','BGColor']
    ];

3 comments:

  1. thank you so much for this :)

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

    ReplyDelete
  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 mydomain.com/ckfinder/ckfinder.html and nothing happen.. Where is problem. how can ran CKFinder properly.

    Sorry for my bad English.

    ReplyDelete