Search code examples
phpckeditorsonata-admin

Ckeditor not loaded when opened in nested modal crud in sonata


Environment

PHP version:

PHP 7.2.14 (cli) (built: Jan 11 2019 01:23:39) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.14, Copyright (c) 1999-2018, by Zend Technologies

Sonata packages:

sonata-project/admin-bundle              3.45.1 The missing Symfony Admin Generator
sonata-project/block-bundle              3.15.0 Symfony SonataBlockBundle
sonata-project/cache                     2.0.1  Cache library
sonata-project/core-bundle               3.16.2 Symfony SonataCoreBundle
sonata-project/datagrid-bundle           2.5.0  Symfony SonataDatagridBundle
sonata-project/doctrine-extensions       1.2.0  Doctrine2 behavioral extensions
sonata-project/doctrine-orm-admin-bundle 3.8.3  Symfony Sonata / Integrate Doctrine ORM into the SonataAdminBundle
sonata-project/easy-extends-bundle       2.5.0  Symfony SonataEasyExtendsBundle
sonata-project/exporter                  2.0.1  Lightweight Exporter library
sonata-project/formatter-bundle          3.5.0  Symfony SonataFormatterBundle
sonata-project/media-bundle              3.19.1 Symfony SonataMediaBundle
sonata-project/user-bundle               4.3.0  Symfony SonataUserBundle

Symfony packages:

symfony/assetic-bundle     v2.8.2  Integrates Assetic into Symfony2
symfony/monolog-bundle     v3.1.2  Symfony MonologBundle
symfony/phpunit-bridge     v4.2.7  Symfony PHPUnit Bridge
symfony/polyfill-apcu      v1.11.0 Symfony polyfill backporting apcu_* functions to lower PHP versions
symfony/polyfill-ctype     v1.11.0 Symfony polyfill for ctype functions
symfony/polyfill-iconv     v1.11.0 Symfony polyfill for the Iconv extension
symfony/polyfill-intl-icu  v1.11.0 Symfony polyfill for intl's ICU-related data and classes
symfony/polyfill-intl-idn  v1.11.0 Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions
symfony/polyfill-mbstring  v1.11.0 Symfony polyfill for the Mbstring extension
symfony/polyfill-php56     v1.11.0 Symfony polyfill backporting some PHP 5.6+ features to lower PHP versions
symfony/polyfill-php70     v1.11.0 Symfony polyfill backporting some PHP 7.0+ features to lower PHP versions
symfony/polyfill-php72     v1.11.0 Symfony polyfill backporting some PHP 7.2+ features to lower PHP versions
symfony/polyfill-util      v1.11.0 Symfony utilities for portability of PHP codes
symfony/security-acl       v3.0.2  Symfony Security Component - ACL (Access Control List)
symfony/swiftmailer-bundle v3.2.6  Symfony SwiftmailerBundle
symfony/symfony            v3.4.26 The Symfony PHP framework
symfony/var-dumper         v4.2.7  Symfony mechanism for exploring and dumping PHP variables

Error in Chrome Console:

ckeditor.js:21 [CKEDITOR] Error code: editor-destroy-iframe.
(anonymous) @ ckeditor.js:21
p @ ckeditor.js:10
(anonymous) @ ckeditor.js:12
CKEDITOR.warn @ ckeditor.js:19
detach @ ckeditor.js:956
CKEDITOR.editor.editable @ ckeditor.js:400
destroy @ ckeditor.js:283
(anonymous) @ VM4698:12
dispatch @ jquery.js:4435
r.handle @ jquery.js:4121
trigger @ jquery.js:4350
(anonymous) @ jquery.js:4901
each @ jquery.js:374
each @ jquery.js:139
trigger @ jquery.js:4900
(anonymous) @ VM4698:49
j @ jquery.js:3099
add @ jquery.js:3145
n.fn.ready @ jquery.js:3378
(anonymous) @ VM4698:1
globalEval @ jquery.js:328
domManip @ jquery.js:5435
append @ jquery.js:5218
(anonymous) @ jquery.js:5333
n.access @ jquery.js:3491
html @ jquery.js:5300
success @ VM4688:139
j @ jquery.js:3099
fireWith @ jquery.js:3211
x @ jquery.js:8264
(anonymous) @ jquery.js:8605
load (async)
send @ jquery.js:8622
ajax @ jquery.js:8166
field_dialog_form_add_scdc125194a_reason @ VM4688:131
dispatch @ jquery.js:4435
r.handle @ jquery.js:4121
trigger @ jquery.js:4350
(anonymous) @ jquery.js:4901
each @ jquery.js:374
each @ jquery.js:139
trigger @ jquery.js:4900
start_field_dialog_form_add_scdc125194a_reason @ VM4688:263
onclick @ create:1
ckeditor.js:21 [CKEDITOR] For more information about this error go to https://ckeditor.com/docs/ckeditor4/latest/guide/dev_errors.html#editor-destroy-iframe

Subject

CkEditor not working in modals CRUDs

Steps to reproduce

I have one entity witch has a ckeditor in it's crud template. also has the possibility to create nested entities from modal cruds, one of them has another ckeditor.

Main crud ckeditor works properly, and when I open a modal with a ckeditor inside also works properly. But, if I close this modal, and open it again from the main crud windows, I only see the text area and Ckeditor is not charge.

Expected results

Ckeditor working in all modals

Actual results

Ckeditor does not charge second time the modal is opened.


Solution

  • Thanks for the answer j.swiderski, modals are managed by Sonata in this case, but I found a possible solution for the Issue:

    In DoctrineORMAdminBundle, in file doctrine-orm-admin-bundle/src/Resources/views/CRUD/edit_orm_many_association_script.html.twig we have the following function:

        function initialize_popup_{{ id }}() {
            // initialize component
            if (!field_dialog_{{ id }}) {
                field_dialog_{{ id }}         = jQuery("#field_dialog_{{ id }}");
                field_dialog_content_{{ id }} = jQuery(".modal-body", "#field_dialog_{{ id }}");
                field_dialog_title_{{ id }}   = jQuery(".modal-title", "#field_dialog_{{ id }}");
    
                // move the dialog as a child of the root element, nested form breaks html ...
                jQuery(document.body).append(field_dialog_{{ id }});
    
                Admin.log('[{{ id }}|field_dialog] move dialog container as a document child');
            }
        }
    

    The append of the dialog will only happen if the id does not exist, once you open a modal window the id is set, so if you open another one the condition will not occur and sonata will not append the dialog modal to document Body. So, pulling out the append function from the condiction Ck editor works always:

        function initialize_popup_{{ id }}() {
            // initialize component
            if (!field_dialog_{{ id }}) {
                field_dialog_{{ id }}         = jQuery("#field_dialog_{{ id }}");
                field_dialog_content_{{ id }} = jQuery(".modal-body", "#field_dialog_{{ id }}");
                field_dialog_title_{{ id }}   = jQuery(".modal-title", "#field_dialog_{{ id }}");
            }
    
                // move the dialog as a child of the root element, nested form breaks html ...
                jQuery(document.body).append(field_dialog_{{ id }});
    
                Admin.log('[{{ id }}|field_dialog] move dialog container as a document child');
        }