EasyAdmin中TextEditorField关联AssociationField后无法正常工作

问题详情 #

在EasyAdmin框架中，单独打开TextCrudController表单时，TextEditorField（富文本编辑器）功能完全正常，但将TextCrudController通过AssociationField::renderAsEmbeddedForm()嵌入到BlockCrudController后，富文本编辑器直接失效。Block与Text数据表的关联关系配置正常，仅编辑器功能出现异常。

涉及代码 #

TextCrudController代码 #

use EasyCorp\Bundle\EasyAdminBundle\Field\TextEditorField;

public function configureFields(string $pageName): iterable
{
    return [
        IdField::new('id')->hideOnForm(),
        AssociationField::new('lanqgue_id', '语言'),
        TextField::new('titre', '文本标题'),
        TextEditorField::new('contenu', '内容'),
    ];
}

BlockCrudController代码 #

use EasyCorp\Bundle\EasyAdminBundle\Field\TextEditorField;

public function configureFields(string $pageName): iterable
{
    return [
        IdField::new('id')->hideOnForm(),
        TextField::new('title', '区块名称'),
        AssociationField::new('text_id', '文本')
            ->renderAsEmbeddedForm(TextCrudController::class),
        AssociationField::new('image_id', '图片')
            ->renderAsEmbeddedForm(ImageCrudController::class),
        BooleanField::new('actif', '启用区块'),
    ];
}

解决方案 #

• 版本兼容性检查：确认使用的EasyAdmin版本（优先选择4.x稳定版）支持在嵌入式表单中加载富文本编辑器资源，部分旧版本存在嵌入式表单未自动引入关联字段依赖资源的bug。
• 手动加载编辑器资源：在BlockCrudController的configureCrud()方法中，强制引入CKEditor的CSS和JS资源（EasyAdmin默认使用CKEditor作为TextEditorField的编辑器）：

public function configureCrud(Crud $crud): Crud
{
    return parent::configureCrud($crud)
        ->addCssFiles(['bundles/easyadmin/vendor/ckeditor/ckeditor.css'])
        ->addJsFiles(['bundles/easyadmin/vendor/ckeditor/ckeditor.js']);
}

• 验证实体关联映射：检查text_id对应的实体关联注解（如Doctrine的@ManyToOne/@OneToOne）是否配置正确，嵌入式表单的字段名称必须与实体属性完全一致，避免因映射错误导致编辑器初始化失败。
• 排查JS冲突：打开浏览器开发者工具控制台，查看是否存在JavaScript报错。页面中其他组件的JS可能与CKEditor冲突，需针对性修复或调整资源加载顺序。

内容的提问来源于stack exchange，提问作者Lucka Pro