Ckeditor Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require ailove-dev/ckeditor-bundle
   

   Ensure Trsteel\CkeditorBundle is installed (handled automatically via composer.json dependency).

2. Enable the Bundle Add to config/bundles.php:

   return [
       // ...
       Trsteel\CkeditorBundle\TrsteelCkeditorBundle::class => ['all' => true],
       AiloveDev\CKEditorBundle\CKEditorBundle::class => ['all' => true],
   ];
   

3. Basic Configuration Override default settings in config/packages/ckeditor.yaml:

   trsteel_ckeditor:
       base_path: '%kernel.project_dir%/public/ckeditor'
       config_path: '%kernel.project_dir%/public/ckeditor/config'
       upload_path: '%kernel.project_dir%/public/uploads/ckeditor'
       upload_url: '/uploads/ckeditor'
       assets_path: '%kernel.project_dir%/vendor/ckeditor/ckeditor4'
   

4. First Use Case: Form Integration Use the CKEditorType in a Symfony form:

   use AiloveDev\CKEditorBundle\Form\Type\CKEditorType;
   
   $builder->add('content', CKEditorType::class, [
       'config' => ['toolbar' => 'Full'],
       'media_library' => true, // Enable SonataMediaBundle integration
   ]);
   

Implementation Patterns

Form Field Integration

• Default Configuration: Use CKEditorType as a drop-in replacement for TextareaType in forms.
• Custom Toolbars: Define toolbars in config/packages/ckeditor.yaml:

  trsteel_ckeditor:
      configs:
          custom:
              toolbar: [['Bold', 'Italic'], ['NumberedList', 'BulletedList']]
  

  Reference in form:

  $builder->add('content', CKEditorType::class, ['config' => 'custom']);
  

SonataMediaBundle Integration

• Enable Media Library:

  $builder->add('content', CKEditorType::class, [
      'media_library' => true,
      'media_provider' => 'sonata.media.provider.file', // Adjust as needed
  ]);
  

• Provider Configuration: Ensure SonataMediaBundle is configured to expose media via the correct provider (e.g., file, image).

Asset Management

• Custom Upload Paths: Override upload paths in config:

  trsteel_ckeditor:
      upload_path: '%kernel.project_dir%/public/custom_uploads'
      upload_url: '/custom_uploads'
  

• Static Assets: Use assets_path to point to a custom CKEditor version (e.g., for CDN-hosted builds).

Twig Integration

• Render CKEditor in Twig:

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

• Include JS/CSS: Add to your base template:

  {{ encore_entry_link_tags('app') }} {# Ensure CKEditor assets are enqueued #}
  

Gotchas and Tips

Common Pitfalls

1. Missing Assets:

   • Symptom: CKEditor not loading or showing errors.
   • Fix: Ensure assets_path points to the correct CKEditor installation (default: vendor/ckeditor/ckeditor4). Run composer install if assets are missing.

2. SonataMediaBundle Mismatch:

   • Symptom: Media library button appears but fails to load media.
   • Fix: Verify media_provider matches a configured Sonata provider (e.g., sonata.media.provider.file). Check SonataMediaBundle’s providers config.

3. Permission Issues:

   • Symptom: Uploads fail with 403/404 errors.
   • Fix: Ensure upload_path is writable by the web server:

     chmod -R 775 %kernel.project_dir%/public/uploads/ckeditor
     

4. Config Overrides:

   • Symptom: Custom configs not applied.
   • Fix: Clear cache after modifying ckeditor.yaml:

     php bin/console cache:clear
     

Debugging Tips

• Check Browser Console: Look for 404 errors on JS/CSS files or upload endpoints.
• Validate Config: Dump the resolved config in a controller:

  use Symfony\Component\DependencyInjection\ContainerInterface;
  public function debugConfig(ContainerInterface $container) {
      dump($container->getParameter('trsteel_ckeditor.configs'));
  }
  

• Log Upload Errors: Enable Symfony’s profiler to inspect upload requests.

Extension Points

1. Custom Upload Handlers: Extend Trsteel\CkeditorBundle\EventListener\UploadListener to handle non-file uploads (e.g., database storage).

2. Dynamic Toolbars: Use Twig to pass dynamic configs:

   {{ form_widget(form.content, {
       'config': {
           'toolbar': ['Bold', 'Italic', app.request.query.get('extra_toolbar', [])]
       }
   }) }}
   

3. Plugin Integration: Add custom CKEditor plugins by extending the assets_path to include plugin folders and updating the config:

   trsteel_ckeditor:
       configs:
           custom:
               extraPlugins: 'myplugin'
   

4. Form Events: Listen to ckeditor.form.event to modify field options dynamically:

   $eventDispatcher->addListener('ckeditor.form.event', function (FormEvent $event) {
       $event->setData(['toolbar' => 'Custom']);
   });