FOS CkEditor integration doesn't convert textarea fields

LeanderFS commented 5 years ago

I implemented the FOS CKEditor based on the guidelines found on the official symfony docs and designated a form field to show as ckeditor. I've also tried type: 'fos_ckeditor' with the same results.

        Page:
            class: CmsBundle\Entity\Page
            list:
                fields:
                    - 'title'
                    - 'slug'
                    - 'user'
                    - 'lastUpdate'
            form:
                fields:
                    - { property: 'title', type: 'text' }
                    - { property: 'content', type: 'FOS\CKEditorBundle\Form\Type\CKEditorType' }

I expected the textarea to change into a Ck Editor Type but the regular textarea keeps showing. It seems the ckeditor javascript and stylesheets are not getting loaded by symfony. I do see the form field has gotten a 'field-ckeditor' class so I assume the form type is at least doing something.

My environment consists of a Symfony 3.4 installation and I'm using webpack encore for the asset management. Also no errors/warnings in the log files.

To Reproduce Install a Symfony 3.4 environment, create an entity and initialize easy admin with a field set to fos_ckeditor. Easy Admin version 1.17

javiereguiluz commented 5 years ago

I've just installed FOSCkEditor in a EasyAdmin app successfully. Basically you need to run these three commands:

$ composer require friendsofsymfony/ckeditor-bundle
$ ./bin/console ckeditor:install
$ ./bin/console assets:install --symlink

This worked for me ... but please tell me if the error persists. Thanks!

alterphp commented 5 years ago

Any log in the browser console ? It may come from JS layer...

LeanderFS commented 5 years ago

I will attempt to replicate the bug later today, I haven't had the time yet to do so.

@alterphp No errors/warnings in the console, it doesn't seem to come from the javascript layer as the javascript files aren't being included on the easyadmin pages.

javiereguiluz commented 5 years ago

If the JS files haven't been included, maybe they don't exist. When you run the ckeditor:install command, do you see something like this?

$ ./bin/console ckeditor:install

----------------------
| CKEditor Installer |
----------------------

 // Downloading CKEditor ZIP archive from "https://github.com/ckeditor/ckeditor-releases/archive/full/latest.zip"
 1713963/1713963 [============================] 100%

 // Extracting CKEditor ZIP archive to "vendor/friendsofsymfony/ckeditor-bundle/src/Resources/public"
 521/521 [============================] 100%

 // Dropping CKEditor ZIP archive "/private/var/folders/p7/b39_689x3lldn1r49x1dc2v40000gn/T/ckeditor-full-latest.zipWCu64z"

 [OK] - CKEditor has been successfully installed...

vkhramtsov commented 5 years ago

It looks like issue actually exists only with v2 of friendsofsymfony/ckeditor-bundle. Integration with first version is ok

ipf commented 5 years ago

Adding @FOSCKEditor/Form/ckeditor_widget.html.twig. to twig.form_themes as described in https://github.com/FriendsOfSymfony/FOSCKEditorBundle/issues/161#issue-387285347 resolves the issue for me

kunicmarko20 commented 5 years ago

Since it was added to the docs https://github.com/FriendsOfSymfony/FOSCKEditorBundle/pull/162, I guess this can be closed?

javiereguiluz commented 5 years ago

@kunicmarko20 thanks for the info! We're improving our docs too about this in #2729.

pal-ecl commented 4 years ago

I have the same issue as LeanderFS. I'm trying to use FOSCKEditorBundle with easyadmin, following Symfony doc : https://symfony.com/doc/master/bundles/EasyAdminBundle/integration/ivoryckeditorbundle.html But the regular textarea keeps showing instead of the CKeditor one. I tried to add '@FOSCKEditor/Form/ckeditor_widget.html.twig' to twig.form_themes, and clear the cache, but nothing changed. I use symfony 4. Any tips ? Thanks

jjsmclaughlin commented 4 years ago

I have the same problem as pal-ecl above. Has something recently changed which would cause the ckeditor_widget.html.twig fragment to be not loaded, or effectively ignored by EasyAdmin's templates?

A few observations:

My twig: form_themes can contain garbage without causing an error on a 'create' EasyAdmin page, but not on an 'edit' EasyAdmin page.
I can confirm that the ckeditor javascript is present at http://localhost:8000/bundles/fosckeditor/ckeditor.js by navigating there in a browser. But EasyAdmin pages do not call to this URL to load it.
View Source on an EasyAdmin 'edit' page reveals that the only occurrence of the string 'cked' is on the div containing the form field.

The basic problem seems to be that nothing is pulling in the ckeditor javascript. I guess this must have worked recently because the docs are very explicit about what to do, and there are Stack questions about this from late last year, and queries above, where this was fixed.

vkhramtsov commented 4 years ago

@pal-ecl, @jjsmclaughlin Have you tried to add form themes to easyadmin design like here https://github.com/PHP-Belarus/php.of.by/blob/master/src/PhpOfBy/AdminBundle/Resources/config/easy_admin_config.yaml#L2 ? It works for me. Additional information you can find here https://github.com/EasyCorp/EasyAdminBundle/issues/2958

jjsmclaughlin commented 4 years ago

@pal-ecl, @jjsmclaughlin Have you tried to add form themes to easyadmin design like here https://github.com/PHP-Belarus/php.of.by/blob/master/src/PhpOfBy/AdminBundle/Resources/config/easy_admin_config.yaml#L2 ? It works for me. Additional information you can find here #2958

This solves the problem for me. Thank you so much! :) I think the docs should be updated to include this. At present they advise to add the form template into twig:form_templates, which at least for me did not work.

pal-ecl commented 4 years ago

@pal-ecl, @jjsmclaughlin Have you tried to add form themes to easyadmin design like here https://github.com/PHP-Belarus/php.of.by/blob/master/src/PhpOfBy/AdminBundle/Resources/config/easy_admin_config.yaml#L2 ? It works for me. Additional information you can find here #2958

This works for me too, thanks a lot !

adriendarki commented 4 years ago

hi ! I confirm this problem! it breaks my local and production... it's very disturbing as modifications ^^'' now you need add `design: form_theme: # Both themes are for ckeditor integration

"@EasyAdmin/form/bootstrap_4.html.twig"
"@FOSCKEditor/Form/ckeditor_widget.html.twig"`

enjoy another !

supermalang commented 4 years ago

@pal-ecl, @jjsmclaughlin Have you tried to add form themes to easyadmin design like here https://github.com/PHP-Belarus/php.of.by/blob/master/src/PhpOfBy/AdminBundle/Resources/config/easy_admin_config.yaml#L2 ? It works for me. Additional information you can find here #2958

This is the solution. Thank you so much! :) I think the docs should be updated.

vfsoraki commented 4 years ago

@pal-ecl, @jjsmclaughlin Have you tried to add form themes to easyadmin design like here https://github.com/PHP-Belarus/php.of.by/blob/master/src/PhpOfBy/AdminBundle/Resources/config/easy_admin_config.yaml#L2 ? It works for me. Additional information you can find here #2958

This worked for me too, after like an hour of headache ...

utopmag commented 4 years ago

Symfony 5 & easy_admin I don't undestand why ckeditor doesn't convert textarea field type: 'FOS\CKEditorBundle\Form\Type\CKEditorType' type: 'fos_ckeditor' or type: 'ckeditor' why?

vkhramtsov commented 4 years ago

@utopmag Have you read comments above? May be you need to add form themes for easyadmin design configuration

utopmag commented 4 years ago

Symfony 5 & easy_admin CKeditor doesn't convert textarea field type: 'FOS\CKEditorBundle\Form\Type\CKEditorType' type: 'fos_ckeditor' or type: 'ckeditor' I don't undestand why? I have read comments above and it seems to be ok : easy_admin: site_name: 'Hello' design: form_theme:

'@EasyAdmin/form/bootstrap_4.html.twig'
'@FOSCKEditor/Form/ckeditor_widget.html.twig'

But no action?

utopmag commented 4 years ago

Hello Thanks All seems to be ok But no action whith ckeditor. I have no solution. Can you help me? easy_admin: site_name: 'Hello' design: form_theme:

'@EasyAdmin/form/bootstrap_4.html.twig'
'@FOSCKEditor/Form/ckeditor_widget.html.twig'

Le ven. 28 févr. 2020 à 11:50, Vladimir Khramtsov notifications@github.com a écrit :

@utopmag https://github.com/utopmag Have you read comments above? May be you need to add form themes for easyadmin design configuration

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/EasyCorp/EasyAdminBundle/issues/2486?email_source=notifications&email_token=AOR3KOQJWNVRU2LKZGIKKIDRFDT75A5CNFSM4GIFCJAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENIDQYY#issuecomment-592459875, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOR3KOTBQPYSQNEDPUNKBJDRFDT75ANCNFSM4GIFCJAA .

rzp789 commented 4 years ago

hello everybody, I did your solution one month ago it's was good but now it's doesn't want to function. Do you have the same problem ?

filamatondo commented 2 years ago

Bonjour ! j'ai le même; seulement moi j'ai un message d'erreur qui : Attempted to load class "FOSCKEditorBundle" from namespace "FOS\CKEditorBundle". Did you forget a "use" statement for another namespace?

Tentative de chargement de la classe "FOSCKEditorBundle" à partir de l'espace de noms "FOS\CKEditorBundle". Avez-vous oublié une instruction "use" pour un autre espace de noms ?

j'ai bien vérifié mais j'ai toujours ce message d'erreur, en plus l'erreur me bloque pour faire autre chose.

EasyCorp / EasyAdminBundle

FOS CkEditor integration doesn't convert textarea fields #2486