Lately I’ve been working on websites that require me to use WYSIWYG fields rather than text or textarea fields, and one thing that is a bit annoying about the WYSIWYG field is the inability to change the height. You can do this with the textarea field, and technically you can change the WYSIWYG height through css, but I wish there was an easy way to do that through the field options. Would help make the backend a little more compact for my clients.
Hi @cjameek
I’m afraid the only way to do it is by using CSS code. If you want it to be an option on the backend, please open a new ticket so your request can be passed directly to the plugin author. You can open a new ticket here: https://support.advancedcustomfields.com/new-ticket.
Thanks 🙂
Height of wysiwg is hardcoded in wysiwyg.php
Path\wp-content\plugins\advanced-custom-fields-pro\fields\wysiwyg.php:
255
256 // get height
257: $height = acf_get_user_setting('wysiwyg_height', 300);
258: $height = max( $height, 300 ); // minimum height is 300
You can’t easily change that with css because it produces inline css , viz –
<textarea id="acf-editor-gtg6gtg6gtg62" class="wp-editor-area" name="acf[field_gtg6gtg6gtg62]" style="height:300px;">wysiwyg content here</textarea>
Good thing is that wysiwyg.php looks like its primed to go for adding wysiwyg height via admin interface.
Hi @silverdarling
You should be able to do it like this:
add_action('acf/input/admin_head', 'my_acf_modify_wysiwyg_height');
function my_acf_modify_wysiwyg_height() {
?>
<style type="text/css">
.acf-field-1234567890abc iframe{
height: 600px !important;
}
</style>
<?php
}
Where acf-field-1234567890abc is the element ID of your WYSIWYG field.
Thanks 🙂
Hi @acf-support
Using CSS would prevent user from adjusting (dragging using mouse) the height.
Possible to create a filter for this?
Thanks!
Ditto what @yeetien said — would be nice to be able to resize while retaining ability for user to drag to adjust.
No solution from me… but wanted to weigh in – and say that I also find that I need a WYSIWYG field for a sentence or two / and the size of it makes the admin seem murky.
+1 for some ‘field grows to fill content’ option
+ 1 for an implementation of this in the UI.
Especially for this:
‘field grows to fill content’
Thanks for the suggestion.
This is how Ive handled fitting wysiwyg editors height to its content, with a fallback to a min height.
if ( typeof acf !== 'undefined' ) {
acf.add_action( 'wysiwyg_tinymce_init', function( ed, id, mceInit, $field ) {
// set height of wysiwyg on frontend
var minHeight = 200;
var mceHeight = $( ed.iframeElement ).contents().find( 'html' ).height() || minHeight;
if ( mceHeight < minHeight ) {
mceHeight = minHeight;
}
$( ed.iframeElement ).css( 'height', mceHeight );
} );
}
@jgregory – that’s sounds great. BUT – where would I put that? I rarely amend the WordPress admin side of things, so what .js file would that go in? Something along these lines? https://stackoverflow.com/questions/3326967/how-to-add-custom-javascript-to-wordpress-admin
@gregory @sherriff
thanks for code, and for asking the question . I don’t get where this fits either
@sheriffderek @silverdarling : @jgregory ‘s code is added with this technique: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/
But I’m still getting a 200px height component, although I set it to 100px 🙁
OK, combining that with
add_action('admin_head', 'admin_styles');
function admin_styles() {
?>
<style>
.acf-editor-wrap iframe {
min-height: 0;
}
</style>
<?php
}
?>
(in functions.php) solved it. (found it on this thread https://support.advancedcustomfields.com/forums/topic/how-to-set-a-custom-height-for-wysiwyg/)
Please please Elliot if you are reading this get gui control over the field added as soon as you can, its really inconsistent to not have it considering that the textarea field supports this.
@danielgc, Your simple style solution within the action admin_head, was all I needed. You can take things further by tracking down specific iframes on your posts and pages like so…
add_action('admin_head', 'admin_styles');
function admin_styles() {
?>
<style>
iframe[id^='wysiwyg-acf-field-favicon_'] {
min-height:40px;
}
</style>
<?php
}
?>
In my case, I’m targeting only the favicon fields on my WP admin pages, to have a height adjustment.
If you’re looking to auto-resize your WYSIWYG and textarea fields in ACF, I’ve made a plugin for that: https://wordpress.org/plugins/acf-autosize/
@moritzjacobs
Thanks!
I installed your plugin and it works perfectly!
I had the same problem and applied my own solution:
new AcfTextarea();
class AcfTextarea
{
public function __construct()
{
add_action('acf/render_field_settings', [$this, 'addSettingsForWysiwyg']);
add_filter('acf/render_field/type=wysiwyg', [$this, 'preRenderWysiwygField'], 0, 1);
}
/* ---
Functions
--- */
public function addSettingsForWysiwyg($field)
{
if ($field['type'] !== 'wysiwyg') return;
acf_render_field_setting($field, [
'label' => __('Limit height of TinyMCE?', 'lang'),
'name' => 'wpf_tinymce_low',
'type' => 'true_false',
'ui' => 1,
], true);
}
public function preRenderWysiwygField($field)
{
if (!isset($field['wpf_tinymce_low']) || !$field['wpf_tinymce_low']) return;
ob_start();
add_filter('acf/render_field/type=wysiwyg', [$this, 'afterRenderWysiwygField'], 20, 1);
}
public function afterRenderWysiwygField($field)
{
remove_filter('acf/render_field/type=wysiwyg', [$this, 'afterRenderWysiwygField'], 20, 1);
$output = ob_get_contents();
$output = str_replace('height:300px;', 'height:100px;', $output);
ob_end_clean();
echo $output;
}
}
@moritzjacobs I logged in just to say thank you and I love you 🙂
edit: left review on wordpress.org as well
https://wordpress.org/plugins/acf-autosize
It seems to create intermittent issues. Sometimes my WYSIWYG fields are 4x the viewport height. It’s on a good track, but I would be in favor of something in core.
+1 on just settling on a method and adding to to ACF core.
Just a “number of rows” for the textarea in the wysiwyg settings would be nice – we already have a toggle for media buttons, different toolbars, a “number of rows” would be perfectly natural there.
