Tinymce Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require stfalcon/tinymce-bundle:^3.0
   

   Ensure your AppKernel.php includes:

   new Stfalcon\Bundle\TinymceBundle\StfalconTinymceBundle(),
   

2. Assets Installation:

   php bin/console assets:install web/
   

3. First Use Case: Add the TinyMCE editor to a form field in Twig:

   {{ form_row(form.content, {'attr': {'class': 'tinymce'}}) }}
   

   Configure basic settings in config/packages/stfalcon_tinymce.yaml:

   stfalcon_tinymce:
       include_jquery: false
       selector: 'textarea.tinymce'
       skin: 'lightgray'
       theme: 'modern'
       plugins: ['advlist', 'autolink', 'lists', 'link', 'image', 'charmap']
       toolbar: 'undo redo | bold italic | bullist numlist outdent indent | link image'
   

Implementation Patterns

Common Workflows

1. Dynamic Configuration: Override default settings per form or entity using Twig:

   {{ form_row(form.description, {
       'attr': {
           'class': 'tinymce',
           'data-tinymce-config': {
               'plugins': 'code',
               'toolbar': 'bold italic | code'
           }
       }
   }) }}
   

2. Form Integration: Use with Symfony Forms:

   $builder->add('body', TextareaType::class, [
       'attr' => ['class' => 'tinymce'],
       'config' => [
           'height' => 400,
           'menubar' => false,
       ],
   ]);
   

3. Asset Management: Customize assets by copying files from vendor/stfalcon/tinymce-bundle/Resources/public to web/bundles/stfalcon_tinymce.

4. API Integration: Fetch TinyMCE assets dynamically (e.g., for SPAs) via:

   {{ asset('bundles/stfalcon_tinymce/tinymce.min.js') }}
   

Pro Tips

• Lazy Loading: Use defer in Twig to load TinyMCE after DOM ready:

  <script src="{{ asset('bundles/stfalcon_tinymce/tinymce.min.js') }}" defer></script>
  

• Environment-Specific Configs: Split configurations across environments (e.g., config/packages/dev/stfalcon_tinymce.yaml for debug tools).

Gotchas and Tips

Pitfalls

1. Asset Paths:

   • Forgetting assets:install causes 404s for JS/CSS.
   • Override paths in config/packages/stfalcon_tinymce.yaml:

     stfalcon_tinymce:
         base_path: '%kernel.project_dir%/public/assets/tinymce'
     

2. JQuery Dependency:

   • If include_jquery: true, ensure jQuery is loaded before TinyMCE.
   • Conflicts may arise with other bundles using jQuery (e.g., Symfony UX).

3. Configuration Overrides:

   • Twig data-tinymce-config takes precedence over YAML, but invalid JSON breaks TinyMCE.
   • Validate configs with:

     php bin/console debug:config stfalcon_tinymce
     

4. Caching:

   • Clear cache after config changes:

     php bin/console cache:clear
     

Debugging

• Console Errors: Check browser console for tinymce is not defined (missing asset load) or Invalid configuration (malformed YAML/JSON).
• Network Tab: Verify TinyMCE assets are loaded (e.g., tinymce.min.js).

Extension Points

1. Custom Plugins: Add plugins via plugins config or load externally:

   stfalcon_tinymce:
       external_plugins: ['%kernel.project_dir%/public/plugins']
   

   Then reference in Twig:

   data-tinymce-config: { 'external_plugins': {'myplugin': '/plugins/myplugin.js'} }
   

2. Event Listeners: Use Symfony events to modify configs dynamically:

   // src/EventListener/TinymceConfigListener.php
   public function onKernelRequest(GetResponseEvent $event) {
       $config = $event->getRequest()->attributes->get('tinymce_config', []);
       $config['toolbar'] .= ' | mycustombutton';
       $event->getRequest()->attributes->set('tinymce_config', $config);
   }
   

3. Themes/Skins: Override default themes by copying from vendor to web/bundles/stfalcon_tinymce/skins and updating skin_url in config.

Performance

• Minification: Use Symfony Encore or Webpack to bundle TinyMCE with other assets.
• Lazy Initialization: Initialize TinyMCE only on fields with data-tinymce:

  document.querySelectorAll('[data-tinymce]').forEach(el => {
      tinymce.init({ selector: el });
  });