Ckeditor Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require delocker/ckeditor-bundle
   

   Add to config/bundles.php:

   Delocker\CKEditorBundle\DelockerCKEditorBundle::class => ['all' => true],
   

2. Basic Configuration Edit config/packages/delocker_ckeditor.yaml (auto-generated):

   delocker_ckeditor:
       default_config: 'default'
       configs:
           default:
               toolbar: 'Full'
               height: '300px'
   

3. First Use Case In a Twig template:

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

   Ensure jQuery is loaded (CKEditor 4 requires it).

Implementation Patterns

Form Integration

• Symfony Form Types Extend AbstractType to add CKEditor support:

  use Delocker\CKEditorBundle\Form\Type\CKEditorType;
  
  public function buildForm(FormBuilderInterface $builder, array $options)
  {
      $builder->add('content', CKEditorType::class, [
          'config' => 'default', // Matches config key
      ]);
  }
  

• Dynamic Configs Override configs per field:

  # config/packages/delocker_ckeditor.yaml
  delocker_ckeditor:
      configs:
          simple:
              toolbar: 'Basic'
              height: '200px'
  

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

Asset Management

• Custom CSS/JS Override templates in templates/DelockerCKEditorBundle/ to modify editor behavior. Example: Extend DelockerCKEditorBundle:CKEditor:editor.html.twig.

• Asset Versioning Use Symfony’s asset pipeline for cache-busting:

  {{ encore_entry_link_tags('ckeditor') }} {# If using Encore #}
  

Workflow Tips

• Editor Initialization Ensure CKEditor initializes after DOM is ready:

  $(document).ready(function() {
      $('.ckeditor').ckeditor();
  });
  

• Server-Side Processing Use ckeditor_assets Twig function to embed assets:

  {{ ckeditor_assets('default') }}
  

Gotchas and Tips

Common Pitfalls

• jQuery Dependency CKEditor 4 requires jQuery. Ensure it’s loaded before CKEditor:

  {{ parent() }} {# Extends base.html.twig #}
  {{ encore_entry_script_tags('jquery') }}
  {{ encore_entry_script_tags('ckeditor') }}
  

• Configuration Merging Configs are merged with defaults. Override carefully:

  # Overrides only 'toolbar' (keeps other defaults)
  configs:
      custom:
          toolbar: 'CustomSet'
  

• Asset Paths If using Symfony Flex, assets may not auto-register. Manually add:

  // webpack.config.js
  Encore
      .addEntry('ckeditor', './vendor/delocker/ckeditor-bundle/Resources/public/js/ckeditor.js')
      .copyFiles({
          from: './vendor/delocker/ckeditor-bundle/Resources/public/',
          to: 'build/ckeditor/[path][name].[ext]',
      });
  

Debugging

• Console Errors Check browser console for missing jQuery or asset paths. Verify:

  php bin/console assets:install
  

• Twig Debugging Enable Twig debug mode to spot template issues:

  # config/packages/twig.yaml
  twig:
      debug: '%kernel.debug%'
  

Extension Points

• Custom Plugins Add plugins via config:

  configs:
      default:
          extraPlugins: 'uploadimage'
  

  Ensure plugin JS/CSS is loaded in web/build/.

• Event Listeners Use Symfony events to modify editor behavior:

  // src/EventListener/CKEditorListener.php
  public function onKernelRequest(GetResponseEvent $event)
  {
      $request = $event->getRequest();
      if ($request->isXmlHttpRequest() && $request->get('_route') === 'ckeditor_upload') {
          // Custom upload logic
      }
  }
  

  Register in services.yaml:

  services:
      App\EventListener\CKEditorListener:
          tags: ['kernel.event_listener', { event: 'kernel.request' }]
  

• Localization Override language files in translations/DelockerCKEditorBundle.en.yml.