Ckfinder Symfony Bundle Laravel Package

Getting Started

Minimal Setup

1. Install the Bundle

   composer require ckfinder/ckfinder-symfony-bundle
   

2. Download CKFinder

   php bin/console ckfinder:download
   php bin/console assets:install
   

3. Enable Routing Create config/routes/ckfinder.yaml:

   ckfinder_connector:
       resource: "@CKSourceCKFinderBundle/Resources/config/routing.yml"
       prefix: /
   

4. Configure Storage Create a userfiles directory in your public/ folder (or customize via config):

   mkdir -m 777 public/userfiles
   

5. First Use Case Integrate CKFinder with a Symfony form (e.g., TinyMCE):

   {{ form_widget(form.content, {'attr': {'class': 'ckeditor'}}) }}
   

   Add JS initialization:

   ClassicEditor.create(document.querySelector('.ckeditor'), {
       cloudServices: {
           tokenUrl: '/ckfinder/connector?command=GetToken',
           uploadUrl: '/ckfinder/connector?command=Upload'
       }
   });
   

Implementation Patterns

Common Workflows

1. File Uploads via Connector

• Use the built-in /ckfinder/connector endpoint for file operations (upload, delete, etc.).
• Example: Upload a file via AJAX:

  fetch('/ckfinder/connector?command=Upload&type=Files', {
      method: 'POST',
      body: new FormData(document.querySelector('#file-upload'))
  })
  .then(response => response.json())
  .then(data => console.log(data));
  

2. Custom Storage Backend

Extend CKSource\CKFinderBundle\Storage\StorageInterface for S3, database, etc.:

// src/Storage/CustomStorage.php
class CustomStorage implements StorageInterface {
    public function save($path, $content) { /* ... */ }
    public function read($path) { /* ... */ }
    // ... other methods
}

Register in config/packages/ckfinder.yaml:

ckfinder:
    storage:
        adapter: custom
        class: App\Storage\CustomStorage

3. TinyMCE Integration

Configure TinyMCE to use CKFinder:

tinymce.init({
    selector: '#editor',
    plugins: 'ckfinder',
    toolbar: 'ckfinder',
    ckfinder: {
        uploadUrl: '/ckfinder/connector?command=Upload',
        browser: '/ckfinder/connector?command=Browser'
    }
});

4. Access Control

Restrict file operations via Symfony security:

# config/packages/security.yaml
access_control:
    - { path: ^/ckfinder/connector, roles: ROLE_USER }

Or use a custom AuthorizationChecker in your storage backend.

5. Dynamic Configuration

Override default settings (e.g., allowed file types) in config/packages/ckfinder.yaml:

ckfinder:
    allowedFileTypes: ['jpg', 'png', 'pdf', 'docx']
    maxFileSize: 10M
    accessControl: {
        'userfiles': {
            'read': ['ROLE_USER'],
            'write': ['ROLE_ADMIN']
        }
    }

Gotchas and Tips

Pitfalls

1. Permissions Issues

   • Ensure public/userfiles is writable by the web server (e.g., chmod -R 777 public/userfiles).
   • Debug with php bin/console ckfinder:debug-permissions.

2. Routing Conflicts

   • Prefix routes in ckfinder.yaml to avoid clashes (e.g., prefix: /media/).
   • Clear cache after adding routes:

     php bin/console cache:clear
     

3. CORS Errors

   • If using CKFinder in a SPA, configure CORS in Symfony:

     # config/packages/nelmio_cors.yaml
     nelmio_cors:
         defaults:
             allow_origin: ['*']
             allow_methods: ['GET', 'POST', 'PUT', 'DELETE']
     

4. Asset Installation

   • After updating CKFinder, re-run:

     php bin/console assets:install
     php bin/console ckfinder:download
     

5. Storage Backend Quirks

   • Default storage assumes public/userfiles. For custom paths, set:

     ckfinder:
         storage:
             basePath: '%kernel.project_dir%/public/custom-uploads'
     

Debugging Tips

• Check Connector Logs: Enable debug mode and inspect Symfony logs for connector errors.
• Test Endpoints: Manually test /ckfinder/connector with curl:

  curl -X POST -F "upload=@test.jpg" http://localhost/ckfinder/connector?command=Upload
  

• Validate Config: Use php bin/console debug:config ckfinder to verify settings.

Extension Points

1. Custom Commands Extend the connector by adding new commands (e.g., GetFilesModifiedSince):

   // src/Command/CustomCommand.php
   class CustomCommand extends AbstractCommand {
       protected function execute(InputInterface $input, OutputInterface $output) {
           // Logic for custom command
       }
   }
   

   Register in services.yaml:

   services:
       App\Command\CustomCommand:
           tags: ['console.command']
   

2. Event Listeners Hook into file operations via events:

   // src/EventListener/CKFinderListener.php
   class CKFinderListener {
       public function onUpload(UploadEvent $event) {
           // Pre/post-upload logic
       }
   }
   

   Bind in services.yaml:

   services:
       App\EventListener\CKFinderListener:
           tags:
               - { name: kernel.event_listener, event: ckfinder.upload, method: onUpload }
   

3. Twig Extensions Add CKFinder-specific Twig functions:

   // src/Twig/CKFinderExtension.php
   class CKFinderExtension extends \Twig\Extension\AbstractExtension {
       public function getFunctions() {
           return [
               new \Twig\TwigFunction('ckfinder_url', [$this, 'getCKFinderUrl']),
           ];
       }
   }
   

Performance

• Disable Debug Mode: Set debug: false in config/packages/ckfinder.yaml for production.
• Cache Connector Responses: Use Symfony’s HTTP cache for static file listings:

  framework:
      http_cache:
          cache_control:
              rules:
                  - { path: ^/ckfinder/connector, max_age: 3600 }