EasyAdminBundle icon indicating copy to clipboard operation
EasyAdminBundle copied to clipboard

TinyMCE not initializing on "Add" form in EasyAdmin 4 with Symfony 7

Open ccachoulet opened this issue 1 year ago • 0 comments

Description Hello everyone when using TinyMCE via CDN in an EasyAdmin 4 project (running on Symfony 7), the WYSIWYG editor initializes correctly on both the add and edit pages. However, while the form can be submitted without issues on the edit page, the add page prevents form submission. The "Save" button is clicked, but no action is triggered, and the form is not submitted.

Environment Symfony Version: 7.x EasyAdmin Version: 4.x TinyMCE Version: Latest (loaded via CDN) PHP Version: 8.x Browser: Tested in Chrome and Firefox (latest versions)

Steps to Reproduce

{
    return $assets
        ->addJsFile('https://cdn.tiny.cloud/1/your-api-key/tinymce/7/tinymce.min.js') // CDN TinyMCE
        ->addJsFile('/assets/js/tinymce-init.js'); // Local initialization script
}
TextareaField::new('content', 'Contenu')
    ->hideOnIndex()
    ->setFormTypeOptions([
        'attr' => ['class' => 'tinymce'],  // Add TinyMCE class
    ]),
 document.addEventListener('DOMContentLoaded', function() {
    tinymce.init({
        selector: 'textarea.tinymce',
        toolbar_mode: 'floating',
        menubar: true,
        language: 'fr_FR',
        plugins: [
            'searchreplace', 'link', 'anchor', 'image', 'table', 'charmap', 'fullscreen', 'code', 'preview',
            'lists', 'help', 'wordcount', 'codesample'
        ],
        toolbar: 'cut copy paste pastetext | undo redo | searchreplace | selectall | link unlink anchor | ' +
                 'image | table | hr | charmap | fullscreen | code | preview print | ' +
                 'bold italic underline strikethrough subscript superscript | removeformat | ' +
                 'numlist bullist | outdent indent | blockquote | alignleft aligncenter alignright alignjustify | ' +
                 'blocks fontfamily fontsize | forecolor backcolor | help | codesample',
        height: 500,
        menubar: 'file edit view insert format tools table',
        branding: false,
    });

    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(event) {
            tinymce.triggerSave();
        });
    }
});

Additional Information It appears that the problem might be related to how EasyAdmin or Symfony handles the form validation or submission when TinyMCE is active on the add page, specifically. The form submission seems to be blocked or interrupted, but only when adding a new entity.

There could be a JavaScript or form handling issue that is unique to the add page context, or perhaps some incompatibility between EasyAdmin, TinyMCE, and form validation on newly created entities.

Potential Workaround In certain instances, manually triggering form submission via JavaScript (document.querySelector('form').submit()) works, but this is not a viable long-term solution.

Could you provide any guidance or suggestions on resolving the form submission issue when using TinyMCE on the add form?

Thank you for your time and assistance in resolving this issue!

ccachoulet avatar Oct 01 '24 05:10 ccachoulet