Showing posts with label ckfinder. Show all posts
Showing posts with label ckfinder. Show all posts

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']
    ];