Tinymce Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require bitbirddev/tinymce-bundle
   

   Add to config/bundles.php:

   return [
       // ...
       bitbirddev\TinyMceBundle\TinyMceBundle::class => ['all' => true],
   ];
   

2. Publish Configuration

   php bin/console assets:install
   php bin/console tinymce:install
   

   This generates default config at config/packages/tinymce.yaml.

3. First Use Case Add the TinyMCE field to a form in a Symfony controller:

   use Symfony\Component\Form\Extension\Core\Type\TextareaType;
   use Symfony\UX\TinyMce\TinyMceType;
   
   $builder->add('content', TinyMceType::class, [
       'config' => [
           'plugins' => 'link image',
           'toolbar' => 'bold italic | link image',
       ],
   ]);
   

Implementation Patterns

Common Workflows

1. Dynamic Configuration Override TinyMCE settings per form field:

   $builder->add('description', TinyMceType::class, [
       'config' => [
           'height' => 300,
           'menubar' => false,
       ],
   ]);
   

2. Global Configuration Customize defaults in config/packages/tinymce.yaml:

   tinymce:
       base_url: '%kernel.project_dir%/vendor/tinymce/tinymce'
       selector: '#tinymce-editor'
       plugins: 'link image code'
       toolbar: 'bold italic | link image code'
   

3. Asset Integration Use Symfony’s asset pipeline for TinyMCE JS/CSS:

   {{ encore_entry_link_tags('app') }}
   {{ tinymce_js() }}
   

4. Form Theming Extend Symfony’s TinyMceType for reusable configurations:

   class RichTextType extends AbstractType {
       public function configureOptions(OptionsResolver $resolver) {
           $resolver->setDefaults([
               'config' => [
                   'plugins' => 'link image',
                   'toolbar' => 'bold italic | link image',
               ],
           ]);
       }
   }
   

Gotchas and Tips

Pitfalls

1. Asset Installation Forgetting assets:install after composer install will break TinyMCE JS/CSS loading. Fix: Run bin/console assets:install post-install.

2. Selector Conflicts TinyMCE’s default selector (#tinymce-editor) may clash with existing IDs. Fix: Override in tinymce.yaml or use data-tinymce attributes in Twig:

   <textarea data-tinymce="{'plugins': 'link'}"></textarea>
   

3. Plugin Dependencies Missing plugins (e.g., image) will throw JS errors. Fix: Ensure plugins are listed in config/packages/tinymce.yaml and installed via npm (if using tinymce package).

4. Symfony UX Compatibility The bundle assumes Symfony UX TinyMCE (symfony/ux-tinymce-bundle). Conflicts may arise if both are installed. Fix: Use either the bundle or Symfony UX directly (not both).

Debugging Tips

• Console Errors: Check browser console for missing assets or plugin failures.
• Configuration Overrides: Use dump(tinymce_config()) in a controller to verify active settings.
• Clear Cache: After config changes, run:

  php bin/console cache:clear
  

Extension Points

1. Custom Plugins Load external plugins by extending the base_url in tinymce.yaml:

   tinymce:
       base_url: '%kernel.project_dir%/vendor/tinymce/tinymce'
       external_plugins: ['%kernel.project_dir%/path/to/custom-plugin']
   

2. Event Listeners Hook into TinyMCE initialization via Symfony events (e.g., tinymce.init). Example: Add a listener in config/services.yaml:

   services:
       App\EventListener\TinyMceListener:
           tags:
               - { name: kernel.event_listener, event: tinymce.init, method: onTinyMCEInit }
   

3. Twig Extensions Create a custom Twig function to generate TinyMCE fields dynamically:

   // src/Twig/TinyMceExtension.php
   public function tinymceField(array $config) {
       return $this->renderer->render([
           'config' => $config,
       ], '@TinyMce/tinymce.html.twig');
   }