• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

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

Wordpress · October 21, 2022

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.

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Theresa
Theresa
1 month ago

Hi I am wondering if one field key is a color picker to use for heading and link styles in the wysiwyg, how would you add this into the function?

0

Primary Sidebar

Popular

  • The Quad Cortex Desktop Editor is Finally Announced
  • Thoughts on the Flipper Zero
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Wild Natural Deodorant Review

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz