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, e.g. $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]

The value that gets set (or stays empty) in the hidden textarea for that field, is the value that gets submitted for form processing, e.g. `[view][version][content] = ''`. So this seems like a javascript issue to me. Are there perhaps other javascript functions that are dependent which aren't executing? — Chadwick Meyer, May 13 '14 at 18:15

Ramy Nasr · Accepted Answer · 2014-05-14T20:03:00.843

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.

edited May 14 '14 at 20:03

answered May 13 '14 at 20:50

Ramy Nasr

2,367
20
24

I have tested with the field type as "textarea" and the entire application works fine, data is submitted in $_POST and persisted to database. When the field is 'ckeditor' the editor appears and works well. But it simply does not submit anything. The reason it doesn't submit is because it is not part of the form, it is in an iframe. And the data from the iframe is not copied into the hidden textarea (which is what I **assume** needs to happen). I am still trying to confirm what is "normal" behavior for submitting the ckeditor field. – Chadwick Meyer May 13 '14 at 21:18
I've updated the question with how the form is defined (nothing special). – Chadwick Meyer May 13 '14 at 21:20
I did as you suggested and tested setting the config to disable ckeditor. That makes the fields text areas, and they submit with the value fine. As my manual tests did as well. My simple example shows how this doesn't work for ckeditor fields though... – Chadwick Meyer May 13 '14 at 21:26
Please try the solution I added to the answer. Let me know if it works. – Ramy Nasr May 13 '14 at 21:55
Thanks for the suggestion. I entered text on my test page, ran that function in the console (same as clicking right?), and it replaced the input with a div that had the content in it. But of course when this is submitted, there are no input fields to submit, so the $_POST is empty. You can try it and see. – Chadwick Meyer May 14 '14 at 18:27
But I do think the problem is that the ckeditor data is not injecting into the textarea input. When is that supposed to happen in a normal ckeditor instance? Does anyone have a demo of this working somewhere? – Chadwick Meyer May 14 '14 at 18:29
You are 100% correct. I've added the relevant form twig template to your answer for your reference (edit however you want). In order to add bootstrap's form-group to the container, these custom values were set in a custom twig form template. The first one simply adds form-group to the widget container attributes (which isn't a problem), but the second one adds the {{ block('widget_container_attributes') }} to the div, which is what duplicates the id. So what should that be in order to get the class on the div but not the id? – Chadwick Meyer May 14 '14 at 19:25
I will accept your answer. But can you summarize the problem and solution so that others can easily use this as a resource? Thanks so much! I think it's okay to remove any of the initial troubleshooting so that the answer is concise, but your call. – Chadwick Meyer May 14 '14 at 20:04

score 0 · Answer 2 · edited Mar 16 '16 at 06:09

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.

I have added my config in my question for reference. Really, this should work out of the box, without special config. Just to be sure, I added `allowedContent: true` as you suggested, but that had a weird result! The ckeditor form on my test page (link in my question) suddenly had a small 200px wide textarea box floating INSIDE the ckeditor. You couldn't type text into either. — Chadwick Meyer, May 14 '14 at 18:18

Symfony Form Submits Empty Value for CKEditor Field using IvoryCKEditorBundle

2 Answers2