Summernote Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require adnedelcu/summernote-bundle
   

   Enable the bundle in config/bundles.php (Symfony 4+) or AppKernel.php (Symfony 2/3):

   ADN\SummernoteBundle\ADNSummernoteBundle::class => ['all' => true],
   

2. Basic Usage: Add the Twig extension to your template:

   {{ adn_summernote({
       id: 'my-editor',
       content: 'Initial content here'
   }) }}
   

   Include the required JS/CSS in your base template:

   {{ adn_summernote_stylesheets() }}
   {{ adn_summernote_javascripts() }}
   

3. First Use Case: Create a form field for rich text editing:

   {{ form_row(form.description, {
       'attr': {
           'class': 'summernote',
           'data-summernote': json_encode({
               height: 300,
               toolbar: [
                   ['style', ['style']],
                   ['font', ['bold', 'italic', 'underline']],
                   ['insert', ['link']]
               ]
           })
       }
   }) }}
   

Implementation Patterns

Common Workflows

1. Dynamic Configuration: Pass options dynamically via Twig:

   {% set options = {
       height: 400,
       callbacks: {
           onInit: 'function() { console.log("Editor initialized"); }'
       }
   } %}
   {{ adn_summernote({ id: 'dynamic-editor', options: options }) }}
   

2. Form Integration: Bind to Symfony forms:

   // Controller
   $form = $this->createFormBuilder($entity)
       ->add('content', TextType::class, [
           'attr' => ['class' => 'summernote']
       ])
       ->getForm();
   

   {{ form_widget(form.content) }}
   

3. Asset Management: Override default assets by configuring paths in config/packages/adn_summernote.yaml:

   adn_summernote:
       assets:
           css: '/custom/path/summernote.css'
           js: '/custom/path/summernote.min.js'
   

4. Plugin Management: Enable/disable plugins globally:

   adn_summernote:
       plugins:
           - 'codeview'
           - 'table'
       disabled_plugins:
           - 'insertvideo'
   

5. Event Handling: Listen for editor events via JavaScript:

   {{ adn_summernote_javascripts() }}
   <script>
       $('#my-editor').on('summernote.change', function(we, contents) {
           console.log('Content changed:', contents);
       });
   </script>
   

Gotchas and Tips

Pitfalls

1. Asset Loading Order:

   • Ensure adn_summernote_stylesheets() and adn_summernote_javascripts() are loaded before the editor initialization.
   • Fix: Place them in your base template or layout.

2. Plugin Conflicts:

   • Some plugins (e.g., insertvideo) may require additional dependencies (e.g., YouTube API).
   • Fix: Check plugin documentation and include required assets manually.

3. Symfony 4+ Configuration:

   • The bundle expects config/packages/adn_summernote.yaml (Symfony 4+) or app/config/config.yml (Symfony 2/3).
   • Fix: Create the file if missing or update bundles.php for Symfony 4.

4. Form Data Binding:

   • HTML entities in saved content may break rendering.
   • Fix: Use htmlspecialchars_decode() when retrieving data:

     $cleanContent = htmlspecialchars_decode($entity->getContent());
     

5. Caching Issues:

   • Browser cache may serve stale assets.
   • Fix: Append a query string to asset paths in development:

     {{ adn_summernote_stylesheets({ version: '1.0.0' }) }}
     

Debugging Tips

1. Check Console for Errors:

   • Look for 404 errors on asset paths or JavaScript errors in the browser console.

2. Verify Bundle Activation:

   • Confirm the bundle is loaded by checking debug:container:

     php bin/console debug:container adn_summernote
     

3. Inspect Generated HTML:

   • Use browser dev tools to verify the editor is initialized with correct attributes.

Extension Points

1. Custom Templates: Override Twig templates by copying them from: vendor/adnedelcu/summernote-bundle/Resources/views/ to templates/bundles/adnsummernote/.

2. Event Subscribers: Extend functionality via Symfony events (e.g., kernel.request to dynamically modify editor options).

3. Webpack Encore Integration: For Symfony Flex projects, manually include Summernote via:

   // webpack.config.js
   Encore
       .addEntry('summernote', './node_modules/summernote/dist/summernote.min.js')
       .enableReactPreset()
       .copyFiles({
           from: './node_modules/summernote/dist/',
           to: 'build/[name].[ext]',
           pattern: /\.(css|js)$/
       });
   

4. Advanced Configuration: Use PHP services to dynamically generate options:

   # config/services.yaml
   services:
       App\Service\SummernoteConfigurator:
           arguments:
               $plugins: '%kernel.debug% ? ["codeview"] : []'
   

   {{ adn_summernote(app.summernote_configurator.getOptions()) }}