How to set WYSIWYG editor width within wp_editor() function?

by Derfder Last Updated May 18, 2018 04:08 AM

This is my current code:

$initial_data = $this->options['my_plugin_editor'];
$settings = array(
    'quicktags' => array('buttons' => 'em,strong,link',),
    'quicktags' => true,
    'tinymce' => true,
    'textarea_rows' => 20,
);
$id = 'my_plugin_editor_options[my_plugin_editor]';
wp_editor($initial_data,$id,$settings);

The problem is I am unable to set the width of the editor. I can set the height 'textarea_rows' => 20, but I am not aware of a way how to set the width(cols).

If I am using a standard textarea without an editor, this is working well cols="120"

How to set cols in wp_editor function?

Tags : wp-editor wysiwyg

Answers 4

I'm not sure if you even can set the cols"number" in the array.

But one way to achieve what you want, would be by adding a class to your wp_editor.

 $settings = array(
'quicktags' => array('buttons' => 'em,strong,link',),
'quicktags' => true,
'tinymce' => true,
'textarea_rows' => 20,
 'classes' => 'yourclass',
 );

or when you're calling the wp_editor:

 <?php wp_editor( $content, $editor_id, $settings = array('editor_class'=>'yourclass') ); ?>

Then just set width in css:

 .yourclass {
   width: 400px !important; //add !important if your style is being overriden 
 }

Laniakea
September 01, 2013 09:43 AM

$settings = array(
    'tinymce' => array(
        'width' => 200
    )
);

Gives you a tinymce that is 200px wide. Found it here: http://www.tinymce.com/wiki.php/Configuration

When I tried it the background color of my tinymce changed. So maybe you have to tweak that.

user3159159
March 12, 2014 21:56 PM

There are two parameters that you can use to change the size of the text editor generated with wp_editor(), here there are:

$settings = array(
    'editor_height' => 425, // In pixels, takes precedence and has no default value
    'textarea_rows' => 20,  // Has no visible effect if editor_height is set, default is 20
);

If editor_height is provided, its raw value will be used
Otherwise textarea_rows (or it's default value of 20) will be used to calculate the matching height in pixels

Good to know:

Here are a few examples of the result of the conversion from textarea_rows to pixels (this is done on the client side):

0 to 3 => 100
4 => 113
5 => 133
10 => 230
15 => 328
20 => 425
...

Nabil Kadimi
October 02, 2014 16:42 PM

OK, here's what I just did that works well:

echo "<div style='width:75%;'>";
wp_editor( $content, 'myid', $settings );
echo "</div>";

Daniel Payne
May 18, 2018 03:32 AM

TinyMCE in custom meta box breaking html in "visual" mode

Updated August 24, 2017 17:08 PM

Is there a way to change the default MCE button text (not using a plugin)?

Updated October 15, 2018 20:08 PM

Stop editor from adding “amp;” after every “&”

Updated April 23, 2017 03:08 AM

How to dynamically generate wordpress editor on frontend?

Updated February 16, 2019 21:08 PM

HTML5 Summary tag in editor

Updated December 09, 2017 01:08 AM