Reply To: Custom body class setting for WYSIWYG fields

• John Huebner

• October 13, 2017 at 4:46 am

Here is a bit of code that can be used to target specific tinyMCE edtors that I’ve used to detect changes in an editor in order to trigger other events. I don’t know if this will help anyone or not.

jQuery(document).ready(function($){
  
  // add an action to a wysiwyg field
  // this function will fire every time a tinyMCE editor is initialized
  tinyMCE.on('addEditor', function(e) {
    
    // this makes sure it is an acf editor
    if (typeof(e.editor) == 'undefined' || !e.editor.id.match(/^acf-editor/)) {
      // not an acf wysiwyg field
      return
    }
    // get the text area of the acf field matching the id
    // and make sure that the field key matches the one we want
    // to add the action to
    var $field_key = $('#'+e.editor.id).closest('.acf-field').data('key');
    
    // see if it is the field key of the field we want to deal with
    if ($field_key != 'field_58923ed03766b') {
      // not our field
      return;
    }
    
    // this is the bit that adds a tigger on the input of the editor
    var object = $('#'+e.editor.id);
    e.editor.on('input', function(ed) {
      // trigger the action we want to act on
      object.trigger('input');
    });
    
  }); // end tinyMCE.on
  
}); // end ready function