Magento 2.4.7 Multiple WYSIWYG Editors Not Working? Values Not Saving After Category Save

Recently, while working on a Magento 2.4.7-p3 project, I encountered an issue where multiple custom WYSIWYG category attributes were displayed correctly in the Magento Admin, but only one field was saving its value.

After spending time debugging attribute configuration, UI Component XML, category save functionality, and database persistence, I discovered that this is actually a known Magento 2.4.7 issue related to multiple TinyMCE/WYSIWYG editors.

The Issue

I had added multiple custom category attributes using the WYSIWYG form element:

top_breadcrumb_description
middle_description
bottom_description

Everything appeared to be configured correctly, including:

• Category EAV attributes
• Data scopes
• UI Component XML configuration
• Backend save process
• Database persistence

However, after saving the category:

• Only the first WYSIWYG field retained its content.
• The second WYSIWYG field was saved as an empty value.
• If I changed the sort order, the field appearing first would save correctly while the other field became empty.

Symptoms

• Only one WYSIWYG field saves successfully.
• Other WYSIWYG fields lose content after saving.
• No errors are visible in Magento logs.
• Attributes exist correctly in the database.
• Issue occurs in Magento 2.4.7 and Magento 2.4.7-p3.

Example Configuration

My category form contained multiple WYSIWYG fields similar to the following:

<field name="top_breadcrumb_description" formElement="wysiwyg">
    ...
</field>

<field name="middle_description" formElement="wysiwyg">
    ...
</field>

The configuration looked perfectly valid, yet only one editor saved its value.

Root Cause

After researching further, I found that this is a known Magento 2.4.7 issue affecting pages with multiple TinyMCE/WYSIWYG editors.

Due to an issue in Magento's UI Component implementation, only the first editor instance is properly synchronized during form submission. As a result, subsequent editor values may not be included in the request payload, causing them to be saved as empty values.

Official Magento Fix

Adobe has already fixed this issue in Magento source code.

The official fix was introduced in the following commit:

1933e66b2bea830d866dd850fdac22c2164ac22d

Official Magento Fix Commit:
https://github.com/magento/magento2/commit/1933e66b2bea830d866dd850fdac22c2164ac22d

Files Modified by the Fix

The fix updates the following Magento core file:

vendor/magento/module-ui/view/base/web/js/form/element/wysiwyg.js

The issue is caused by incorrect handling of multiple TinyMCE editor instances. The official Magento fix changes the logic inside the processAdded() method.

You can quickly verify the fix by applying the following change directly in the vendor file:

function processAdded(node) {
    _.each(watchers.selectors, function (listeners, selector) {
        for (let data of listeners) {
            if (!data.ctx.contains(node) || !$(node, data.ctx).is(selector)) {
-               break;
+               continue;
            }

            data.fn(node);
        }
    });
}

The change replaces break with continue, ensuring that Magento continues processing all matching editor instances instead of stopping after the first one.

This allows multiple WYSIWYG editors on the same form to initialize and synchronize correctly during form submission.

Code Changes Introduced by the Fix

The Magento team updated the TinyMCE initialization logic and editor synchronization process.

The fix ensures that all editor instances are properly initialized and their values are synchronized before form submission.

This resolves scenarios where:

• Only the first editor value is submitted.
• Subsequent WYSIWYG fields become empty after save.
• Custom category description attributes fail to persist data.
• Custom admin forms with multiple WYSIWYG fields behave inconsistently.

Quick Verification Using Vendor Files

If you want to verify that this Magento core bug is causing the issue in your project, temporarily apply the above change to:

vendor/magento/module-ui/view/base/web/js/form/element/wysiwyg.js

After making the change, execute the following commands:

bin/magento setup:upgrade
bin/magento cache:clean
bin/magento cache:flush
bin/magento setup:static-content:deploy -f

Refresh the Magento Admin panel and test saving multiple WYSIWYG fields again.

If all editor values save correctly, you have successfully confirmed that the issue was caused by the Magento 2.4.7 core bug.

Recommended Production Approach

Although modifying vendor files is useful for verification, it should never be considered a permanent solution.

For production environments, it is recommended to:

• Apply the Magento fix using a Composer patch.
• Upgrade to a Magento version that already includes the fix.
• Avoid maintaining custom vendor modifications.

References

• Magento Stack Exchange Discussion – Multiple WYSIWYG Editor Not Working in Magento 2.4.7
• Magento Official Fix Commit (1933e66b2bea830d866dd850fdac22c2164ac22d)

Conclusion

If you are facing an issue where only the first WYSIWYG attribute saves while other editor fields become empty after saving a category or custom entity in Magento 2.4.7 or Magento 2.4.7-p3, you are likely encountering a Magento core bug rather than a configuration issue.

The issue is caused by improper synchronization of multiple TinyMCE editor instances during form submission.

Applying Adobe's official fix resolves the problem and allows all WYSIWYG editors to save correctly.

Hopefully, this article saves you the debugging time that I spent trying to identify the root cause.

Continue Reading