4 * Copyright 2009, Moxiecode Systems AB
5 * Released under LGPL License.
7 * License: http://tinymce.moxiecode.com/license
8 * Contributing: http://tinymce.moxiecode.com/contributing
15 * This plugin automatically resizes the content area to fit its content height.
16 * It will retain a minimum height, which is the height of the content area when
19 tinymce.create('tinymce.plugins.AutoResizePlugin', {
21 * Initializes the plugin, this will be executed after the plugin has been created.
22 * This call is done before the editor instance has finished it's initialization so use the onInit event
23 * of the editor instance to intercept that event.
25 * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
26 * @param {string} url Absolute URL to where the plugin is located.
28 init : function(ed, url) {
29 var t = this, oldSize = 0;
31 if (ed.getParam('fullscreen_is_enabled'))
35 * This method gets executed each time the editor needs to resize.
38 var d = ed.getDoc(), b = d.body, de = d.documentElement, DOM = tinymce.DOM, resizeHeight = t.autoresize_min_height, myHeight;
40 // Get height differently depending on the browser used
41 myHeight = tinymce.isIE ? b.scrollHeight : d.body.offsetHeight;
43 // Don't make it smaller than the minimum height
44 if (myHeight > t.autoresize_min_height)
45 resizeHeight = myHeight;
47 // If a maximum height has been defined don't exceed this height
48 if (t.autoresize_max_height && myHeight > t.autoresize_max_height) {
49 resizeHeight = t.autoresize_max_height;
50 ed.getBody().style.overflowY = "auto";
52 ed.getBody().style.overflowY = "hidden";
54 // Resize content element
55 if (resizeHeight !== oldSize) {
56 DOM.setStyle(DOM.get(ed.id + '_ifr'), 'height', resizeHeight + 'px');
57 oldSize = resizeHeight;
60 // if we're throbbing, we'll re-throb to match the new size
62 ed.setProgressState(false);
63 ed.setProgressState(true);
69 // Define minimum height
70 t.autoresize_min_height = parseInt( ed.getParam('autoresize_min_height', ed.getElement().offsetHeight) );
72 // Define maximum height
73 t.autoresize_max_height = parseInt( ed.getParam('autoresize_max_height', 0) );
75 // Add padding at the bottom for better UX
76 ed.onInit.add(function(ed){
77 ed.dom.setStyle(ed.getBody(), 'paddingBottom', ed.getParam('autoresize_bottom_margin', 50) + 'px');
80 // Add appropriate listeners for resizing content area
81 ed.onChange.add(resize);
82 ed.onSetContent.add(resize);
83 ed.onPaste.add(resize);
84 ed.onKeyUp.add(resize);
85 ed.onPostRender.add(resize);
87 if (ed.getParam('autoresize_on_init', true)) {
88 // Things to do when the editor is ready
89 ed.onInit.add(function(ed, l) {
90 // Show throbber until content area is resized properly
91 ed.setProgressState(true);
95 ed.getBody().style.overflowY = "hidden";
98 ed.onLoadContent.add(function(ed, l) {
101 // Because the content area resizes when its content CSS loads,
102 // and we can't easily add a listener to its onload event,
103 // we'll just trigger a resize after a short loading period
104 setTimeout(function() {
108 ed.setProgressState(false);
114 // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
115 ed.addCommand('mceAutoResize', resize);
119 * Returns information about the plugin as a name/value array.
120 * The current keys are longname, author, authorurl, infourl and version.
122 * @return {Object} Name/value array containing information about the plugin.
124 getInfo : function() {
126 longname : 'Auto Resize',
127 author : 'Moxiecode Systems AB',
128 authorurl : 'http://tinymce.moxiecode.com',
129 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/autoresize',
130 version : tinymce.majorVersion + "." + tinymce.minorVersion
136 tinymce.PluginManager.add('autoresize', tinymce.plugins.AutoResizePlugin);