How to programmatically populate a TinyMCE Advanced Custom Fields field in WordPress

The Advanced Custom Fields plugin for WordPress is invaluable. It has filled a gap in WordPress for the better part of a decade and is one of the first plugins that I install in a new WordPress installation (I have a lifetime developer licence).

The ACF plugin provides a Javascript API available using acf it has numerous methods for interacting with ACF fields in your WordPress installation. You can programmatically get and set field values, observe for changes and react accordingly.

However, I encountered a use case recently where I wanted to programmatically update a WYSIWYG editor field. Using the standard acf.set method does not visibility update this value. To do this, we need to interact with the TinyMCE editor instance call the TinyMCE editor method setContent.

function updateAcfTinymce(fieldId, value) {
    const f = acf.getField(fieldId);
    const tinyID = f.$el.find("textarea").attr("id");
    const tinyInstance = tinyMCE.editors[tinyID];
    
    tinyInstance.setContent(value);
}

I’ve created a simple function you can use which takes the field key (the name of the field or the field key) and the second the value you want to set.