Looking for a way to make the TinyMCE editor always relative to it’s content so that the height of the editor changes accordingly to how much text/images it contains.
There seem to be plugins for TinyMCE for this already, but I’m not sure on how to apply it for the WordPress version: http://www.tinymce.com/wiki.php/Plugin:autoresize
function init_tinymce_autoresize($initArray){
$initArray['plugins'] = "autoresize";
return $initArray;
}
add_filter('tiny_mce_before_init', 'init_tinymce_autoresize');
Does not work.
Ideas?
Here’s a solution. There’s a slight problem as it does not recognize when images are added to the editor.
1: Create a folder with the name tinymce-autoresize in the plugins folder.
2. Create a file in tinymce-autoresize named
tinymce_autoresize.php
with this content:3. Create a file in tinymce-autoresize named
editor_plugin.js
with this content:Activate it and you’re done!
The Autoresize plugin is already built into WordPress with the name “
wpautoresize
“.The wpautoresize plugin adds the following TinyMCE editor commands:
editor.execCommand('wpAutoResizeOn')
.. enable autoresizeeditor.execCommand('wpAutoResizeOff')
.. disable autoresizeeditor.execCommand('wpAutoResize')
.. resize the editor to fit the contents (e.g., after programmatically changing the content)How to use it
Generate the tinyMCE editor using
wp_editor()
. This function will generate the full tinyMCE editor (with the “Add Media” and “Visual/Text” buttons at the top). This function also loads the “wpautoresize” plugin for you.You only need to activate the autoresize-mode once the page loaded. This JS code will do this for you:
editor.execCommand("wpAutoResizeOn")
.Full code sample
Here is a sample PHP hook which generates a TinyMCE editor and also adds the JS code to instantly enable the autoresize-mode on initialization:
Special Case: Autoresize in “teeny” mode
The “teeny” mode does not load the wpautoresize plugin, so you need to manually enqueue the TinyMCE plugin before when calling
wp_editor()
.You can do this by using the filter
teeny_mce_plugins
– the filter value is an array of all plugins to load. Simply add the plugin “wpautoresize” to that list.Full code sample