SymfonyWorld Online 2020
100% online
30+ talks + workshops
Live + Replay watch talks later

Append Custom Javascript

1.0 version
Maintained

Append Custom Javascript

The bundle allows you to easily append custom javascript code into all CKEditor widgets by simply overriding the default templates. Here, we will configure CKEditor to not remove empty span via the DTD.

Twig Template

The default Twig template is FOSCKEditorBundle:Form:ckeditor_widget.html.twig. This one has some blocks you can override according to your needs.

1
2
3
4
5
6
{# app/Resources/views/Form/ckeditor_widget.html.twig #}
{% extends 'FOSCKEditorBundle:Form:ckeditor_widget.html.twig' %}

{% block ckeditor_widget_extra %}
    CKEDITOR.dtd.$removeEmpty['span'] = false;
{% endblock %}

Then, just need to register your template as a form resources in the configuration and it will override the default one:

1
2
3
4
# app/config/config.yml
twig:
    form_themes:
        - "::Form/ckeditor_widget.html.twig"

PHP Template

The default PHP template is FOSCKEditorBundle:Form:ckeditor_widget.html.php. This one has some slots you can override according to your needs.

1
2
3
4
5
6
<!-- app/Resources/views/Form/ckeditor_widget.html.php -->
<?php $view->extend('FOSCKEditorBundle:Form:ckeditor_widget.html.php') ?>

<?php $view['slots']->start('ckeditor_widget_extra') ?>
    CKEDITOR.dtd.$removeEmpty['span'] = false;
<?php $view['slots']->stop() ?>
1
2
3
4
5
6
# app/config/config.yml
framework:
    templating:
        form:
            resources:
                - "::Form"

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.