Ckeditor Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require egeloen/ckeditor-bundle
   

   Ensure Egelon\CKEditorBundle\EgelonCKEditorBundle::class is registered in config/bundles.php.

2. Basic Form Integration:

   use Egelon\CKEditorBundle\Form\Type\CKEditorType;
   
   // In your form builder
   $builder->add('content', CKEditorType::class, [
       'config' => [
           'toolbar' => 'Basic',
       ],
   ]);
   

3. First Use Case: Attach the form type to a field (e.g., Article entity's body property) and render it in a template:

   {{ form_row(form.content) }}
   

Key Files to Review

• config/packages/egelon_ckeditor.yaml (default config)
• Resources/doc/usage.md (for advanced options)
• Egelon\CKEditorBundle\Form\Type\CKEditorType.php (core class)

Implementation Patterns

Common Workflows

1. Dynamic Toolbar Configuration:

   $builder->add('description', CKEditorType::class, [
       'config' => [
           'toolbar' => [
               ['bold', 'italic', 'underline'],
               ['numberedlist', 'bulletedlist'],
           ],
       ],
   ]);
   

2. Asset Management:

   • Place CKEditor assets in public/bundles/egelonckeditor/ (auto-installed via bundle).
   • Override assets by copying them to web/bundles/egelonckeditor/ and modifying.

3. Entity Integration:

   // Article.php
   use Doctrine\ORM\Mapping as ORM;
   use Symfony\Component\Validator\Constraints as Assert;
   
   #[ORM\Entity]
   class Article {
       #[ORM\Column(type: 'text')]
       #[Assert\NotBlank]
       private $body;
   }
   

4. Twig Integration:

   {% form_theme form _self %}
   {% block _ckeditor_widget %}
       {{ parent() }}
       <script>
           CKEDITOR.replace('{{ form.vars.id }}', {{ form.vars.config|json_encode }});
       </script>
   {% endblock %}
   

Integration Tips

• Laravel-Specific: Use Symfony’s FormBuilder via laravel-bridge or wrap the bundle in a Laravel service provider.
• Asset Pipeline: Configure Laravel Mix to process CKEditor’s JS/CSS if customizing.
• Validation: Pair with Symfony’s Assert\Length or custom validators for content rules.

Gotchas and Tips

Pitfalls

1. Outdated CKEditor Version:

   • The bundle ships with CKEditor 4.x (last updated 2015). For newer features, manually override assets or use a separate CDN.
   • Fix: Add CKEditor 5 via CDN in your layout:

     <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
     

2. Asset Path Conflicts:

   • If assets aren’t loading, clear Laravel’s cache and check public/bundles/egelonckeditor/ permissions.
   • Debug: Use php artisan vendor:publish --tag=egelon-ckeditor-assets to republish assets.

3. Form Theme Overrides:

   • Twig form themes may break if not extended properly. Always use {% form_theme form _self %} before custom blocks.

Debugging

• Console Errors: Check for CKEDITOR is not defined (missing JS) or 404 on asset paths.
• Config Dumping: Dump the form’s config to verify settings:

  dump($form->getConfig());
  

Extension Points

1. Custom Config Providers:

   // services.yaml
   services:
       App\CKEditor\ConfigProvider:
           tags: [egelon_ckeditor.config_provider]
   

   Implement Egelon\CKEditorBundle\ConfigProviderInterface.

2. Plugin Integration:

   • Add plugins via config:

     egelon_ckeditor:
         config:
           extraPlugins: 'widget,uploadimage'
     

3. Laravel Service Provider:

   // AppServiceProvider.php
   public function boot() {
       $this->app->make('egelon_ckeditor.twig.extension')->addToEnvironment(
           $this->app['twig']
       );
   }
   

Tips

• Laravel Mix: Process CKEditor’s JS/CSS through Laravel Mix for versioning:

  // webpack.mix.js
  mix.copy('node_modules/ckeditor4/ckeditor.js', 'public/js/ckeditor.js');
  

• File Uploads: Use filebrowserUploadUrl in config for custom upload handlers (e.g., Laravel’s store method).
• Localization: Override language files in Resources/public/ckeditor/lang/ and reference them in config:

  egelon_ckeditor:
      config:
          language: 'fr'