Symfony Form Submits Empty Value for CKEditor Field using IvoryCKEditorBundle

Question

I'm using a standard Symfony 2.4 form class, with the IvoryCKEditorBundle . The config is:

ivory_ck_editor:
    default_config: cms
    configs:
        cms:
            toolbar: standard

For reference I have a $view entity, with an associated $viewVersion entity, where the CKeditor is located at $view->getVersion()->getContent() . (It shouldn't make any difference how the entities are structured though, in terms of submitting the data, but in case you ask).

My Form is created in my controller like any normal form, calling a predefined type:

$form = $this->createForm(new ViewType(), $view);

In the ViewType the field is created with default config:

$builder
    ->add('content', 'ckeditor', array(
    'label' => false,
    'required' => false
    ));

The CKeditor shows up in the browser for my form's content field (hurray!), but when I submit the form, the data in the content field is not submitted. The content field remains empty... it is not in the raw $_POST or the sanitized $request->request->all() or the form data $form->getData()->getContent() .

Array (
    [view] => Array (
        [status] => 1
        [version] => Array (
            [title] => My Title
            [content] => 
        )
        [lockVersion] => 1
        [save] => 
        [_token] => xxxxxxxxxxx
    )
)

It seems like maybe CKEditor's javascript should be updating the form's hidden textarea for this field (like mentioned for this AJAX related question ), but that is not happening, so it submits empty. If I prepolute my entity with a value for the content field, eg $view->getVersion()->setContent('Default Content') that is what is persisted to the database, even if I've entered another string in the CKEditor.

I assume this bundle should just "work" out of the box though, so I'm not sure what I'm doing wrong.

So how does the CKEditor work in this bundle? Is it supposed to update the hidden textarea field dynamically via javascript? Because that's not happening...

I have created a simplified demo form with only two ckeditor fields, if you want to see it in action: [link no longer active]

Answer 1

Looking into the HTML being generated for the textarea. The <textarea> is wrapped in a div element that has the same ID as the textarea itself. This is confusing ckeditor as to which element to update.

My guess is that you are using bootstrap and the bootstrap bundle for symfony override the form templates to add the classes and that's where the conflict comes.

Based on your code, I would add something like:

{% block widget_container_attributes %}
    {% if id is not empty %}
       {% set id = id ~ '_container' %}
    {% endif %}
    {% set attr = attr|merge({'class': (attr.class|default('') ~ ' form-group')|trim}) %}
    {{ parent() }}
{% endblock widget_container_attributes %}

You might as well consider this bundle if you will use bootstrap heavily.

Answer 2

I have used this bundle on the back end. Did you configured this bundle in your config.yml file? Here my configuration.

ivory_ck_editor:
    default_config: cke_config
    configs:
        cke_config:
            filebrowserBrowseRoute: admin_sonata_media_media_browser
            filebrowserImageBrowseRoute: admin_sonata_media_media_browser
            # Display images by default when clicking the image dialog browse button
            filebrowserImageBrowseRouteParameters:
                provider: sonata.media.provider.image
            filebrowserUploadRoute: admin_sonata_media_media_upload
            filebrowserUploadRouteParameters:
                provider: sonata.media.provider.file
            # Upload file as image when sending a file from the image dialog
            filebrowserImageUploadRoute: admin_sonata_media_media_upload
            filebrowserImageUploadRouteParameters:
                provider: sonata.media.provider.image
                context: default-context # Optional, to upload in a custom context
            allowedContent : true

The bundle has option allowedContent : true . I think it will help you.