Index: typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js (révision 6629) +++ typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js (copie de travail) @@ -794,21 +794,30 @@ * Create the htmlArea iframe and replace the textarea with it. */ HTMLArea.prototype.generate = function () { + var self = this; + // Get the textarea, hide it and make it resizable + this.textArea = Ext.get(this._textArea).setVisibilityMode(2).setVisible(false); + if (TYPO3.settings.textareaResize) { + this.textArea.addClass('resizable'); + this.textAreaResizer = new Ext.Resizable(this.textArea, { + minWidth: 300, + minHeight: 200, + maxHeight: TYPO3.settings.textareaMaxHeight, + dynamic: true + }); + this.textAreaResizer.on('resize', function(ev) { self.resizeOnTextAreaChange(2); }); + } - // get the textarea and hide it - var textarea = this._textArea; - textarea.style.display = "none"; + // Create the editor framework and insert it before the textarea + this.htmlArea = Ext.DomHelper.insertBefore(this.textArea, { + tag: 'div', + cls: 'htmlarea' + }, true).setWidth(this.textArea.getStyle('width')); + this._htmlArea = this.htmlArea.dom; - // create the editor framework and insert the editor before the textarea - var htmlarea = document.createElement("div"); - htmlarea.className = "htmlarea"; - htmlarea.style.width = textarea.style.width; - this._htmlArea = htmlarea; - textarea.parentNode.insertBefore(htmlarea, textarea); - - if(textarea.form) { - // we have a form, on reset, re-initialize the HTMLArea content and update the toolbar - var f = textarea.form; + // If we have a form, on reset, re-initialize the HTMLArea content and update the toolbar + if (this.textArea.dom.form) { + var f = this.textArea.dom.form; if (typeof(f.onreset) == "function") { var funcref = f.onreset; if (typeof(f.__msh_prevOnReset) == "undefined") f.__msh_prevOnReset = []; @@ -818,27 +827,33 @@ HTMLArea._addEvent(f, "reset", HTMLArea.resetHandler); } - // create & append the toolbar + // Create & append the toolbar this._createToolbar(); HTMLArea._appendToLog("[HTMLArea::generate]: Toolbar successfully created."); - // create and append the IFRAME - var iframe = document.createElement("iframe"); - if (HTMLArea.is_gecko && !HTMLArea.is_safari && !HTMLArea.is_opera) { - iframe.setAttribute("src", "javascript:void(0);"); - } else { - iframe.setAttribute("src", (HTMLArea.is_opera?_typo3_host_url:"") + _editor_url + "popups/blank.html"); + // Create the editor iframe and append it to the toolbar + this.iframe = Ext.DomHelper.append(this.htmlArea, { + tag: 'iframe', + cls: 'editorIframe', + src: (HTMLArea.is_gecko && !HTMLArea.is_safari && !HTMLArea.is_opera) ? 'javascript:void(0);' : (HTMLArea.is_opera?_typo3_host_url:'') + _editor_url + 'popups/blank.html' + }, true); + if (!this.getPluginInstance('StatusBar')) { + this.iframe.addClass('noStatusBar'); } - iframe.className = "editorIframe"; - if (!this.getPluginInstance("StatusBar")) { - iframe.className += " noStatusBar"; + this._iframe = this.iframe.dom; + HTMLArea._appendToLog("[HTMLArea::generate]: Editor iframe successfully created."); + // Make the editor framework resizable + if (TYPO3.settings.textareaResize) { + this.htmlArea.addClass('resizable'); + var dimensions = this.getDimensions(); + this.htmlAreaResizer = new Ext.Resizable(this.htmlArea, { + maxHeight: parseInt(TYPO3.settings.textareaMaxHeight) + dimensions.toolbar.height + dimensions.statusbar.height, + dynamic: false + }); + this.htmlAreaResizer.on('resize', function(ev) { self.resizeOnHtmlAreaChange(2); }); } - htmlarea.appendChild(iframe); - this._iframe = iframe; - HTMLArea._appendToLog("[HTMLArea::generate]: Editor iframe successfully created."); if (HTMLArea.is_opera) { - var self = this; - this._iframe.onload = function() { self.initIframe(); }; + this.iframe.on('load', function() { self.initIframe(); } , this); } else { this.initIframe(); } @@ -846,6 +861,58 @@ }; /* + * Resize the editor framework and the iframe when the textarea was resized + */ +HTMLArea.prototype.resizeOnTextAreaChange = function(diff) { + // Set width first as it may change the height of the toolbar and of the statusbar + var width = this.textArea.getStyle('width'); + if (width.indexOf('%') == -1) { + width = (parseInt(width) + diff) + 'px'; + } + this.iframe.setStyle('width', HTMLArea.is_opera ? width : '100%'); + this.htmlArea.setStyle('width', width); + // Set height + var dimensions = this.getDimensions(); + var height = this.textArea.getStyle('height'); + if (height.indexOf('%') == -1) { + height = (parseInt(height) + diff) + 'px'; + } + this.iframe.setStyle('height', height); + this.htmlArea.setStyle('height', (dimensions.toolbar.height + dimensions.statusbar.height) + 'px'); +}; + +/* + * Resize the textarea and iframe when the htmlArea was resized + */ +HTMLArea.prototype.resizeOnHtmlAreaChange = function(diff) { + // Set width first as it may change the height of the toolbar and of the statusbar + var width = this.htmlArea.getStyle('width'); + // Do not shrink narrower than configured textarea + if (parseInt(width) < this.textAreaResizer.minWidth + diff) { + width = (this.textAreaResizer.minWidth + diff) + 'px'; + this.htmlArea.setStyle('width', width); + } + if (width.indexOf('%') == -1) { + width = (parseInt(width) - diff) + 'px'; + } + this.textArea.setStyle('width', width); + // Set height + var height = this.iframe.getStyle('height'); + if (height.indexOf('%') == -1) { + var dimensions = this.getDimensions(); + height = parseInt(this.htmlArea.getStyle('height')) - dimensions.toolbar.height - dimensions.statusbar.height; + // Do not shrink shorter than configured textarea + if (height < this.textAreaResizer.minHeight + diff) { + height = this.textAreaResizer.minHeight + diff; + this.htmlArea.setStyle('height', (height + dimensions.toolbar.height + dimensions.statusbar.height) + 'px'); + } + this.iframe.setStyle('height', height + 'px'); + height = (height - diff) + 'px'; + } + this.textArea.setStyle('height', height); +}; + +/* * Size the iframe according to user's prefs or initial textarea */ HTMLArea.prototype.sizeIframe = function(diff) { @@ -857,7 +924,8 @@ this.config.height = (this.config.height == "auto") ? this._textArea.style.height : this.config.height; var iframeHeight = this.config.height; var textareaHeight = this.config.height; - if (textareaHeight.indexOf("%") == -1) { + var htmlAreaHeight = this.config.height; + if (this.config.height.indexOf("%") == -1) { iframeHeight = parseInt(iframeHeight) - diff; if (this.config.sizeIncludesToolbar) { this._initialToolbarOffsetHeight = this._initialToolbarOffsetHeight ? this._initialToolbarOffsetHeight : dimensions.toolbar.height; @@ -867,6 +935,7 @@ if (iframeHeight < 0) { iframeHeight = 0; } + htmlAreaHeight = (iframeHeight + dimensions.toolbar.height + dimensions.statusbar.height) + 'px'; textareaHeight = (iframeHeight - 4); if (textareaHeight < 0) { textareaHeight = 0; @@ -876,6 +945,7 @@ } this._iframe.style.height = iframeHeight; this._textArea.style.height = textareaHeight; + this.htmlArea.setStyle('height', htmlAreaHeight); // Set width this.config.width = (this.config.width == "auto") ? this._textArea.style.width : this.config.width; var textareaWidth = this.config.width; Index: typo3/sysext/rtehtmlarea/htmlarea/plugins/EditorMode/editor-mode.js =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/plugins/EditorMode/editor-mode.js (révision 6629) +++ typo3/sysext/rtehtmlarea/htmlarea/plugins/EditorMode/editor-mode.js (copie de travail) @@ -158,6 +158,9 @@ case "docnotwellformedmode": this.textArea.value = this.getHTML(); editor._iframe.style.display = "none"; + var dimensions = editor.getDimensions(); + editor.htmlArea.setStyle('height', (dimensions.toolbar.height + dimensions.statusbar.height) + 'px'); + editor.htmlArea.removeClass('resizable'); this.textArea.style.display = "block"; this.editorMode = "textmode"; break; @@ -173,6 +176,9 @@ } this.textArea.style.display = "none"; editor._iframe.style.display = "block"; + var dimensions = editor.getDimensions(); + editor.htmlArea.setStyle('height', (parseInt(editor.iframe.getStyle('height')) + dimensions.toolbar.height + dimensions.statusbar.height) + 'px'); + editor.htmlArea.addClass('resizable'); if (HTMLArea.is_gecko && !HTMLArea.is_safari && !HTMLArea.is_opera) { editor._doc.designMode = "on"; } Index: typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css (révision 6629) +++ typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css (copie de travail) @@ -3,6 +3,14 @@ background-color:#fff; margin:0;padding:0; } +.resizable { + background-color:transparent; + padding-right:7px; + padding-bottom:6px; + background-image: url("images/resize.gif"); + background-position: bottom right; + background-repeat: no-repeat; +} .pleasewait { position:relative;top:0px;text-align:left; font-size:8pt; Index: typo3/sysext/rtehtmlarea/htmlarea/skins/default/images/resize.gif =================================================================== Impossible d'afficher : fichier considéré comme binaire. svn:mime-type = application/octet-stream Modification de propriétés sur typo3\sysext\rtehtmlarea\htmlarea\skins\default\images\resize.gif ___________________________________________________________________ Ajouté : svn:mime-type + application/octet-stream Index: typo3/sysext/rtehtmlarea/pi2/class.tx_rtehtmlarea_pi2.php =================================================================== --- typo3/sysext/rtehtmlarea/pi2/class.tx_rtehtmlarea_pi2.php (révision 6629) +++ typo3/sysext/rtehtmlarea/pi2/class.tx_rtehtmlarea_pi2.php (copie de travail) @@ -217,14 +217,24 @@ * LOAD JS, CSS and more * ======================================= */ + $pageRenderer = $GLOBALS['TSFE']->getPageRenderer(); + $pageRenderer->setBackPath(TYPO3_mainDir); // Preloading the pageStyle and including RTE skin stylesheets $this->addPageStyle(); $this->addSkin(); + $pageRenderer->addCssFile($this->hostURL . '/t3lib/js/extjs/ux/resize.css'); // Loading JavaScript files and code + $pageRenderer->loadExtJs(); + $pageRenderer->addJsFile($this->hostURL . '/t3lib/js/extjs/ux/ext.resizable.js'); if ($this->TCEform->RTEcounter == 1) { $this->TCEform->additionalJS_pre['rtehtmlarea-loadJScode'] = $this->loadJScode($this->TCEform->RTEcounter); } $this->TCEform->additionalJS_initial = $this->loadJSfiles($this->TCEform->RTEcounter); + $resizableSettings = array( + 'textareaResize' => true, + 'textareaMaxHeight' => '600' + ); + $pageRenderer->addInlineSettingArray('', $resizableSettings); /* ======================================= * DRAW THE EDITOR Index: typo3/sysext/t3skin/rtehtmlarea/htmlarea.css =================================================================== --- typo3/sysext/t3skin/rtehtmlarea/htmlarea.css (révision 6629) +++ typo3/sysext/t3skin/rtehtmlarea/htmlarea.css (copie de travail) @@ -4,6 +4,14 @@ background-color:#fff; margin:0;padding:0; } +.resizable { + background-color:transparent; + padding-right:7px; + padding-bottom:6px; + background-image: url("images/resize.gif"); + background-position: bottom right; + background-repeat: no-repeat; +} .pleasewait { position:relative;top:0px;text-align:left; font-size:10px; Index: typo3/sysext/t3skin/rtehtmlarea/images/resize.gif =================================================================== Impossible d'afficher : fichier considéré comme binaire. svn:mime-type = application/octet-stream Modification de propriétés sur typo3\sysext\t3skin\rtehtmlarea\images\resize.gif ___________________________________________________________________ Ajouté : svn:mime-type + application/octet-stream