Change background color of editor for one of multiple Wysiwyg fields

• jnish11

• March 29, 2025 at 12:35 pm

I’ve created an ACF group containing three Wysiwyg fields. One of these three needs to have a custom background color (black) and custom text color (white).

I was able to successfully apply custom styles by using this filter in my functions.php file:

function custom_editor_style ($mceInit) {
  $background_color = '000000';
  $color = 'FFFFFF';
  $styles = '.mce-content-body { background-color: #' . $background_color . '; color: #' . $color . ';}';

  if (!isset($mceInit['content_style'])) {
    $mceInit['content_style'] = $styles . ' ';
  } else {
    $mceInit['content_style'] .= ' ' . $styles . ' ';
  }

  return $mceInit;
} 
add_filter ('tiny_mce_before_init', 'custom_editor_style'); 

I attempted to target a specific editor by adding the ID of the container iframe as a parent, but it didn’t take:

$styles = '#acf-editor-77_ifr .mce-content-body { background-color: #' . $background_color . '; color: #' . $color . ';}';

Is there a way to target a single Wysiwyg instance among others with custom editor styles?

Any help appreciated!