Support

Account

Home Forums Feature Requests Set WYSIWYG Height

Solved

Set WYSIWYG Height

    • Cjameek

    • August 14, 2016 at 2:31 am

    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.

    • James

    • August 14, 2016 at 3:39 pm

    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.

    • James

    • September 5, 2016 at 12:46 pm

    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 ๐Ÿ™‚

    • yeetien

    • June 17, 2017 at 12:49 pm

    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/)

    • AdamACF

    • March 27, 2018 at 12:14 pm

    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.

    • stiand

    • April 5, 2018 at 9:17 pm

    I solved this with acf/render_field_settings/type=wysiwyg and acf/render_field/type=wysiwyg, like this: https://gist.github.com/stianandreassen/6dc87c88c43b2bc43d0ea1a94bd5cd1e

    With this I get a number field on each WYSIWYG where I can define the desired height for the Editor.

  • @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.

  • Thx Kensley!

  • 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;
      }
    }
Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.