Skip to content

Instantly share code, notes, and snippets.

@courtneymyers
Created February 28, 2018 18:36
Show Gist options
  • Save courtneymyers/eb51f918181746181871f7ae516b428b to your computer and use it in GitHub Desktop.
Save courtneymyers/eb51f918181746181871f7ae516b428b to your computer and use it in GitHub Desktop.
Reduces initial height of Advanced Custom Fields WYSIWYG fields to 100px, and enables autoresizing of WYSIWYG field, as text is entered. Best practice would be to include this function in a site-specific plugin.
<?php
/*
* -----------------------------------------------------------------------------
* Advanced Custom Fields Modifications
* -----------------------------------------------------------------------------
*/
function PREFIX_apply_acf_modifications() {
?>
<style>
.acf-editor-wrap iframe {
min-height: 0;
}
</style>
<script>
(function($) {
// (filter called before the tinyMCE instance is created)
acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id, $field) {
// enable autoresizing of the WYSIWYG editor
mceInit.wp_autoresize_on = true;
return mceInit;
});
// (action called when a WYSIWYG tinymce element has been initialized)
acf.add_action('wysiwyg_tinymce_init', function(ed, id, mceInit, $field) {
// reduce tinymce's min-height settings
ed.settings.autoresize_min_height = 100;
// reduce iframe's 'height' style to match tinymce settings
$('.acf-editor-wrap iframe').css('height', '100px');
});
})(jQuery)
</script>
<?php
}
/*
* -----------------------------------------------------------------------------
* WordPress hooks
* -----------------------------------------------------------------------------
*/
add_action('acf/input/admin_footer', 'PREFIX_apply_acf_modifications');
@courtneymyers
Copy link
Author

@commwork
Copy link

Very very cool, thanks a lot!

@Leafy3311
Copy link

Works great! Thanks!

@uxjw
Copy link

uxjw commented May 12, 2019

Thanks! This is working great in a repeater that was way too tall before.

@gnotev
Copy link

gnotev commented Aug 12, 2020

Working great here too, Thanks!
Should be a parameter for this in ACF admin...

@E-VANCE
Copy link

E-VANCE commented Feb 15, 2021

Awesome, much appreciated!

Since I make heavy use of the 'delay'-option ("Defers initialization of editor until editor is clicked instead of on page load. This is useful to speed up load times") I added a line that targets the initial Textarea accrodingly – the small height is compensated by a vertical scroll and on init the TinyMCE-box automatically resizes so no downsides there IMHO...

This is my modified Script:

<?php

/*
 * -----------------------------------------------------------------------------
 * Advanced Custom Fields Modifications
 * -----------------------------------------------------------------------------
*/
function PREFIX_apply_acf_modifications() {
?>
  <style>
    .acf-editor-wrap iframe {
      min-height: 0;
    }
  </style>
  <script>
    (function($) {
      // reduce placeholder textarea height to match tinymce settings (when using delay-setting)
      $('.acf-editor-wrap.delay textarea').css('height', '100px');
      // (filter called before the tinyMCE instance is created)
      acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id, $field) {
        // enable autoresizing of the WYSIWYG editor
        mceInit.wp_autoresize_on = true;
        return mceInit;
      });
      // (action called when a WYSIWYG tinymce element has been initialized)
      acf.add_action('wysiwyg_tinymce_init', function(ed, id, mceInit, $field) {
        // reduce tinymce's min-height settings
        ed.settings.autoresize_min_height = 100;
        // reduce iframe's 'height' style to match tinymce settings
        $('.acf-editor-wrap iframe').css('height', '100px');
      });
    })(jQuery)
  </script>
<?php
}

/*
 * -----------------------------------------------------------------------------
 * WordPress hooks
 * -----------------------------------------------------------------------------
*/
add_action('acf/input/admin_footer', 'PREFIX_apply_acf_modifications');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment