在奏鸣曲的嵌套模式 CRUD 中打开时未加载 Ckeditor

Ckeditor not loaded when opened in nested modal crud in sonata

环境

PHP版本:

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-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 软件包:

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

Chrome 控制台出错:

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

主题

CkEditor 无法在模态 CRUD 中工作

重现步骤

我有一个实体 在它的 crud 模板中有一个 ckeditor。也有可能从模态 cruds 创建嵌套实体,其中一个有另一个 ckeditor。

Main crud ckeditor 工作正常,当我打开一个里面有 ckeditor 的模式时也工作正常。但是,如果我关闭此模态,然后从主 crud 中再次打开它 windows,我只会看到文本区域,而 Ckeditor 不会充电。

预期结果

在所有模态中工作的 Ckeditor

实际结果

第二次打开模式时,Ckeditor 不收费。

在错误日志中有一个 URL 被返回:https://ckeditor.com/docs/ckeditor4/latest/guide/dev_errors.html#editor-destroy-iframe. This error means that you first remove the DOM for the editor (e.g. by destroying the modal first) and then you try to destroy the editor by calling CKEditor.destroy() method while it should be the other way around - you should destroy the dialog only after the editor instance is fully destroyed. You can used instanceDestroyed 事件,例如

CKEDITOR.on( 'instanceDestroyed', function( event ){
    //Call your destroy custom dialog code here.
});

感谢您的回答 j.swiderski,在这种情况下,模态由 Sonata 管理,但我找到了一个可能的问题解决方案:

在 DoctrineORMAdminBundle 中,在文件 doctrine-orm-admin-bundle/src/Resources/views/CRUD/edit_orm_many_association_script.html.twig 中我们有以下函数:

    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');
        }
    }

只有当 id 不存在时才会追加对话框,一旦你打开一个模态 window id 就被设置了,所以如果你打开另一个 id 就不会发生,奏鸣曲也不会将对话框模态附加到文档主体。因此,从条件 Ck 编辑器中提取附加功能总是有效的:

    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');
    }