Reset all the ACF WYSIWYG fields inside a field group using JS

You can find the JS code below if you are just looking for them. If you are interested in the explanation continue reading.

function bks_add_custom_js()
{
    ?>
    <script type="text/javascript">
        (function($) {
            acf.add_action('ready', function( $el ){

                function resetWYSIWYG(fieldGroup) {
                    const parent = $(fieldGroup);

                    const wysiwygs = parent.find('[data-type="wysiwyg"]');

                    $(wysiwygs).each(function(index, wysiwyg) {
                        let tinyID = $(this).find("textarea").attr("id");
                        let tinyInstance = tinyMCE.editors[tinyID];
                        if(tinyInstance) {
                            tinyInstance.setContent('');
                        }
                    });
                }

            // Reset all WYSIWYG for Field group haivng 'group_60d191ab7f442' id
            resetWYSIWYG('#acf-group_60d191ab7f442');
            });
        })(jQuery);
    </script>
    <?php
}

add_action('acf/input/admin_footer', 'bks_add_custom_js');

We have used acf/input/admin_footer action from acf to add the custom code on the footer of our page, wherever the acf fields are shown.

Inside the function we have written our code inlined. Once the dom is ready we use action ready from ACF JS Api .

After that we define our resetWYSIWYG function. I have commented what each line does.

function resetWYSIWYG(fieldGroup) {
     // Get main field group.
    const parent = $(fieldGroup);

    // Find all the items where data-type attribute has value of wysiwyg
    const wysiwygs = parent.find('[data-type="wysiwyg"]');

    // Loop around the found wysiwygs
    $(wysiwygs).each(function(index, wysiwyg) {
        // Find ID of the wysiwyg
        let tinyID = $(this).find("textarea").attr("id");
        // Get instance of tinyMCE
        let tinyInstance = tinyMCE.editors[tinyID]; 
        // If you get instance then use setContent to set the vaule empty.
        if(tinyInstance) {
            tinyInstance.setContent('');
        }
    });
}

Finally you can call the function with your group field id like so. As we are targeting id ACF adds acf- before group_key, so make sure you add that when you are specifying selector for the group.

resetWYSIWYG("#acf-group_60d191ab7f442");

I hope this snippet helped you. 😊

Let me know if you have any question below in the comment and I will try my best to answer them.

ACF : Reset all WYSIWYG inside a field group using JS

Comments

WordPress

Deploying Sage(WordPress Starter theme) to your host using Github Actions

More from this blog

🕷️ ScrapeWave: Web Scraping using Puppeteer in a Docker container with a UI dashboard and database.

How to Upgrade to a non-LTS Ubuntu [23.10] ?

Must Read's

Creating a custom webhook in WordPress to get data from third part services

Command Palette

Comments

WordPress

Deploying Sage(WordPress Starter theme) to your host using Github Actions

More from this blog