Added feature #13909: htmlArea RTE: Extjize the default non-TYPO3 image dialogue
authorStanislas Rolland <typo3@sjbr.ca>
Wed, 24 Mar 2010 20:15:59 +0000 (20:15 +0000)
committerStanislas Rolland <typo3@sjbr.ca>
Wed, 24 Mar 2010 20:15:59 +0000 (20:15 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@7151 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/sysext/rtehtmlarea/ChangeLog
typo3/sysext/rtehtmlarea/doc/manual.sxw
typo3/sysext/rtehtmlarea/htmlarea/htmlarea-gecko.js
typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/default-image.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/locallang.xml
typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/popups/insert_image.html [deleted file]
typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
typo3/sysext/t3skin/rtehtmlarea/htmlarea.css

index 2c2ef1f..8c57916 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2010-03-24  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Added feature #13909: htmlArea RTE: Extjize the default non-TYPO3 image dialogue
+
 2010-03-23  Steffen Kamper  <info@sk-typo3.de>
 
        * Fixed bug #13811: Missing formHandler in ExtDirect API (Thanks to Stefan Galinski)
index d8833e5..c5c0d61 100644 (file)
@@ -1,3 +1,7 @@
+2010-03-24  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Added feature #13909: htmlArea RTE: Extjize the default non-TYPO3 image dialogue
+
 2010-03-22  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Added feature #13878: htmlArea RTE: Extjize the default non-TYPO3 link dialogue
index 7d397c5..3a3fada 100644 (file)
Binary files a/typo3/sysext/rtehtmlarea/doc/manual.sxw and b/typo3/sysext/rtehtmlarea/doc/manual.sxw differ
index 9265b24..1637fe4 100644 (file)
@@ -157,18 +157,24 @@ HTMLArea.Editor.prototype.rangeIntersectsNode = function(range, node) {
  */
 HTMLArea.Editor.prototype.getSelectionType = function(selection) {
                // By default set the type to "Text".
-       var type = "Text";
+       var type = 'Text';
        if (!selection) {
                var selection = this._getSelection();
        }
                        // Check if the actual selection is a Control
        if (selection && selection.rangeCount == 1) {
-               var range = selection.getRangeAt(0) ;
-               if (range.startContainer == range.endContainer
-                               && (range.endOffset - range.startOffset) == 1
-                               && range.startContainer.nodeType == 1
-                               && /^(img|hr|li|table|tr|td|embed|object|ol|ul)$/i.test(range.startContainer.childNodes[range.startOffset].nodeName)) {
-                       type = "Control";
+               var range = selection.getRangeAt(0);
+               if (range.startContainer.nodeType == 1) {
+                       if (
+                                       // Gecko
+                               (range.startContainer == range.endContainer && (range.endOffset - range.startOffset) == 1) ||
+                                       // Opera and WebKit
+                               (range.endContainer.nodeType == 3 && range.endOffset == 0 && range.startContainer.childNodes[range.startOffset].nextSibling == range.endContainer)
+                       ) {
+                               if (/^(img|hr|li|table|tr|td|embed|object|ol|ul|dl)$/i.test(range.startContainer.childNodes[range.startOffset].nodeName)) {
+                                       type = 'Control';
+                               }
+                       }
                }
        }
        return type;
index 15ced60..b9e7d5b 100644 (file)
@@ -673,7 +673,18 @@ Ext.ux.form.HTMLAreaCombo = Ext.extend(Ext.form.ComboBox, {
        saveSelection: function (event) {
                var editor = this.getEditor();
                if (editor.document.hasFocus()) {
-                       this.bookmark = editor.getBookmark(editor._createRange(editor._getSelection()));
+                       var selection = editor._getSelection();
+                       switch (selection.type.toLowerCase()) {
+                               case 'none':
+                               case 'text':
+                                       this.bookmark = editor.getBookmark(editor._createRange(selection));
+                                       this.controlRange = null;
+                                       break;
+                               case 'control':
+                                       this.controlRange = editor._createRange(selection);
+                                       this.bookmark = null;
+                                       break;
+                       }
                }
        },
        /*
@@ -682,7 +693,7 @@ Ext.ux.form.HTMLAreaCombo = Ext.extend(Ext.form.ComboBox, {
        restoreSelection: function (event) {
                if (!Ext.isEmpty(this.bookmark) && this.triggered) {
                        var editor = this.getEditor();
-                       editor.selectRange(editor.moveToBookmark(this.bookmark));
+                       editor.selectRange(this.bookmark ? editor.moveToBookmark(this.bookmark) : this.controlRange);
                        this.triggered = false;
                }
        },
@@ -2011,10 +2022,13 @@ HTMLArea.StatusBar = Ext.extend(Ext.Container, {
                var editor = this.getEditor();
                element.blur();
                if (!Ext.isIE) {
-                       editor.selectNodeContents(element.ancestor);
+                       if (/^(img)$/i.test(element.ancestor.nodeName)) {
+                               editor.selectNode(element.ancestor);
+                       } else {
+                               editor.selectNodeContents(element.ancestor);
+                       }
                } else {
-                       var nodeName = element.ancestor.nodeName.toLowerCase();
-                       if (nodeName == 'table' || nodeName == 'img') {
+                       if (/^(img|table)$/i.test(element.ancestor.nodeName)) {
                                var range = editor.document.body.createControlRange();
                                range.addElement(element.ancestor);
                                range.select();
@@ -4442,7 +4456,18 @@ HTMLArea.Plugin = HTMLArea.Base.extend({
        saveSelection: function () {
                        // If IE, save the current selection
                if (Ext.isIE) {
-                       this.bookmark = this.editor.getBookmark(this.editor._createRange(this.editor._getSelection()));
+                       var selection = this.editor._getSelection();
+                       switch (selection.type.toLowerCase()) {
+                               case 'none':
+                               case 'text':
+                                       this.bookmark = this.editor.getBookmark(this.editor._createRange(selection));
+                                       this.controlRange = null;
+                                       break;
+                               case 'control':
+                                       this.controlRange = this.editor._createRange(selection);
+                                       this.bookmark = null;
+                                       break;
+                       }
                }
        },
        /*
@@ -4452,7 +4477,10 @@ HTMLArea.Plugin = HTMLArea.Base.extend({
        restoreSelection: function () {
                        // If IE, restore the selection saved when the window was shown
                if (Ext.isIE) {
-                       this.editor.selectRange(this.editor.moveToBookmark(this.bookmark));
+                               // Restoring the selection will not work if the inner html was replaced by the plugin
+                       try {
+                               this.editor.selectRange(this.bookmark ? this.editor.moveToBookmark(this.bookmark) : this.controlRange);
+                       } catch (e) {}
                }
        },
        /*
index 8c7ebee..5108196 100644 (file)
@@ -1,7 +1,7 @@
 /***************************************************************
 *  Copyright notice
 *
-*  (c) 2008-2009 Stanislas Rolland <typo3(arobas)sjbr.ca>
+*  (c) 2008-2010 Stanislas Rolland <typo3(arobas)sjbr.ca>
 *  All rights reserved
 *
 *  This script is part of the TYPO3 project. The TYPO3 project is
  * TYPO3 SVN ID: $Id$
  */
 DefaultImage = HTMLArea.Plugin.extend({
-       
-       constructor : function(editor, pluginName) {
+       constructor: function(editor, pluginName) {
                this.base(editor, pluginName);
        },
-       
        /*
         * This function gets called by the class constructor
         */
-       configurePlugin : function(editor) {
-               
+       configurePlugin: function(editor) {
                this.baseURL = this.editorConfiguration.baseURL;
                this.pageTSConfiguration = this.editorConfiguration.buttons.image;
                if (this.pageTSConfiguration && this.pageTSConfiguration.properties && this.pageTSConfiguration.properties.removeItems) {
-                       this.removeItems = this.pageTSConfiguration.properties.removeItems.split(",");
-                               var layout = 0;
-                               var padding = 0;
-                               for (var i = 0, length = this.removeItems.length; i < length; ++i) {
-                                       this.removeItems[i] = this.removeItems[i].replace(/(?:^\s+|\s+$)/g, "");
-                                       if (/^(align|border|float)$/i.test(this.removeItems[i])) ++layout;
-                                       if (/^(paddingTop|paddingRight|paddingBottom|paddingLeft)$/i.test(this.removeItems[i])) ++padding;
+                       this.removeItems = this.pageTSConfiguration.properties.removeItems.split(',');
+                       var layout = 0;
+                       var padding = 0;
+                       for (var i = 0, n = this.removeItems.length; i < n; ++i) {
+                               this.removeItems[i] = this.removeItems[i].replace(/(?:^\s+|\s+$)/g, '');
+                               if (/^(align|border|float)$/i.test(this.removeItems[i])) {
+                                       ++layout;
                                }
-                               if (layout == 3) this.removeItems[this.removeItems.length] = "layout";
-                               if (layout == 4) this.removeItems[this.removeItems.length] = "padding";
+                               if (/^(paddingTop|paddingRight|paddingBottom|paddingLeft)$/i.test(this.removeItems[i])) {
+                                       ++padding;
+                               }
+                       }
+                       if (layout == 3) {
+                               this.removeItems.push('layout');
+                       }
+                       if (layout == 4) {
+                               this.removeItems.push('padding');
+                       }
+                       this.removeItems = new RegExp( '^(' + this.removeItems.join('|') + ')$', 'i');
+               } else {
+                       this.removeItems = new RegExp( '^(none)$', 'i');
                }
-               
                /*
                 * Registering plugin "About" information
                 */
                var pluginInformation = {
-                       version         : "1.0",
-                       developer       : "Stanislas Rolland",
-                       developerUrl    : "http://www.ajbr.ca/",
-                       copyrightOwner  : "Stanislas Rolland",
-                       sponsor         : "SJBR",
-                       sponsorUrl      : "http://www.sjbr.ca/",
-                       license         : "GPL"
+                       version         : '2.0',
+                       developer       : 'Stanislas Rolland',
+                       developerUrl    : 'http://www.sjbr.ca/',
+                       copyrightOwner  : 'Stanislas Rolland',
+                       sponsor         : 'SJBR',
+                       sponsorUrl      : 'http://www.sjbr.ca/',
+                       license         : 'GPL'
                };
                this.registerPluginInformation(pluginInformation);
-               
                /*
                 * Registering the button
                 */
-               var buttonId = "InsertImage";
+               var buttonId = 'InsertImage';
                var buttonConfiguration = {
                        id              : buttonId,
-                       tooltip         : this.localize("insertimage"),
-                       action          : "onButtonPress",
+                       tooltip         : this.localize('insertimage'),
+                       action          : 'onButtonPress',
                        hotKey          : (this.pageTSConfiguration ? this.pageTSConfiguration.hotKey : null),
                        dialog          : true
                };
                this.registerButton(buttonConfiguration);
-               
                return true;
         },
-        
+       /*
+        * Sets of default configuration values for dialogue form fields
+        */
+       configDefaults: {
+               combo: {
+                       editable: true,
+                       typeAhead: true,
+                       triggerAction: 'all',
+                       forceSelection: true,
+                       mode: 'local',
+                       valueField: 'value',
+                       displayField: 'text',
+                       helpIcon: true,
+                       tpl: '<tpl for="."><div ext:qtip="{value}" style="text-align:left;font-size:11px;" class="x-combo-list-item">{text}</div></tpl>'
+               }
+       },
        /*
         * This function gets called when the button was pressed.
         *
         * @param       object          editor: the editor instance
         * @param       string          id: the button id or the key
-        * @param       object          target: the target element of the contextmenu event, when invoked from the context menu
         *
         * @return      boolean         false if action is completed
         */
-       onButtonPress : function(editor, id, target) {
-               
+       onButtonPress: function(editor, id) {
                        // Could be a button or its hotkey
                var buttonId = this.translateHotKey(id);
                buttonId = buttonId ? buttonId : id;
-               
-               var image, outparam = null;
-               this.editor.focusEditor();
-               
-               if (typeof(target) !== "undefined") {
-                       image = target;
-               } else {
-                       image = this.editor.getParentElement();
+               this.editor.focus();
+               this.image = this.editor.getParentElement();
+               if (this.image && !/^img$/i.test(this.image.nodeName)) {
+                       this.image = null;
                }
-               if (image && !/^img$/i.test(image.nodeName)) {
-                       image = null;
-               }
-               if (image) {
-                       outparam = {
-                               f_base          : this.baseURL,
-                               f_url           : image.getAttribute("src"),
-                               f_alt           : image.alt,
-                               f_border        : isNaN(parseInt(image.style.borderWidth)) ? "" : parseInt(image.style.borderWidth),
-                               f_align         : image.style.verticalAlign,
-                               f_top           : isNaN(parseInt(image.style.paddingTop)) ? "" : parseInt(image.style.paddingTop),
-                               f_right         : isNaN(parseInt(image.style.paddingRight)) ? "" : parseInt(image.style.paddingRight),
-                               f_bottom        : isNaN(parseInt(image.style.paddingBottom)) ? "" : parseInt(image.style.paddingBottom),
-                               f_left          : isNaN(parseInt(image.style.paddingLeft)) ? "" : parseInt(image.style.paddingLeft),
-                               f_float         : HTMLArea.is_ie ? image.style.styleFloat : image.style.cssFloat
+               if (this.image) {
+                       this.parameters = {
+                               base:           this.baseURL,
+                               url:            this.image.getAttribute('src'),
+                               alt:            this.image.alt,
+                               border:         isNaN(parseInt(this.image.style.borderWidth)) ? '' : parseInt(this.image.style.borderWidth),
+                               align:          this.image.style.verticalAlign ? this.image.style.verticalAlign : '',
+                               paddingTop:     isNaN(parseInt(this.image.style.paddingTop)) ? '' : parseInt(this.image.style.paddingTop),
+                               paddingRight:   isNaN(parseInt(this.image.style.paddingRight)) ? '' : parseInt(this.image.style.paddingRight),
+                               paddingBottom:  isNaN(parseInt(this.image.style.paddingBottom)) ? '' : parseInt(this.image.style.paddingBottom),
+                               paddingLeft:    isNaN(parseInt(this.image.style.paddingLeft)) ? '' : parseInt(this.image.style.paddingLeft),
+                               cssFloat:       Ext.isIE ? this.image.style.styleFloat : this.image.style.cssFloat
+                       };
+               } else {
+                       this.parameters = {
+                               base:   this.baseURL,
+                               url:    '',
+                               alt:    '',
+                               border: '',
+                               align:  '',
+                               paddingTop:     '',
+                               paddingRight:   '',
+                               paddingBottom:  '',
+                               paddingLeft:    '',
+                               cssFloat: ''
                        };
                }
-               this.image = image;
-               
-               this.dialog = this.openDialog("InsertImage", this.makeUrlFromPopupName("insert_image"), "insertImage", outparam, {width:600, height:610});
+                       // Open dialogue window
+               this.openDialogue(
+                       buttonId,
+                       'Insert Image',
+                       this.getWindowDimensions(
+                               {
+                                       width: 460,
+                                       height:300
+                               },
+                               buttonId
+                       ),
+                       this.buildTabItems()
+               );
                return false;
        },
-       
        /*
-        * Insert the image
+        * Open the dialogue window
         *
-        * @param       object          param: the returned values
+        * @param       string          buttonId: the button id
+        * @param       string          title: the window title
+        * @param       integer         dimensions: the opening width of the window
+        * @param       object          tabItems: the configuration of the tabbed panel
         *
-        * @return      boolean         false
+        * @return      void
         */
-       insertImage : function(param) {
-               if (typeof(param) != "undefined" && typeof(param.f_url) != "undefined") {
-                       this.editor.focusEditor();
-                       var image = this.image;
-                       if (!image) {
-                               var selection = this.editor._getSelection();
-                               var range = this.editor._createRange(selection);
-                               this.editor._doc.execCommand("InsertImage", false, param.f_url);
-                               if (HTMLArea.is_ie) {
-                                       image = range.parentElement();
-                                       if (!/^img$/i.test(image.nodeName)) {
-                                               image = image.previousSibling;
-                                       }
-                               } else {
-                                       var selection = this.editor._getSelection();
-                                       var range = this.editor._createRange(selection);
-                                       image = range.startContainer;
-                                       if (HTMLArea.is_opera) {
-                                               image = image.parentNode;
+       openDialogue: function (buttonId, title, dimensions, tabItems) {
+               this.dialog = new Ext.Window({
+                       title: this.localize(title),
+                       cls: 'htmlarea-window',
+                       border: false,
+                       width: dimensions.width,
+                       height: 'auto',
+                               // As of ExtJS 3.1, JS error with IE when the window is resizable
+                       resizable: !Ext.isIE,
+                       iconCls: buttonId,
+                       listeners: {
+                               close: {
+                                       fn: this.onClose,
+                                       scope: this
+                               }
+                       },
+                       items: {
+                               xtype: 'tabpanel',
+                               itemId: 'tabpanel',
+                               activeTab: 0,
+                               defaults: {
+                                       xtype: 'container',
+                                       layout: 'form',
+                                       defaults: {
+                                               labelWidth: 100
                                        }
-                                       image = image.lastChild;
-                                       while(image && !/^img$/i.test(image.nodeName)) {
-                                               image = image.previousSibling;
+                               },
+                               listeners: {
+                                       tabchange: {
+                                               fn: this.syncHeight,
+                                               scope: this
                                        }
-                               }
-                       } else {
-                               image.src = param.f_url;
-                       }
-                       
-                       for (var field in param) {
-                               if (param.hasOwnProperty(field)) {
-                                       var value = param[field];
-                                       switch (field) {
-                                               case "f_alt"    :
-                                                       image.alt = value;
-                                                       break;
-                                               case "f_border" :
-                                                       if (parseInt(value)) {
-                                                               image.style.borderWidth = parseInt(value)+"px";
-                                                               image.style.borderStyle = "solid";
-                                                       } else {
-                                                               image.style.borderWidth = "";
-                                                               image.style.borderStyle = "none";
-                                                       }
-                                                       break;
-                                               case "f_align"  :
-                                                       image.style.verticalAlign = value;
-                                                       break;
-                                               case "f_top"   :
-                                                       if (parseInt(value)) {
-                                                               image.style.paddingTop = parseInt(value)+"px";
-                                                       } else {
-                                                               image.style.paddingTop = "";
-                                                       }
-                                                       break;
-                                               case "f_right"  :
-                                                       if (parseInt(value)) {
-                                                               image.style.paddingRight = parseInt(value)+"px";
-                                                       } else {
-                                                               image.style.paddingRight = "";
-                                                       }
-                                                       break;
-                                               case "f_bottom"   :
-                                                       if (parseInt(value)) {
-                                                               image.style.paddingBottom = parseInt(value)+"px";
-                                                       } else {
-                                                               image.style.paddingBottom = "";
-                                                       }
-                                                       break;
-                                               case "f_left"  :
-                                                       if (parseInt(value)) {
-                                                               image.style.paddingLeft = parseInt(value)+"px";
-                                                       } else {
-                                                               image.style.paddingLeft = "";
+                               },
+                               items: tabItems
+                       },
+                       buttons: [
+                               this.buildButtonConfig('OK', this.onOK),
+                               this.buildButtonConfig('Cancel', this.onCancel)
+                       ]
+               });
+               this.show();
+       },
+       /*
+        * Build the configuration of the the tab items
+        *
+        * @return      array   the configuration array of tab items
+        */
+       buildTabItems: function () {
+               var tabItems = [];
+                       // General tab
+               tabItems.push({
+                       title: this.localize('General'),
+                       items: [{
+                                       xtype: 'fieldset',
+                                       defaultType: 'textfield',
+                                       defaults: {
+                                               helpIcon: true,
+                                               width: 300,
+                                               labelSeparator: ''
+                                       },
+                                       items: [{
+                                                       itemId: 'url',
+                                                       fieldLabel: this.localize('Image URL:'),
+                                                       value: this.parameters.url,
+                                                       helpTitle: this.localize('Enter the image URL here')
+                                               },{
+                                                       itemId: 'alt',
+                                                       fieldLabel: this.localize('Alternate text:'),
+                                                       value: this.parameters.alt,
+                                                       helpTitle: this.localize('For browsers that dont support images')
+                                               }
+                                       ]
+                               },{
+                                       xtype: 'fieldset',
+                                       title: this.localize('Image Preview'),
+                                       items: [{
+                                                               // The preview iframe
+                                                       xtype: 'box',
+                                                       itemId: 'image-preview',
+                                                       autoEl: {
+                                                               name: 'ipreview',
+                                                               tag: 'iframe',
+                                                               cls: 'image-preview',
+                                                               src: this.parameters.url
                                                        }
-                                                       break;
-                                               case "f_float"  :
-                                                       if (HTMLArea.is_ie) {
-                                                               image.style.styleFloat = value;
-                                                       } else {
-                                                               image.style.cssFloat = value;
+                                               },{
+                                                       xtype: 'button',
+                                                       minWidth: 150,
+                                                       text: this.localize('Preview'),
+                                                       itemId: 'preview',
+                                                       style: {
+                                                               marginTop: '5px',
+                                                               'float': 'right'
+                                                       },
+                                                       listeners: {
+                                                               click: {
+                                                                       fn: this.onPreviewClick,
+                                                                       scope: this
+                                                               }
                                                        }
-                                                       break;
-                                       }
+                                               }
+                                       ]
                                }
+                       ]
+               });
+                       // Layout tab
+               if (!this.removeItems.test('layout')) {
+                       tabItems.push({
+                               title: this.localize('Layout'),
+                               items: [{
+                                               xtype: 'fieldset',
+                                               defaultType: 'textfield',
+                                               defaults: {
+                                                       helpIcon: true,
+                                                       width: 250,
+                                                       labelSeparator: ''
+                                               },
+                                               items: [
+                                                       Ext.apply({
+                                                               xtype: 'combo',
+                                                               fieldLabel: this.localize('Image alignment:'),
+                                                               itemId: 'align',
+                                                               value: this.parameters.align,
+                                                               helpTitle: this.localize('Positioning of this image'),
+                                                               store: new Ext.data.ArrayStore({
+                                                                       autoDestroy:  true,
+                                                                       fields: [ { name: 'text'}, { name: 'value'}],
+                                                                       data: [
+                                                                               [this.localize('Not set'), ''],
+                                                                               [this.localize('Bottom'), 'bottom'],
+                                                                               [this.localize('Middle'), 'middle'],
+                                                                               [this.localize('Top'), 'top']
+                                                                       ]
+                                                               }),
+                                                               hidden: this.removeItems.test('align'),
+                                                               hideLabel: this.removeItems.test('align'),
+                                                               }, this.configDefaults['combo'])
+                                                       ,{
+                                                               itemId: 'border',
+                                                               fieldLabel: this.localize('Border thickness:'),
+                                                               width: 100,
+                                                               value: this.parameters.border,
+                                                               helpTitle: this.localize('Leave empty for no border'),
+                                                               hidden: this.removeItems.test('border'),
+                                                               hideLabel: this.removeItems.test('border')
+                                                       },
+                                                       Ext.apply({
+                                                               xtype: 'combo',
+                                                               fieldLabel: this.localize('Float:'),
+                                                               itemId: 'cssFloat',
+                                                               value: this.parameters.cssFloat,
+                                                               helpTitle: this.localize('Where the image should float'),
+                                                               store: new Ext.data.ArrayStore({
+                                                                       autoDestroy:  true,
+                                                                       fields: [ { name: 'text'}, { name: 'value'}],
+                                                                       data: [
+                                                                               [this.localize('Not set'), ''],
+                                                                               [this.localize('Non-floating'), 'none'],
+                                                                               [this.localize('Left'), 'left'],
+                                                                               [this.localize('Right'), 'right']
+                                                                       ]
+                                                               }),
+                                                               hidden: this.removeItems.test('float'),
+                                                               hideLabel: this.removeItems.test('float')
+                                                               }, this.configDefaults['combo'])
+                                               ]
+                               }]
+                       });
+               }
+                       // Padding tab
+               if (!this.removeItems.test('padding')) {
+                       tabItems.push({
+                               title: this.localize('Spacing and padding'),
+                               items: [{
+                                               xtype: 'fieldset',
+                                               defaultType: 'textfield',
+                                               defaults: {
+                                                       helpIcon: true,
+                                                       width: 100,
+                                                       labelSeparator: ''
+                                               },
+                                               items: [{
+                                                               itemId: 'paddingTop',
+                                                               fieldLabel: this.localize('Top:'),
+                                                               value: this.parameters.paddingTop,
+                                                               helpTitle: this.localize('Top padding'),
+                                                               hidden: this.removeItems.test('paddingTop'),
+                                                               hideLabel: this.removeItems.test('paddingTop')
+                                                       },{
+                                                               itemId: 'paddingRight',
+                                                               fieldLabel: this.localize('Right:'),
+                                                               value: this.parameters.paddingRight,
+                                                               helpTitle: this.localize('Right padding'),
+                                                               hidden: this.removeItems.test('paddingRight'),
+                                                               hideLabel: this.removeItems.test('paddingRight')
+                                                       },{
+                                                               itemId: 'paddingBottom',
+                                                               fieldLabel: this.localize('Bottom:'),
+                                                               value: this.parameters.paddingBottom,
+                                                               helpTitle: this.localize('Bottom padding'),
+                                                               hidden: this.removeItems.test('paddingBottom'),
+                                                               hideLabel: this.removeItems.test('paddingBottom')
+                                                       },{
+                                                               itemId: 'paddingLeft',
+                                                               fieldLabel: this.localize('Left:'),
+                                                               value: this.parameters.paddingLeft,
+                                                               helpTitle: this.localize('Left padding'),
+                                                               hidden: this.removeItems.test('paddingLeft'),
+                                                               hideLabel: this.removeItems.test('paddingLeft')
+                                                       }
+                                               ]
+                               }]
+                       });
+               }
+               return tabItems;
+       },
+       /*
+        * Handler invoked when the Preview button is clicked
+        */
+       onPreviewClick: function () {
+               var tabPanel = this.dialog.find('itemId', 'tabpanel')[0];
+               var urlField = this.dialog.find('itemId', 'url')[0];
+               var url = urlField.getValue().trim();
+               if (url) {
+                       try {
+                               window.ipreview.location.replace(url);
+                       } catch (e) {
+                               Ext.MessageBox.alert('', this.localize('image_url_invalid'), function () { tabPanel.setActiveTab(0); urlField.focus(); });
                        }
-                       this.dialog.close();
+               } else {
+                       Ext.MessageBox.alert('', this.localize('image_url_first'), function () { tabPanel.setActiveTab(0); urlField.focus(); });
                }
                return false;
+       },
+       /*
+        * Handler invoked when the OK button is clicked
+        */
+       onOK: function () {
+               var urlField = this.dialog.find('itemId', 'url')[0];
+               var url = urlField.getValue().trim();
+               if (url) {
+                       var fieldNames = ['url', 'alt', 'align', 'border', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'cssFloat'];
+                       Ext.each(fieldNames, function (fieldName) {
+                               var field = this.dialog.find('itemId', fieldName)[0];
+                               if (field && !field.hidden) {
+                                       this.parameters[fieldName] = field.getValue();
+                               }
+                       }, this);
+                       this.insertImage();
+                       this.close();
+               } else {
+                       var tabPanel = this.dialog.find('itemId', 'tabpanel')[0];
+                       Ext.MessageBox.alert('', this.localize('image_url_required'), function () { tabPanel.setActiveTab(0); urlField.focus(); });
+               }
+               return false;
+       },
+       /*
+        * Insert the image
+        */
+       insertImage: function() {
+               this.editor.focus();
+               this.restoreSelection();
+               var image = this.image;
+               if (!image) {
+                       var selection = this.editor._getSelection();
+                       var range = this.editor._createRange(selection);
+                       this.editor.document.execCommand('InsertImage', false, this.parameters.url);
+                       if (Ext.isWebKit) {
+                               this.editor.cleanAppleStyleSpans(this.editor.document.body);
+                       }
+                       if (Ext.isIE) {
+                               image = range.parentElement();
+                               if (!/^img$/i.test(image.nodeName)) {
+                                       image = image.previousSibling;
+                               }
+                               this.editor.selectNode(image);
+                       } else {
+                               var selection = this.editor._getSelection();
+                               var range = this.editor._createRange(selection);
+                               image = range.startContainer;
+                               image = image.lastChild;
+                               while (image && !/^img$/i.test(image.nodeName)) {
+                                       image = image.previousSibling;
+                               }
+                       }
+               } else {
+                       image.src = this.parameters.url;
+               }
+               if (/^img$/i.test(image.nodeName)) {
+                       Ext.iterate(this.parameters, function (fieldName, value) {
+                               switch (fieldName) {
+                                       case 'alt':
+                                               image.alt = value;
+                                               break;
+                                       case 'border':
+                                               if (parseInt(value)) {
+                                                       image.style.borderWidth = parseInt(value) + 'px';
+                                                       image.style.borderStyle = 'solid';
+                                               } else {
+                                                       image.style.borderWidth = '';
+                                                       image.style.borderStyle = 'none';
+                                               }
+                                               break;
+                                       case 'align':
+                                               image.style.verticalAlign = value;
+                                               break;
+                                       case 'paddingTop':
+                                       case 'paddingRight':
+                                       case 'paddingBottom':
+                                       case 'paddingLeft':
+                                               if (parseInt(value)) {
+                                                       image.style[fieldName] = parseInt(value) + 'px';
+                                               } else {
+                                                       image.style[fieldName] = '';
+                                               }
+                                               break;
+                                       case 'cssFloat':
+                                               if (Ext.isIE) {
+                                                       image.style.styleFloat = value;
+                                               } else {
+                                                       image.style.cssFloat = value;
+                                               }
+                                               break;
+                               }
+                       });
+               }
        }
 });
-
index 89aa064..bc187fa 100644 (file)
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
-<!-- TYPO3 SVN ID: $Id:$ -->
+<!-- TYPO3 SVN ID: $Id$ -->
 <T3locallang>
        <meta type="array">
                <description>Labels for Image plugin of htmlArea RTE</description>
@@ -14,7 +14,7 @@
                        <label index="Top:">Top:</label>
                        <label index="Right:">Right:</label>
                        <label index="Bottom:">Bottom:</label>
-                       <label index="Left:">Left:</label>
+                       <label index="image_url_invalid">The url could not be accessed or is not a valid image.</label>
                </languageKey>
        </data>
        <orig_hash type="array">
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/popups/insert_image.html b/typo3/sysext/rtehtmlarea/htmlarea/plugins/DefaultImage/popups/insert_image.html
deleted file mode 100644 (file)
index 7b478d3..0000000
+++ /dev/null
@@ -1,205 +0,0 @@
-<!DOCTYPE html
-     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<!--
-/***************************************************************
-*  Copyright notice
-*
-*  (c) 2002-2004 interactivetools.com, inc.
-*  (c) 2003-2004 dynarch.com
-*  (c) 2004-2008 Stanislas Rolland <typo3(arobas)sjbr.ca>
-*  All rights reserved
-*
-*  This script is part of the TYPO3 project. The TYPO3 project is
-*  free software; you can redistribute it and/or modify
-*  it under the terms of the GNU General Public License as published by
-*  the Free Software Foundation; either version 2 of the License, or
-*  (at your option) any later version.
-*
-*  The GNU General Public License can be found at
-*  http://www.gnu.org/copyleft/gpl.html.
-*  A copy is found in the textfile GPL.txt and important notices to the license
-*  from the author is found in LICENSE.txt distributed with these scripts.
-*
-*
-*  This script is distributed in the hope that it will be useful,
-*  but WITHOUT ANY WARRANTY; without even the implied warranty of
-*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-*  GNU General Public License for more details.
-*
-*  This script is a modified version of a script published under the htmlArea License.
-*  A copy of the htmlArea License may be found in the textfile HTMLAREA_LICENSE.txt.
-*
-*  This copyright notice MUST APPEAR in all copies of the script!
-***************************************************************/
-/*
- * Insert Image window for TYPO3 htmlArea RTE
- *
- * TYPO3 SVN ID: $Id$
- */
--->
-<html>
-<head>
-       <title>Insert Image</title>
-       <meta http-equiv="Content-Style-Type" content="text/css" />
-       <script type="text/javascript">
-               /*<![CDATA[*/
-               <!--
-               var dialog = window.opener.HTMLArea.Dialog["DefaultImage"];
-               function Init() {
-                       dialog.initialize(false, true);
-                       if (dialog.plugin.removeItems) {
-                               var items = dialog.plugin.removeItems;
-                               for (var i = 0, length = items.length; i < length; ++i) {
-                                       if (document.getElementById(items[i])) document.getElementById(items[i]).style.display = "none";
-                               }
-                       }
-                       var param = dialog.arguments;
-                       if (param) {
-                               document.getElementById("f_url").value = param["f_url"];
-                               document.getElementById("f_alt").value = param["f_alt"];
-                               document.getElementById("f_border").value = param["f_border"];
-                               var select = document.getElementById("f_align");
-                               for (var i = select.options.length; --i >= 0;) {
-                                       if (param["f_align"] == select.options[i].value) {
-                                               select.selectedIndex = i;
-                                               break;
-                                       }
-                               }
-                               document.getElementById("f_top").value = param["f_top"];
-                               document.getElementById("f_right").value = param["f_right"];
-                               document.getElementById("f_bottom").value = param["f_bottom"];
-                               document.getElementById("f_left").value = param["f_left"];
-                               var select = document.getElementById("f_float");
-                               for (var i = select.options.length; --i >= 0;) {
-                                       if (param["f_float"] == select.options[i].value) {
-                                               select.selectedIndex = i;
-                                               break;
-                                       }
-                               }
-                               window.ipreview.location.replace(param.f_url);
-                       }
-                       dialog.resize();
-                       document.getElementById("f_url").focus();
-                       return false;
-               };
-
-               function onOK() {
-                       var required = { "f_url": "image_url_required" };
-                       for (var i in required) {
-                               var el = document.getElementById(i);
-                               if (!el.value) {
-                                       alert(dialog.plugin.localize(required[i]));
-                                       el.focus();
-                                       return false;
-                               }
-                       }
-                               // pass data back to the calling window
-                       var fields = ["f_url", "f_alt", "f_align", "f_border", "f_top", "f_right", "f_bottom", "f_left", "f_float"];
-                       var param = new Object();
-                       for (var i in fields) {
-                               var id = fields[i];
-                               var el = document.getElementById(id);
-                               param[id] = el.value;
-                       }
-                       dialog.performAction(param);
-                       return false;
-               };
-
-               function onCancel() {
-                       dialog.close();
-                       return false;
-               };
-
-               function onPreview() {
-                       var f_url = document.getElementById("f_url");
-                       var url = f_url.value;
-                       if (!url) {
-                               alert(dialog.plugin.localize("image_url_first"));
-                               f_url.focus();
-                               return false;
-                       }
-                       window.ipreview.location.replace(url);
-                       return false;
-               };
-               // -->
-               /*]]>*/
-       </script>
-</head>
-<body class="popupwin htmlarea-default-image" onload="Init();">
-<div id="content">
-<div class="title">Insert Image</div>
-<form action="" method="get">
-       <div id="image">
-               <label for="f_url" class="field">Image URL:</label>
-               <input type="text" id="f_url" name="url" size="45" title="Enter the image URL here" />
-               <button class="preview" name="preview" onclick="return onPreview();" title="Preview the image in a new window">Preview</button>
-       </div>
-       <div class="space"></div>
-       <div id="alt">
-               <label for="f_alt" class="field">Alternate text:</label>
-               <input type="text" name="alt" id="f_alt" size="55" title="For browsers that dont support images" />
-       </div>
-       <div class="space"></div>
-       <fieldset id="layout">
-               <legend>Layout</legend>
-               <ul>
-                       <li id="align">
-                               <label for="f_align" class="fl">Image alignment:</label>
-                               <select class="alignment" size="1" name="align" id="f_align" title="Positioning of this image">
-                                       <option value="bottom">Bottom</option>
-                                       <option value="middle" selected="selected">Middle</option>
-                                       <option value="top">Top</option>
-                               </select>
-                       </li>
-                       <li id="border">
-                               <label for="f_border" class="fl">Border thickness:</label>
-                               <input type="text" name="border" id="f_border" size="5" title="Leave empty for no border" />
-                       </li>
-                       <li id="float">
-                               <label for="f_float" class="fl">Float:</label>
-                               <select class="float" size="1" name="style" id="f_float" title="Where the image should float">
-                                       <option value="none">Non-floating</option>
-                                       <option value="left">Left</option>
-                                       <option value="right">Right</option>
-                               </select>
-                       </li>
-               </ul>
-       </fieldset>
-       <fieldset id="padding">
-               <legend>Spacing and padding</legend>
-               <ul>
-                       <li id="paddingTop">
-                               <label for="f_top" class="fl">Top:</label>
-                               <input type="text" name="f_top" id="f_top" size="5" title="Top padding" />
-                       </li>
-                       <li id="paddingRight">
-                               <label for="f_right" class="fl">Right:</label>
-                               <input type="text" name="f_right" id="f_right" size="5" title="Right padding" />
-                       </li>
-                       <li id="paddingBottom">
-                               <label for="f_bottom" class="fl">Bottom:</label>
-                               <input type="text" name="f_bottom" id="f_bottom" size="5" title="Bottom padding" />
-                       </li>
-                       <li id="paddingLeft">
-                               <label for="f_left" class="fl">Left:</label>
-                               <input type="text" name="f_left" id="f_left" size="5" title="Left padding" />
-                       </li>
-               </ul>
-       </fieldset>
-       <div class="space"></div>
-       <fieldset>
-               <legend>Image Preview</legend>
-                       <div class="imagepreview">
-                               <iframe name="ipreview" id="ipreview" frameborder="0" src="";></iframe>
-                       </div>
-       </fieldset>
-       <div class="buttons">
-               <button type="button" name="ok" onclick="return onOK();">OK</button>
-               <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
-       </div>
-       <div class="space"></div>
-</form>
-</div>
-</body>
-</html>
index c8cc854..d6f2228 100644 (file)
        text-decoration: underline;
 }
 /* Selectors for dialogue windows */
+.htmlarea-window ul.x-tab-strip {
+       list-style: none;
+}
 .htmlarea-window .x-tab-panel-body {
        background-color: #EFEFF4;
 }
        margin: 3px;
 }
 .htmlarea-window .x-form-item-label {
+       font-size: 10px;
        text-align: right;
+       margin: 0;
        padding: 3px 5px 0 5px;
 }
 .htmlarea-window .x-btn-text {
 .htmlarea-window .x-form-check-wrap {
        padding-top: 3px;
 }
+.htmlarea-window iframe {
+       background-color: #FFF;
+       color: #000;
+       border: 1px solid #A2AAB8;
+}
 .htmlarea-window .show-color {
        margin-top: 10px;
        margin-left: 5px;
 .htmlarea-custom-colors em span {
        width: 100%;
 }
-.popupwin {
-       background-color:#e4e0db;color:ButtonText;
-       font:11px Tahoma,Verdana,sans-serif;
-       border-style:none;margin:5px;padding:0;
-}
-.popupwin .title {
-       clear:both;
-       background-color:#ddf;color:#000;
-       font-weight:bold;font-size:120%;letter-spacing:2px;
-       border-top:0px;border-bottom:1px solid black;margin-top:0px;margin-bottom:10px;padding:3px 10px;
-}
-.popupwin p {
-       margin: 0.5em 0;
-}
-.popupwin h1 {
-       font-weight: bold; font-size: 1.2em;
-       padding: .3em 0; border-bottom: 1px solid #999;
-}
-.popupwin a:link, .popupwin a:visited {
-       color: #00f;
-}
-.popupwin a:hover {
-       color: #f00;
-}
-.popupwin a:active { 
-       color: #f80;
-}
-.popupwin #tabbar { position: relative; left: 10px; }
-.popupwin .tab {
-       color: #454; background-color: #66f; cursor: pointer;
-       margin-left: -5px; float: left; position: relative; top: -3px; left: -2px; z-index: 0;
-       border: 1px solid black; border-top: none; padding: 2px 10px 3px 10px;
-       -moz-border-radius: 0px 0px 4px 4px;
-       border-radius: 0px 0px 4px 4px;
-}
-.popupwin .tab-current {
-       color: #000; background-color: #ddf;
-       top: -4px; z-index: 10;
-       padding: 3px 10px 4px 10px;
-}
-.popupwin .content, .popupwin #content {
-       border-style:none;
-       margin:0;padding:0;
-}
-.popupwin ul {
-       list-style-type:none;
-       border-style:none;margin:0;padding:0;
-}
-.popupwin li {
-       margin:4px 0;
-}
-.popupwin select {
-       display:inline;
-}
-.popupwin table {
-       border-collapse:collapse;border-style:none;margin:0;padding:0;
-}
-.popupwin thead {
-       font-weight: bold; background-color: #ddf;
-}
-.popupwin td {
-       padding: 0.2em;
-}
-.popupwin form {
-       background-color:#e4e0db;
-       border-style:none;margin:0;padding:0;
-}
-.popupwin form p {
-       margin-top:5px;margin-bottom:5px;
-}
-.popupwin fieldset {
-       display:block;
-       margin:5px 5px 0 5px;padding:0 5px 2px 5px;
-}
-.popupwin fieldset div {
-       margin:3px 0;
-}
-.popupwin .floating {
-       float:left;
-}
-.popupwin legend {
-       font-weight:bold;padding:0 3px;
-}
-.popupwin .field {
-       float:left;text-align:left;
-       margin-left:5px;padding:2px 5px;
-}
-.popupwin label {
-       text-align:left;
-       margin-left:5px;padding:2px 5px;
-}
-.popupwin fieldset table {
-       font-size:11px;font-family:Tahoma,Verdana,sans-serif;
-       border-style:none;margin:2px 0;padding:0;
-}
-.popupwin .buttons {
-       clear:both;text-align:right;
-       border-top:1px solid #999;margin-top:10px;padding:5px;
-}
-.popupwin span.colorButton {
-       float:left;
-       padding:2px 0;
-}
-.popupwin span.colorButtonNoFloat {
-       padding:2px 0;
-}
-.popupwin select, .popupwin input, .popupwin button, .popupwin textarea, .popupwin table, .popupwin label {
-       font:11px Tahoma,Verdana,sans-serif;
-}
-.popupwin button {
-       background-color:#e4e0db;
-       width:8em;
-       padding:0;
-}
-.popupwin dl, .popupwin dt, .popupwin dd {
-       display: block;
-}
-.popupwin dt, .popupwin dd {
-       margin:3px 0;
-}
-.popupwin button.long-button {
-       width:10em;
-}
-.popupwin .fl {
-       float:left;text-align:right;
-       width:15em;
-       padding:2px 5px;
-}
-.popupwin .fl-borderCollapse {
-       float:left;text-align:right;
-       width:13em;
-       margin-left:10px;padding:2px 5px;
-}
-.popupwin .fr {
-       float:left;text-align:right;
-       width:9em;
-       padding:2px 5px;
-}
-.popupwin .space {
-       clear:left;
-       padding:2px;
-}
-.popupwin .label {
-       text-align:right;
-       width:8em;
-}
-.popupwin .checkbox {
-       text-align:left;
-       padding:2px 5px;
-}
-.popupwin .postlabel {
-       text-align:left;
-       padding:2px 5px;
-}
-.popupwin input.value {
-       width:30em;
-}
-.popupwin input.shorter-value {
-       width:17em;
-}
 /* Selectors for the About dialogue */
 .htmlarea-window .about-plugins .x-list-body dt {
     overflow: auto;
     white-space: normal;
 }
-/* Selectors for the Default Image dialogue */
-.htmlarea-default-image #image, .htmlarea-default-image #alt {
-       white-space:nowrap;
-}
-.htmlarea-default-image button.preview {
-       margin-left:5px;vertical-align:top;
-       white-space:normal;
-}
-.htmlarea-default-image div.imagepreview {
-       text-align:center;
-}
-.htmlarea-default-image div.imagepreview iframe {
-       width:300px;height:200px;
-       border:1px solid gray;margin:5px 0px;
+/* Selectors for the default image dialogue */
+.htmlarea-window .image-preview {
+    height: 300;
+    width: 99%;
+    float: right;
 }
 /* Selectors for the InsertSmiley plugin */
 .htmlarea-window .emoticon-array {
        float: right;
        height: 450px;
        margin: 9px 0px;
-       background-color: #FFF;
-       color: #000;
-       border: 1px solid #A2AAB8;
 }
 /* Selectors for the ContextMenu plugin */
 .htmlarea-context-menu {
        font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
        font-size:10px;
 }
+.htmlarea-context-menu ul {
+       list-style: none;
+       margin: 0;
+}
+.htmlarea-context-menu li {
+       margin: 0;
+}
+.htmlarea-context-menu a {
+       font-weight: normal;
+}
 .htmlarea-context-menu .button {
        background-color:transparent;
        background-repeat:no-repeat;
index 65a7416..6968936 100644 (file)
        text-decoration: underline;
 }
 /* Selectors for dialogue windows */
+.htmlarea-window ul.x-tab-strip {
+       list-style: none;
+}
 .htmlarea-window .x-tab-panel-body {
        background-color: #EFEFF4;
 }
        margin: 3px;
 }
 .htmlarea-window .x-form-item-label {
+       font-size: 10px;
        text-align: right;
+       margin: 0;
        padding: 3px 5px 0 5px;
 }
 .htmlarea-window .x-btn-text {
 .htmlarea-window .x-form-check-wrap {
        padding-top: 3px;
 }
+.htmlarea-window iframe {
+       background-color: #FFF;
+       color: #000;
+       border: 1px solid #A2AAB8;
+}
 .htmlarea-window .show-color {
        margin-top: 10px;
        margin-left: 5px;
 .htmlarea-custom-colors em span {
        width: 100%;
 }
-.popupwin {
-       color: #212424;background-color:#EFEFF4;
-       font-size:11px;font-family:Verdana, Helvetica, Geneva, Arial, sans-serif;
-       border-style:none;margin:5px;padding:0;
-}
-.popupwin .title {
-       clear:both;
-       color: #FFFFFF; background-color: #B8BEC9; background-image: url('alt_menu_mainitem_bg.gif'); background-position: top left; background-repeat: repeat-x;
-       font-weight:bold;font-size:120%;
-       border-top:0px;border-bottom:1px solid #A2AAB8;margin-top:0px;margin-bottom:10px;padding:3px 10px;
-}
-.popupwin p {
-       margin: 0.5em 0;
-}
-.popupwin h1 {
-       font-weight: bold; font-size: 1.1em;
-       padding: .3em 0; border-bottom: 1px solid #999;
-}
-.popupwin a:link, .popupwin a:visited {
-       color: #00f;
-}
-.popupwin a:hover {
-       color: #f00;
-}
-.popupwin a:active {
-       color: #f80;
-}
-.popupwin #tabbar { position: relative; left: 10px; }
-.popupwin .tab {
-       color: #454; background-color: #66f; cursor: pointer;
-       margin-left: -5px; float: left; position: relative; top: -3px; left: -2px; z-index: 0;
-       border: 1px solid black; border-top: none; padding: 2px 10px 3px 10px;
-}
-.popupwin .tab-current {
-       color: #000; background-color: #ddf;
-       top: -4px; z-index: 10;
-       padding: 3px 10px 4px 10px;
-}
-.popupwin .content, .popupwin #content {
-       border-style:none;
-       margin:0;padding:0;
-}
-.popupwin ul {
-       list-style-type:none;
-       border-style:none;margin:0;padding:0;
-}
-.popupwin li {
-       margin:4px 0;
-}
-.popupwin select {
-       display:inline;
-       font-size:11px;font-family:Verdana, Helvetica, Geneva, Arial, sans-serif;
-}
-.popupwin table {
-       border-collapse:collapse;border-style:none;margin:0;padding:0;
-       width:100%;
-}
-.popupwin thead {
-       font-weight: bold; background-color: #ddf;
-}
-.popupwin td {
-       padding: 0.2em;
-}
-.popupwin form {
-       background-color:#EFEFF4;
-       border-style:none;margin:0;padding:0;
-}
-.popupwin form p {
-       margin-top:5px;margin-bottom:5px;
-}
-.popupwin fieldset {
-       display:block;
-       margin:5px 5px 0 5px;padding:0 5px 2px 5px;
-}
-.popupwin fieldset div {
-       margin:3px 0;
-}
-.popupwin .floating {
-       float:left;
-}
-.popupwin legend {
-       font-weight:bold;padding:0 3px;
-}
-.popupwin .field {
-       float:left;text-align:left;
-       margin-left:5px;padding:2px 5px;
-}
-.popupwin label {
-       text-align:left;
-       margin-left:5px;padding:2px 5px;
-}
-.popupwin fieldset table {
-       font-size:1.0em;
-       border-style:none;margin:2px 0px;padding:0;
-}
-.popupwin .buttons {
-       clear:both;text-align:right;
-       border-top:1px solid #999;margin-top:10px;padding:5px;
-}
-.popupwin span.colorButton {
-       float:left;
-       padding:2px 0px;
-}
-.popupwin select, .popupwin input, .popupwin button, .popupwin textarea, .popupwin table, .popupwin label {
-       font-size:1.0em;
-       padding: 3px 1px 1px 1px;
-       font-family:Verdana, Helvetica, Geneva, Arial, sans-serif;
-}
-.popupwin button {
-       width:8em;
-       vertical-align: middle;
-       text-align: center;
-       margin: 0px 3px 0px 0px;
-       padding: 1px;
-}
-.popupwin dl, .popupwin dt, .popupwin dd {
-       display: block;
-}
-.popupwin dt, .popupwin dd {
-       margin:3px 0;
-}
-.popupwin button.long-button {
-       width:10em;
-}
-.popupwin .fl {
-       float:left;text-align:right;
-       width:15em;
-       padding:2px 5px;
-}
-.popupwin .fl-borderCollapse {
-       float:left;text-align:right;
-       width:13em;
-       margin-left:10px;padding:2px 5px;
-}
-.popupwin .fr {
-       float:left;text-align:right;
-       width:13em;
-       padding:2px 5px;
-}
-.popupwin .space {
-       clear:left;
-       padding:2px;
-}
-.popupwin .label {
-       text-align:right;
-       width:8em;
-}
-.popupwin .checkbox {
-       text-align:left;
-       padding:2px 5px;
-}
-.popupwin .postlabel {
-       text-align:left;
-       padding:2px 5px;
-}
-.popupwin input.value {
-       width:30em;
-}
-.popupwin input.shorter-value {
-       width:17em;
-}
 /* Selectors for the About dialogue */
 .htmlarea-window .about-plugins .x-list-body dt {
     overflow: auto;
     white-space: normal;
 }
-/* Selectors for the Default Image dialogue */
-.htmlarea-default-image #image, .htmlarea-default-image #alt {
-       white-space:nowrap;
-}
-.htmlarea-default-image button.preview {
-       margin-left:5px;vertical-align:top;
-       white-space:normal;
-}
-.htmlarea-default-image div.imagepreview {
-       text-align:center;
-}
-.htmlarea-default-image div.imagepreview iframe {
-       width:300px;height:200px;
-       border:1px solid gray;margin:5px 0px;
+/* Selectors for the default image dialogue */
+.htmlarea-window .image-preview {
+    height: 300;
+    width: 99%;
+    float: right;
 }
 /* Selectors for the InsertSmiley plugin */
 .htmlarea-window .emoticon-array {
        float: right;
        height: 450px;
        margin: 9px 0px;
-       background-color: #FFF;
-       color: #000;
-       border: 1px solid #A2AAB8;
 }
 /* Selectors for the ContextMenu plugin */
 .htmlarea-context-menu {
        font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
        font-size:10px;
 }
+.htmlarea-context-menu ul {
+       list-style: none;
+       margin: 0;
+}
+.htmlarea-context-menu li {
+       margin: 0;
+}
+.htmlarea-context-menu a {
+       font-weight: normal;
+}
 .htmlarea-context-menu .button {
        background-color:transparent;
        background-repeat:no-repeat;