ckeditor 3.2.1

data/lib/generators/templates/ckeditor/_source/plugins/htmlwriter/plugin.js

@@ -0,0 +1,314 @@
+/*
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+CKEDITOR.plugins.add( 'htmlwriter' );
+
+/**
+ * Class used to write HTML data.
+ * @constructor
+ * @example
+ * var writer = new CKEDITOR.htmlWriter();
+ * writer.openTag( 'p' );
+ * writer.attribute( 'class', 'MyClass' );
+ * writer.openTagClose( 'p' );
+ * writer.text( 'Hello' );
+ * writer.closeTag( 'p' );
+ * alert( writer.getHtml() );  "<p class="MyClass">Hello</p>"
+ */
+CKEDITOR.htmlWriter = CKEDITOR.tools.createClass(
+{
+	base : CKEDITOR.htmlParser.basicWriter,
+
+	$ : function()
+	{
+		// Call the base contructor.
+		this.base();
+
+		/**
+		 * The characters to be used for each identation step.
+		 * @type String
+		 * @default "\t" (tab)
+		 * @example
+		 * // Use two spaces for indentation.
+		 * editorInstance.dataProcessor.writer.indentationChars = '  ';
+		 */
+		this.indentationChars = '\t';
+
+		/**
+		 * The characters to be used to close "self-closing" elements, like "br" or
+		 * "img".
+		 * @type String
+		 * @default " />"
+		 * @example
+		 * // Use HTML4 notation for self-closing elements.
+		 * editorInstance.dataProcessor.writer.selfClosingEnd = '>';
+		 */
+		this.selfClosingEnd = ' />';
+
+		/**
+		 * The characters to be used for line breaks.
+		 * @type String
+		 * @default "\n" (LF)
+		 * @example
+		 * // Use CRLF for line breaks.
+		 * editorInstance.dataProcessor.writer.lineBreakChars = '\r\n';
+		 */
+		this.lineBreakChars = '\n';
+
+		this.forceSimpleAmpersand = false;
+
+		this.sortAttributes = true;
+
+		this._.indent = false;
+		this._.indentation = '';
+		this._.rules = {};
+
+		var dtd = CKEDITOR.dtd;
+
+		for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
+		{
+			this.setRules( e,
+				{
+					indent : true,
+					breakBeforeOpen : true,
+					breakAfterOpen : true,
+					breakBeforeClose : !dtd[ e ][ '#' ],
+					breakAfterClose : true
+				});
+		}
+
+		this.setRules( 'br',
+			{
+				breakAfterOpen : true
+			});
+
+		this.setRules( 'title',
+			{
+				indent : false,
+				breakAfterOpen : false
+			});
+
+		this.setRules( 'style',
+			{
+				indent : false,
+				breakBeforeClose : true
+			});
+
+		// Disable indentation on <pre>.
+		this.setRules( 'pre',
+			{
+			  indent: false
+			});
+	},
+
+	proto :
+	{
+		/**
+		 * Writes the tag opening part for a opener tag.
+		 * @param {String} tagName The element name for this tag.
+		 * @param {Object} attributes The attributes defined for this tag. The
+		 *		attributes could be used to inspect the tag.
+		 * @example
+		 * // Writes "&lt;p".
+		 * writer.openTag( 'p', { class : 'MyClass', id : 'MyId' } );
+		 */
+		openTag : function( tagName, attributes )
+		{
+			var rules = this._.rules[ tagName ];
+
+			if ( this._.indent )
+				this.indentation();
+			// Do not break if indenting.
+			else if ( rules && rules.breakBeforeOpen )
+			{
+				this.lineBreak();
+				this.indentation();
+			}
+
+			this._.output.push( '<', tagName );
+		},
+
+		/**
+		 * Writes the tag closing part for a opener tag.
+		 * @param {String} tagName The element name for this tag.
+		 * @param {Boolean} isSelfClose Indicates that this is a self-closing tag,
+		 *		like "br" or "img".
+		 * @example
+		 * // Writes "&gt;".
+		 * writer.openTagClose( 'p', false );
+		 * @example
+		 * // Writes " /&gt;".
+		 * writer.openTagClose( 'br', true );
+		 */
+		openTagClose : function( tagName, isSelfClose )
+		{
+			var rules = this._.rules[ tagName ];
+
+			if ( isSelfClose )
+				this._.output.push( this.selfClosingEnd );
+			else
+			{
+				this._.output.push( '>' );
+
+				if ( rules && rules.indent )
+					this._.indentation += this.indentationChars;
+			}
+
+			if ( rules && rules.breakAfterOpen )
+				this.lineBreak();
+		},
+
+		/**
+		 * Writes an attribute. This function should be called after opening the
+		 * tag with {@link #openTagClose}.
+		 * @param {String} attName The attribute name.
+		 * @param {String} attValue The attribute value.
+		 * @example
+		 * // Writes ' class="MyClass"'.
+		 * writer.attribute( 'class', 'MyClass' );
+		 */
+		attribute : function( attName, attValue )
+		{
+
+			if ( typeof attValue == 'string' )
+			{
+				this.forceSimpleAmpersand && ( attValue = attValue.replace( /&amp;/g, '&' ) );
+				// Browsers don't always escape special character in attribute values. (#4683, #4719).
+				attValue = CKEDITOR.tools.htmlEncodeAttr( attValue );
+			}
+
+			this._.output.push( ' ', attName, '="', attValue, '"' );
+		},
+
+		/**
+		 * Writes a closer tag.
+		 * @param {String} tagName The element name for this tag.
+		 * @example
+		 * // Writes "&lt;/p&gt;".
+		 * writer.closeTag( 'p' );
+		 */
+		closeTag : function( tagName )
+		{
+			var rules = this._.rules[ tagName ];
+
+			if ( rules && rules.indent )
+				this._.indentation = this._.indentation.substr( this.indentationChars.length );
+
+			if ( this._.indent )
+				this.indentation();
+			// Do not break if indenting.
+			else if ( rules && rules.breakBeforeClose )
+			{
+				this.lineBreak();
+				this.indentation();
+			}
+
+			this._.output.push( '</', tagName, '>' );
+
+			if ( rules && rules.breakAfterClose )
+				this.lineBreak();
+		},
+
+		/**
+		 * Writes text.
+		 * @param {String} text The text value
+		 * @example
+		 * // Writes "Hello Word".
+		 * writer.text( 'Hello Word' );
+		 */
+		text : function( text )
+		{
+			if ( this._.indent )
+			{
+				this.indentation();
+				text = CKEDITOR.tools.ltrim( text );
+			}
+
+			this._.output.push( text );
+		},
+
+		/**
+		 * Writes a comment.
+		 * @param {String} comment The comment text.
+		 * @example
+		 * // Writes "&lt;!-- My comment --&gt;".
+		 * writer.comment( ' My comment ' );
+		 */
+		comment : function( comment )
+		{
+			if ( this._.indent )
+				this.indentation();
+
+			this._.output.push( '<!--', comment, '-->' );
+		},
+
+		/**
+		 * Writes a line break. It uses the {@link #lineBreakChars} property for it.
+		 * @example
+		 * // Writes "\n" (e.g.).
+		 * writer.lineBreak();
+		 */
+		lineBreak : function()
+		{
+			if ( this._.output.length > 0 )
+				this._.output.push( this.lineBreakChars );
+			this._.indent = true;
+		},
+
+		/**
+		 * Writes the current indentation chars. It uses the
+		 * {@link #indentationChars} property, repeating it for the current
+		 * indentation steps.
+		 * @example
+		 * // Writes "\t" (e.g.).
+		 * writer.indentation();
+		 */
+		indentation : function()
+		{
+			this._.output.push( this._.indentation );
+			this._.indent = false;
+		},
+
+		/**
+		 * Sets formatting rules for a give element. The possible rules are:
+		 * <ul>
+		 *	<li><b>indent</b>: indent the element contents.</li>
+		 *	<li><b>breakBeforeOpen</b>: break line before the opener tag for this element.</li>
+		 *	<li><b>breakAfterOpen</b>: break line after the opener tag for this element.</li>
+		 *	<li><b>breakBeforeClose</b>: break line before the closer tag for this element.</li>
+		 *	<li><b>breakAfterClose</b>: break line after the closer tag for this element.</li>
+		 * </ul>
+		 *
+		 * All rules default to "false". Each call to the function overrides
+		 * already present rules, leaving the undefined untouched.
+		 *
+		 * By default, all elements available in the {@link CKEDITOR.dtd.$block),
+		 * {@link CKEDITOR.dtd.$listItem} and {@link CKEDITOR.dtd.$tableContent}
+		 * lists have all the above rules set to "true". Additionaly, the "br"
+		 * element has the "breakAfterOpen" set to "true".
+		 * @param {String} tagName The element name to which set the rules.
+		 * @param {Object} rules An object containing the element rules.
+		 * @example
+		 * // Break line before and after "img" tags.
+		 * writer.setRules( 'img',
+		 *     {
+		 *         breakBeforeOpen : true
+		 *         breakAfterOpen : true
+		 *     });
+		 * @example
+		 * // Reset the rules for the "h1" tag.
+		 * writer.setRules( 'h1', {} );
+		 */
+		setRules : function( tagName, rules )
+		{
+			var currentRules = this._.rules[ tagName ];
+
+			if ( currentRules )
+				CKEDITOR.tools.extend( currentRules, rules, true );
+			else
+				this._.rules[ tagName ] = rules;
+		}
+	}
+});

data/lib/generators/templates/ckeditor/_source/plugins/iframedialog/plugin.js

@@ -0,0 +1,136 @@
+/*
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+/**
+ * @fileOverview Plugin for making iframe based dialogs.
+ */
+
+CKEDITOR.plugins.add( 'iframedialog',
+{
+	requires : [ 'dialog' ],
+	onLoad : function()
+	{
+		CKEDITOR.dialog.addIframe = function( name, title, src, width, height, onContentLoad )
+		{
+			var element =
+			{
+				type : 'iframe',
+				src : src,
+				width : '100%',
+				height : '100%'
+			};
+
+			if ( typeof( onContentLoad ) == 'function' )
+				element.onContentLoad = onContentLoad;
+
+			var definition =
+			{
+				title : title,
+				minWidth : width,
+				minHeight : height,
+				contents :
+				[
+					{
+						id : 'iframe',
+						label : title,
+						expand : true,
+						elements : [ element ]
+					}
+				]
+			};
+
+			return this.add( name, function(){ return definition; } );
+		};
+
+		(function()
+		{
+			/**
+			 * An iframe element.
+			 * @extends CKEDITOR.ui.dialog.uiElement
+			 * @example
+			 * @constructor
+			 * @param {CKEDITOR.dialog} dialog
+			 * Parent dialog object.
+			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * The element definition. Accepted fields:
+			 * <ul>
+			 * 	<li><strong>src</strong> (Required) The src field of the iframe. </li>
+			 * 	<li><strong>width</strong> (Required) The iframe's width.</li>
+			 * 	<li><strong>height</strong> (Required) The iframe's height.</li>
+			 * 	<li><strong>onContentLoad</strong> (Optional) A function to be executed
+			 * 	after the iframe's contents has finished loading.</li>
+			 * </ul>
+			 * @param {Array} htmlList
+			 * List of HTML code to output to.
+			 */
+			var iframeElement = function( dialog, elementDefinition, htmlList )
+			{
+				if ( arguments.length < 3 )
+					return;
+
+				var _ = ( this._ || ( this._ = {} ) ),
+					contentLoad = elementDefinition.onContentLoad && CKEDITOR.tools.bind( elementDefinition.onContentLoad, this ),
+					cssWidth = CKEDITOR.tools.cssLength( elementDefinition.width ),
+					cssHeight = CKEDITOR.tools.cssLength( elementDefinition.height );
+				_.frameId = CKEDITOR.tools.getNextNumber() + '_iframe';
+
+				// IE BUG: Parent container does not resize to contain the iframe automatically.
+				dialog.on( 'load', function()
+					{
+						var iframe = CKEDITOR.document.getById( _.frameId ),
+							parentContainer = iframe.getParent();
+
+						parentContainer.setStyles(
+							{
+								width : cssWidth,
+								height : cssHeight
+							} );
+					} );
+
+				var attributes =
+				{
+					src : '%2',
+					id : _.frameId,
+					frameborder : 0,
+					allowtransparency : true
+				};
+				var myHtml = [];
+
+				if ( typeof( elementDefinition.onContentLoad ) == 'function' )
+					attributes.onload = 'CKEDITOR.tools.callFunction(%1);';
+
+				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, myHtml, 'iframe',
+						{
+							width : cssWidth,
+							height : cssHeight
+						}, attributes, '' );
+
+				// Put a placeholder for the first time.
+				htmlList.push( '<div style="width:' + cssWidth + ';height:' + cssHeight + ';" id="' + this.domId + '"></div>' );
+
+				// Iframe elements should be refreshed whenever it is shown.
+				myHtml = myHtml.join( '' );
+				dialog.on( 'show', function()
+					{
+						var iframe = CKEDITOR.document.getById( _.frameId ),
+							parentContainer = iframe.getParent(),
+							callIndex = CKEDITOR.tools.addFunction( contentLoad ),
+							html = myHtml.replace( '%1', callIndex ).replace( '%2', CKEDITOR.tools.htmlEncode( elementDefinition.src ) );
+						parentContainer.setHtml( html );
+					} );
+			};
+
+			iframeElement.prototype = new CKEDITOR.ui.dialog.uiElement;
+
+			CKEDITOR.dialog.addUIElement( 'iframe',
+				{
+					build : function( dialog, elementDefinition, output )
+					{
+						return new iframeElement( dialog, elementDefinition, output );
+					}
+				} );
+		})();
+	}
+} );

data/lib/generators/templates/ckeditor/_source/plugins/image/dialogs/image.js

@@ -0,0 +1,1380 @@
+/*
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+(function()
+{
+	// Load image preview.
+	var IMAGE = 1,
+		LINK = 2,
+		PREVIEW = 4,
+		CLEANUP = 8,
+		regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
+		regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
+		pxLengthRegex = /^\d+px$/;
+
+	var onSizeChange = function()
+	{
+		var value = this.getValue(),	// This = input element.
+			dialog = this.getDialog(),
+			aMatch  =  value.match( regexGetSize );	// Check value
+		if ( aMatch )
+		{
+			if ( aMatch[2] == '%' )			// % is allowed - > unlock ratio.
+				switchLockRatio( dialog, false );	// Unlock.
+			value = aMatch[1];
+		}
+
+		// Only if ratio is locked
+		if ( dialog.lockRatio )
+		{
+			var oImageOriginal = dialog.originalElement;
+			if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+			{
+				if ( this.id == 'txtHeight' )
+				{
+					if ( value && value != '0' )
+						value = Math.round( oImageOriginal.$.width * ( value  / oImageOriginal.$.height ) );
+					if ( !isNaN( value ) )
+						dialog.setValueOf( 'info', 'txtWidth', value );
+				}
+				else		//this.id = txtWidth.
+				{
+					if ( value && value != '0' )
+						value = Math.round( oImageOriginal.$.height * ( value  / oImageOriginal.$.width ) );
+					if ( !isNaN( value ) )
+						dialog.setValueOf( 'info', 'txtHeight', value );
+				}
+			}
+		}
+		updatePreview( dialog );
+	};
+
+	var updatePreview = function( dialog )
+	{
+		//Don't load before onShow.
+		if ( !dialog.originalElement || !dialog.preview )
+			return 1;
+
+		// Read attributes and update imagePreview;
+		dialog.commitContent( PREVIEW, dialog.preview );
+		return 0;
+	};
+
+	// Custom commit dialog logic, where we're intended to give inline style
+	// field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
+	// by other fields.
+	function commitContent()
+	{
+		var args = arguments;
+		var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
+		inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
+
+		this.foreach( function( widget )
+		{
+			if ( widget.commit &&  widget.id != 'txtdlgGenStyle' )
+				widget.commit.apply( widget, args );
+		});
+	}
+
+	// Avoid recursions.
+	var incommit;
+
+	// Synchronous field values to other impacted fields is required, e.g. border
+	// size change should alter inline-style text as well.
+	function commitInternally( targetFields )
+	{
+		if ( incommit )
+			return;
+
+		incommit = 1;
+
+		var dialog = this.getDialog(),
+			element = dialog.imageElement;
+		if ( element )
+		{
+			// Commit this field and broadcast to target fields.
+			this.commit( IMAGE, element );
+
+			targetFields = [].concat( targetFields );
+			var length = targetFields.length,
+				field;
+			for ( var i = 0; i < length; i++ )
+			{
+				field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
+				// May cause recursion.
+				field && field.setup( IMAGE, element );
+			}
+		}
+
+		incommit = 0;
+	}
+
+	var switchLockRatio = function( dialog, value )
+	{
+		var oImageOriginal = dialog.originalElement,
+			ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
+
+		if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+		{
+			if ( value == 'check' )			// Check image ratio and original image ratio.
+			{
+				var width = dialog.getValueOf( 'info', 'txtWidth' ),
+					height = dialog.getValueOf( 'info', 'txtHeight' ),
+					originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
+					thisRatio = width * 1000 / height;
+				dialog.lockRatio  = false;		// Default: unlock ratio
+
+				if ( !width && !height )
+					dialog.lockRatio = true;
+				else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
+				{
+					if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
+						dialog.lockRatio = true;
+				}
+			}
+			else if ( value != undefined )
+				dialog.lockRatio = value;
+			else
+				dialog.lockRatio = !dialog.lockRatio;
+		}
+		else if ( value != 'check' )		// I can't lock ratio if ratio is unknown.
+			dialog.lockRatio = false;
+
+		if ( dialog.lockRatio )
+			ratioButton.removeClass( 'cke_btn_unlocked' );
+		else
+			ratioButton.addClass( 'cke_btn_unlocked' );
+
+		var lang = dialog._.editor.lang.image,
+			label =  lang[  dialog.lockRatio ? 'unlockRatio' : 'lockRatio' ];
+
+		ratioButton.setAttribute( 'title', label );
+		ratioButton.getFirst().setText( label );
+
+		return dialog.lockRatio;
+	};
+
+	var resetSize = function( dialog )
+	{
+		var oImageOriginal = dialog.originalElement;
+		if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+		{
+			dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );
+			dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );
+		}
+		updatePreview( dialog );
+	};
+
+	var setupDimension = function( type, element )
+	{
+		if ( type != IMAGE )
+			return;
+
+		function checkDimension( size, defaultValue )
+		{
+			var aMatch  =  size.match( regexGetSize );
+			if ( aMatch )
+			{
+				if ( aMatch[2] == '%' )				// % is allowed.
+				{
+					aMatch[1] += '%';
+					switchLockRatio( dialog, false );	// Unlock ratio
+				}
+				return aMatch[1];
+			}
+			return defaultValue;
+		}
+
+		var dialog = this.getDialog(),
+			value = '',
+			dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),
+			size = element.getAttribute( dimension );
+
+		if ( size )
+			value = checkDimension( size, value );
+		value = checkDimension( element.getStyle( dimension ), value );
+
+		this.setValue( value );
+	};
+
+	var imageDialog = function( editor, dialogType )
+	{
+		var previewPreloader;
+
+		var onImgLoadEvent = function()
+		{
+			// Image is ready.
+			var original = this.originalElement;
+			original.setCustomData( 'isReady', 'true' );
+			original.removeListener( 'load', onImgLoadEvent );
+			original.removeListener( 'error', onImgLoadErrorEvent );
+			original.removeListener( 'abort', onImgLoadErrorEvent );
+
+			// Hide loader
+			CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
+
+			// New image -> new domensions
+			if ( !this.dontResetSize )
+				resetSize( this );
+
+			if ( this.firstLoad )
+				CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this );
+
+			this.firstLoad = false;
+			this.dontResetSize = false;
+		};
+
+		var onImgLoadErrorEvent = function()
+		{
+			// Error. Image is not loaded.
+			var original = this.originalElement;
+			original.removeListener( 'load', onImgLoadEvent );
+			original.removeListener( 'error', onImgLoadErrorEvent );
+			original.removeListener( 'abort', onImgLoadErrorEvent );
+
+			// Set Error image.
+			var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
+
+			if ( this.preview )
+				this.preview.setAttribute( 'src', noimage );
+
+			// Hide loader
+			CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
+			switchLockRatio( this, false );	// Unlock.
+		};
+		return {
+			title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton,
+			minWidth : 420,
+			minHeight : 310,
+			onShow : function()
+			{
+				this.imageElement = false;
+				this.linkElement = false;
+
+				// Default: create a new element.
+				this.imageEditMode = false;
+				this.linkEditMode = false;
+
+				this.lockRatio = true;
+				this.dontResetSize = false;
+				this.firstLoad = true;
+				this.addLink = false;
+
+				var editor = this.getParentEditor(),
+					sel = this.getParentEditor().getSelection(),
+					element = sel.getSelectedElement(),
+					link = element && element.getAscendant( 'a' );
+
+				//Hide loader.
+				CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
+				// Create the preview before setup the dialog contents.
+				previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );
+				this.preview = CKEDITOR.document.getById( 'previewImage' );
+
+				// Copy of the image
+				this.originalElement = editor.document.createElement( 'img' );
+				this.originalElement.setAttribute( 'alt', '' );
+				this.originalElement.setCustomData( 'isReady', 'false' );
+
+				if ( link )
+				{
+					this.linkElement = link;
+					this.linkEditMode = true;
+
+					// Look for Image element.
+					var linkChildren = link.getChildren();
+					if ( linkChildren.count() == 1 )			// 1 child.
+					{
+						var childTagName = linkChildren.getItem( 0 ).getName();
+						if ( childTagName == 'img' || childTagName == 'input' )
+						{
+							this.imageElement = linkChildren.getItem( 0 );
+							if ( this.imageElement.getName() == 'img' )
+								this.imageEditMode = 'img';
+							else if ( this.imageElement.getName() == 'input' )
+								this.imageEditMode = 'input';
+						}
+					}
+					// Fill out all fields.
+					if ( dialogType == 'image' )
+						this.setupContent( LINK, link );
+				}
+
+				if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' )
+					|| element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' )
+				{
+					this.imageEditMode = element.getName();
+					this.imageElement = element;
+				}
+
+				if ( this.imageEditMode )
+				{
+					// Use the original element as a buffer from  since we don't want
+					// temporary changes to be committed, e.g. if the dialog is canceled.
+					this.cleanImageElement = this.imageElement;
+					this.imageElement = this.cleanImageElement.clone( true, true );
+
+					// Fill out all fields.
+					this.setupContent( IMAGE, this.imageElement );
+
+					// Refresh LockRatio button
+					switchLockRatio ( this, true );
+				}
+				else
+					this.imageElement =  editor.document.createElement( 'img' );
+
+				// Dont show preview if no URL given.
+				if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )
+				{
+					this.preview.removeAttribute( 'src' );
+					this.preview.setStyle( 'display', 'none' );
+				}
+			},
+			onOk : function()
+			{
+				// Edit existing Image.
+				if ( this.imageEditMode )
+				{
+					var imgTagName = this.imageEditMode;
+
+					// Image dialog and Input element.
+					if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
+					{
+						// Replace INPUT-> IMG
+						imgTagName = 'img';
+						this.imageElement = editor.document.createElement( 'img' );
+						this.imageElement.setAttribute( 'alt', '' );
+						editor.insertElement( this.imageElement );
+					}
+					// ImageButton dialog and Image element.
+					else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
+					{
+						// Replace IMG -> INPUT
+						imgTagName = 'input';
+						this.imageElement = editor.document.createElement( 'input' );
+						this.imageElement.setAttributes(
+							{
+								type : 'image',
+								alt : ''
+							}
+						);
+						editor.insertElement( this.imageElement );
+					}
+					else
+					{
+						// Restore the original element before all commits.
+						this.imageElement = this.cleanImageElement;
+						delete this.cleanImageElement;
+					}
+				}
+				else	// Create a new image.
+				{
+					// Image dialog -> create IMG element.
+					if ( dialogType == 'image' )
+						this.imageElement = editor.document.createElement( 'img' );
+					else
+					{
+						this.imageElement = editor.document.createElement( 'input' );
+						this.imageElement.setAttribute ( 'type' ,'image' );
+					}
+					this.imageElement.setAttribute( 'alt', '' );
+				}
+
+				// Create a new link.
+				if ( !this.linkEditMode )
+					this.linkElement = editor.document.createElement( 'a' );
+
+				// Set attributes.
+				this.commitContent( IMAGE, this.imageElement );
+				this.commitContent( LINK, this.linkElement );
+
+				// Remove empty style attribute.
+				if ( !this.imageElement.getAttribute( 'style' ) )
+					this.imageElement.removeAttribute( 'style' );
+
+				// Insert a new Image.
+				if ( !this.imageEditMode )
+				{
+					if ( this.addLink )
+					{
+						//Insert a new Link.
+						if ( !this.linkEditMode )
+						{
+							editor.insertElement(this.linkElement);
+							this.linkElement.append(this.imageElement, false);
+						}
+						else	 //Link already exists, image not.
+							editor.insertElement(this.imageElement );
+					}
+					else
+						editor.insertElement( this.imageElement );
+				}
+				else		// Image already exists.
+				{
+					//Add a new link element.
+					if ( !this.linkEditMode && this.addLink )
+					{
+						editor.insertElement( this.linkElement );
+						this.imageElement.appendTo( this.linkElement );
+					}
+					//Remove Link, Image exists.
+					else if ( this.linkEditMode && !this.addLink )
+					{
+						editor.getSelection().selectElement( this.linkElement );
+						editor.insertElement( this.imageElement );
+					}
+				}
+			},
+			onLoad : function()
+			{
+				if ( dialogType != 'image' )
+					this.hidePage( 'Link' );		//Hide Link tab.
+				var doc = this._.element.getDocument();
+				this.addFocusable( doc.getById( 'btnResetSize' ), 5 );
+				this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );
+
+				this.commitContent = commitContent;
+			},
+			onHide : function()
+			{
+				if ( this.preview )
+					this.commitContent( CLEANUP, this.preview );
+
+				if ( this.originalElement )
+				{
+					this.originalElement.removeListener( 'load', onImgLoadEvent );
+					this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
+					this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
+					this.originalElement.remove();
+					this.originalElement = false;		// Dialog is closed.
+				}
+
+				delete this.imageElement;
+			},
+			contents : [
+				{
+					id : 'info',
+					label : editor.lang.image.infoTab,
+					accessKey : 'I',
+					elements :
+					[
+						{
+							type : 'vbox',
+							padding : 0,
+							children :
+							[
+								{
+									type : 'hbox',
+									widths : [ '280px', '110px' ],
+									align : 'right',
+									children :
+									[
+										{
+											id : 'txtUrl',
+											type : 'text',
+											label : editor.lang.common.url,
+											required: true,
+											onChange : function()
+											{
+												var dialog = this.getDialog(),
+													newUrl = this.getValue();
+
+												//Update original image
+												if ( newUrl.length > 0 )	//Prevent from load before onShow
+												{
+													dialog = this.getDialog();
+													var original = dialog.originalElement;
+
+													dialog.preview.removeStyle( 'display' );
+
+													original.setCustomData( 'isReady', 'false' );
+													// Show loader
+													var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );
+													if ( loader )
+														loader.setStyle( 'display', '' );
+
+													original.on( 'load', onImgLoadEvent, dialog );
+													original.on( 'error', onImgLoadErrorEvent, dialog );
+													original.on( 'abort', onImgLoadErrorEvent, dialog );
+													original.setAttribute( 'src', newUrl );
+
+													// Query the preloader to figure out the url impacted by based href.
+													previewPreloader.setAttribute( 'src', newUrl );
+													dialog.preview.setAttribute( 'src', previewPreloader.$.src );
+													updatePreview( dialog );
+												}
+												// Dont show preview if no URL given.
+												else if ( dialog.preview )
+												{
+													dialog.preview.removeAttribute( 'src' );
+													dialog.preview.setStyle( 'display', 'none' );
+												}
+											},
+											setup : function( type, element )
+											{
+												if ( type == IMAGE )
+												{
+													var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' );
+													var field = this;
+
+													this.getDialog().dontResetSize = true;
+
+													field.setValue( url );		// And call this.onChange()
+													// Manually set the initial value.(#4191)
+													field.setInitValue();
+													field.focus();
+												}
+											},
+											commit : function( type, element )
+											{
+												if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
+												{
+													element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );
+													element.setAttribute( 'src', decodeURI( this.getValue() ) );
+												}
+												else if ( type == CLEANUP )
+												{
+													element.setAttribute( 'src', '' );	// If removeAttribute doesn't work.
+													element.removeAttribute( 'src' );
+												}
+											},
+											validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
+										},
+										{
+											type : 'button',
+											id : 'browse',
+											// v-align with the 'txtUrl' field.
+											// TODO: We need something better than a fixed size here.
+											style : 'display:inline-block;margin-top:10px;',
+											align : 'center',
+											label : editor.lang.common.browseServer,
+											hidden : true,
+											filebrowser : 'info:txtUrl'
+										}
+									]
+								}
+							]
+						},
+						{
+							id : 'txtAlt',
+							type : 'text',
+							label : editor.lang.image.alt,
+							accessKey : 'A',
+							'default' : '',
+							onChange : function()
+							{
+								updatePreview( this.getDialog() );
+							},
+							setup : function( type, element )
+							{
+								if ( type == IMAGE )
+									this.setValue( element.getAttribute( 'alt' ) );
+							},
+							commit : function( type, element )
+							{
+								if ( type == IMAGE )
+								{
+									if ( this.getValue() || this.isChanged() )
+										element.setAttribute( 'alt', this.getValue() );
+								}
+								else if ( type == PREVIEW )
+								{
+									element.setAttribute( 'alt', this.getValue() );
+								}
+								else if ( type == CLEANUP )
+								{
+									element.removeAttribute( 'alt' );
+								}
+							}
+						},
+						{
+							type : 'hbox',
+							widths : [ '140px', '240px' ],
+							children :
+							[
+								{
+									type : 'vbox',
+									padding : 10,
+									children :
+									[
+										{
+											type : 'hbox',
+											widths : [ '70%', '30%' ],
+											children :
+											[
+												{
+													type : 'vbox',
+													padding : 1,
+													children :
+													[
+														{
+															type : 'text',
+															width: '40px',
+															id : 'txtWidth',
+															labelLayout : 'horizontal',
+															label : editor.lang.image.width,
+															onKeyUp : onSizeChange,
+															onChange : function()
+															{
+																commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+															},
+															validate : function()
+															{
+																var aMatch  =  this.getValue().match( regexGetSizeOrEmpty );
+																if ( !aMatch )
+																	alert( editor.lang.image.validateWidth );
+																return !!aMatch;
+															},
+															setup : setupDimension,
+															commit : function( type, element, internalCommit )
+															{
+																var value = this.getValue();
+																if ( type == IMAGE )
+																{
+																	if ( value )
+																		element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
+																	else if ( !value && this.isChanged( ) )
+																		element.removeStyle( 'width' );
+
+																	!internalCommit && element.removeAttribute( 'width' );
+																}
+																else if ( type == PREVIEW )
+																{
+																	var aMatch = value.match( regexGetSize );
+																	if ( !aMatch )
+																	{
+																		var oImageOriginal = this.getDialog().originalElement;
+																		if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+																			element.setStyle( 'width',  oImageOriginal.$.width + 'px');
+																	}
+																	else
+																		element.setStyle( 'width', value + 'px');
+																}
+																else if ( type == CLEANUP )
+																{
+																	element.removeAttribute( 'width' );
+																	element.removeStyle( 'width' );
+																}
+															}
+														},
+														{
+															type : 'text',
+															id : 'txtHeight',
+															width: '40px',
+															labelLayout : 'horizontal',
+															label : editor.lang.image.height,
+															onKeyUp : onSizeChange,
+															onChange : function()
+															{
+																commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+															},
+															validate : function()
+															{
+																var aMatch = this.getValue().match( regexGetSizeOrEmpty );
+																if ( !aMatch )
+																	alert( editor.lang.image.validateHeight );
+																return !!aMatch;
+															},
+															setup : setupDimension,
+															commit : function( type, element, internalCommit )
+															{
+																var value = this.getValue();
+																if ( type == IMAGE )
+																{
+																	if ( value )
+																		element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
+																	else if ( !value && this.isChanged( ) )
+																		element.removeStyle( 'height' );
+
+																	if ( !internalCommit && type == IMAGE )
+																		element.removeAttribute( 'height' );
+																}
+																else if ( type == PREVIEW )
+																{
+																	var aMatch = value.match( regexGetSize );
+																	if ( !aMatch )
+																	{
+																		var oImageOriginal = this.getDialog().originalElement;
+																		if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+																			element.setStyle( 'height', oImageOriginal.$.height + 'px' );
+																	}
+																	else
+																		element.setStyle( 'height', value + 'px' );
+																}
+																else if ( type == CLEANUP )
+																{
+																	element.removeAttribute( 'height' );
+																	element.removeStyle( 'height' );
+																}
+															}
+														}
+													]
+												},
+												{
+													type : 'html',
+													style : 'margin-top:10px;width:40px;height:40px;',
+													onLoad : function()
+													{
+														// Activate Reset button
+														var	resetButton = CKEDITOR.document.getById( 'btnResetSize' ),
+															ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
+														if ( resetButton )
+														{
+															resetButton.on( 'click', function(evt)
+																{
+																	resetSize( this );
+																	evt.data.preventDefault();
+																}, this.getDialog() );
+															resetButton.on( 'mouseover', function()
+																{
+																	this.addClass( 'cke_btn_over' );
+																}, resetButton );
+															resetButton.on( 'mouseout', function()
+																{
+																	this.removeClass( 'cke_btn_over' );
+																}, resetButton );
+														}
+														// Activate (Un)LockRatio button
+														if ( ratioButton )
+														{
+															ratioButton.on( 'click', function(evt)
+																{
+																	var locked = switchLockRatio( this ),
+																		oImageOriginal = this.originalElement,
+																		width = this.getValueOf( 'info', 'txtWidth' );
+
+																	if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
+																	{
+																		var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
+																		if ( !isNaN( height ) )
+																		{
+																			this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
+																			updatePreview( this );
+																		}
+																	}
+																	evt.data.preventDefault();
+																}, this.getDialog() );
+															ratioButton.on( 'mouseover', function()
+																{
+																	this.addClass( 'cke_btn_over' );
+																}, ratioButton );
+															ratioButton.on( 'mouseout', function()
+																{
+																	this.removeClass( 'cke_btn_over' );
+																}, ratioButton );
+														}
+													},
+													html : '<div>'+
+														'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.unlockRatio +
+														'" class="cke_btn_locked" id="btnLockSizes" role="button"><span class="cke_label">' + editor.lang.image.unlockRatio + '</span></a>' +
+														'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
+														'" class="cke_btn_reset" id="btnResetSize" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>'+
+														'</div>'
+												}
+											]
+										},
+										{
+											type : 'vbox',
+											padding : 1,
+											children :
+											[
+												{
+													type : 'text',
+													id : 'txtBorder',
+													width: '60px',
+													labelLayout : 'horizontal',
+													label : editor.lang.image.border,
+													'default' : '',
+													onKeyUp : function()
+													{
+														updatePreview( this.getDialog() );
+													},
+													onChange : function()
+													{
+														commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+													},
+													validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),
+													setup : function( type, element )
+													{
+														if ( type == IMAGE )
+														{
+															var value,
+																borderStyle = element.getStyle( 'border-width' );
+															borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
+															value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
+															isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );
+															this.setValue( value );
+														}
+													},
+													commit : function( type, element, internalCommit )
+													{
+														var value = parseInt( this.getValue(), 10 );
+														if ( type == IMAGE || type == PREVIEW )
+														{
+															if ( !isNaN( value ) )
+															{
+																element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
+																element.setStyle( 'border-style', 'solid' );
+															}
+															else if ( !value && this.isChanged() )
+															{
+																element.removeStyle( 'border-width' );
+																element.removeStyle( 'border-style' );
+																element.removeStyle( 'border-color' );
+															}
+
+															if ( !internalCommit && type == IMAGE )
+																element.removeAttribute( 'border' );
+														}
+														else if ( type == CLEANUP )
+														{
+															element.removeAttribute( 'border' );
+															element.removeStyle( 'border-width' );
+															element.removeStyle( 'border-style' );
+															element.removeStyle( 'border-color' );
+														}
+													}
+												},
+												{
+													type : 'text',
+													id : 'txtHSpace',
+													width: '60px',
+													labelLayout : 'horizontal',
+													label : editor.lang.image.hSpace,
+													'default' : '',
+													onKeyUp : function()
+													{
+														updatePreview( this.getDialog() );
+													},
+													onChange : function()
+													{
+														commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+													},
+													validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),
+													setup : function( type, element )
+													{
+														if ( type == IMAGE )
+														{
+															var value,
+																marginLeftPx,
+																marginRightPx,
+																marginLeftStyle = element.getStyle( 'margin-left' ),
+																marginRightStyle = element.getStyle( 'margin-right' );
+
+															marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
+															marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
+															marginLeftPx = parseInt( marginLeftStyle, 10 );
+															marginRightPx = parseInt( marginRightStyle, 10 );
+
+															value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
+															isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
+
+															this.setValue( value );
+														}
+													},
+													commit : function( type, element, internalCommit )
+													{
+														var value = parseInt( this.getValue(), 10 );
+														if ( type == IMAGE || type == PREVIEW )
+														{
+															if ( !isNaN( value ) )
+															{
+																element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
+																element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
+															}
+															else if ( !value && this.isChanged( ) )
+															{
+																element.removeStyle( 'margin-left' );
+																element.removeStyle( 'margin-right' );
+															}
+
+															if ( !internalCommit && type == IMAGE )
+																element.removeAttribute( 'hspace' );
+														}
+														else if ( type == CLEANUP )
+														{
+															element.removeAttribute( 'hspace' );
+															element.removeStyle( 'margin-left' );
+															element.removeStyle( 'margin-right' );
+														}
+													}
+												},
+												{
+													type : 'text',
+													id : 'txtVSpace',
+													width : '60px',
+													labelLayout : 'horizontal',
+													label : editor.lang.image.vSpace,
+													'default' : '',
+													onKeyUp : function()
+													{
+														updatePreview( this.getDialog() );
+													},
+													onChange : function()
+													{
+														commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+													},
+													validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),
+													setup : function( type, element )
+													{
+														if ( type == IMAGE )
+														{
+															var value,
+																marginTopPx,
+																marginBottomPx,
+																marginTopStyle = element.getStyle( 'margin-top' ),
+																marginBottomStyle = element.getStyle( 'margin-bottom' );
+
+															marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
+															marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
+															marginTopPx = parseInt( marginTopStyle, 10 );
+															marginBottomPx = parseInt( marginBottomStyle, 10 );
+
+															value = ( marginTopPx == marginBottomPx ) && marginTopPx;
+															isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );
+															this.setValue( value );
+														}
+													},
+													commit : function( type, element, internalCommit )
+													{
+														var value = parseInt( this.getValue(), 10 );
+														if ( type == IMAGE || type == PREVIEW )
+														{
+															if ( !isNaN( value ) )
+															{
+																element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );
+																element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );
+															}
+															else if ( !value && this.isChanged( ) )
+															{
+																element.removeStyle( 'margin-top' );
+																element.removeStyle( 'margin-bottom' );
+															}
+
+															if ( !internalCommit && type == IMAGE )
+																element.removeAttribute( 'vspace' );
+														}
+														else if ( type == CLEANUP )
+														{
+															element.removeAttribute( 'vspace' );
+															element.removeStyle( 'margin-top' );
+															element.removeStyle( 'margin-bottom' );
+														}
+													}
+												},
+												{
+													id : 'cmbAlign',
+													type : 'select',
+													labelLayout : 'horizontal',
+													widths : [ '35%','65%' ],
+													style : 'width:90px',
+													label : editor.lang.image.align,
+													'default' : '',
+													items :
+													[
+														[ editor.lang.common.notSet , ''],
+														[ editor.lang.image.alignLeft , 'left'],
+														[ editor.lang.image.alignRight , 'right']
+														// Backward compatible with v2 on setup when specified as attribute value,
+														// while these values are no more available as select options.
+														//	[ editor.lang.image.alignAbsBottom , 'absBottom'],
+														//	[ editor.lang.image.alignAbsMiddle , 'absMiddle'],
+														//  [ editor.lang.image.alignBaseline , 'baseline'],
+														//  [ editor.lang.image.alignTextTop , 'text-top'],
+														//  [ editor.lang.image.alignBottom , 'bottom'],
+														//  [ editor.lang.image.alignMiddle , 'middle'],
+														//  [ editor.lang.image.alignTop , 'top']
+													],
+													onChange : function()
+													{
+														updatePreview( this.getDialog() );
+														commitInternally.call( this, 'advanced:txtdlgGenStyle' );
+													},
+													setup : function( type, element )
+													{
+														if ( type == IMAGE )
+														{
+															var value = element.getStyle( 'float' );
+															switch( value )
+															{
+																// Ignore those unrelated values.
+																case 'inherit':
+																case 'none':
+																	value = '';
+															}
+
+															!value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );
+															this.setValue( value );
+														}
+													},
+													commit : function( type, element, internalCommit )
+													{
+														var value = this.getValue();
+														if ( type == IMAGE || type == PREVIEW )
+														{
+															if ( value )
+																element.setStyle( 'float', value );
+															else
+																element.removeStyle( 'float' );
+
+															if ( !internalCommit && type == IMAGE )
+															{
+																value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();
+																switch( value )
+																{
+																	// we should remove it only if it matches "left" or "right",
+																	// otherwise leave it intact.
+																	case 'left':
+																	case 'right':
+																		element.removeAttribute( 'align' );
+																}
+															}
+														}
+														else if ( type == CLEANUP )
+															element.removeStyle( 'float' );
+
+													}
+												}
+											]
+										}
+									]
+								},
+								{
+									type : 'vbox',
+									height : '250px',
+									children :
+									[
+										{
+											type : 'html',
+											style : 'width:95%;',
+											html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>'+
+											'<div id="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+
+											'<div id="ImagePreviewBox"><table><tr><td>'+
+											'<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+
+											'<img id="previewImage" alt="" /></a>' +
+											( editor.config.image_previewText ||
+											'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
+											'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
+											'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' ) +
+											'</td></tr></table></div></div>'
+										}
+									]
+								}
+							]
+						}
+					]
+				},
+				{
+					id : 'Link',
+					label : editor.lang.link.title,
+					padding : 0,
+					elements :
+					[
+						{
+							id : 'txtUrl',
+							type : 'text',
+							label : editor.lang.common.url,
+							style : 'width: 100%',
+							'default' : '',
+							setup : function( type, element )
+							{
+								if ( type == LINK )
+								{
+									var href = element.getAttribute( '_cke_saved_href' );
+									if ( !href )
+										href = element.getAttribute( 'href' );
+									this.setValue( href );
+								}
+							},
+							commit : function( type, element )
+							{
+								if ( type == LINK )
+								{
+									if ( this.getValue() || this.isChanged() )
+									{
+										element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );
+										element.setAttribute( 'href', 'javascript:void(0)/*' +
+											CKEDITOR.tools.getNextNumber() + '*/' );
+
+										if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
+											this.getDialog().addLink = true;
+									}
+								}
+							}
+						},
+						{
+							type : 'button',
+							id : 'browse',
+							filebrowser :
+							{
+								action : 'Browse',
+								target: 'Link:txtUrl',
+								url: editor.config.filebrowserImageBrowseLinkUrl || editor.config.filebrowserBrowseUrl
+							},
+							style : 'float:right',
+							hidden : true,
+							label : editor.lang.common.browseServer
+						},
+						{
+							id : 'cmbTarget',
+							type : 'select',
+							label : editor.lang.common.target,
+							'default' : '',
+							items :
+							[
+								[ editor.lang.common.notSet , ''],
+								[ editor.lang.common.targetNew , '_blank'],
+								[ editor.lang.common.targetTop , '_top'],
+								[ editor.lang.common.targetSelf , '_self'],
+								[ editor.lang.common.targetParent , '_parent']
+							],
+							setup : function( type, element )
+							{
+								if ( type == LINK )
+									this.setValue( element.getAttribute( 'target' ) );
+							},
+							commit : function( type, element )
+							{
+								if ( type == LINK )
+								{
+									if ( this.getValue() || this.isChanged() )
+										element.setAttribute( 'target', this.getValue() );
+								}
+							}
+						}
+					]
+				},
+				{
+					id : 'Upload',
+					hidden : true,
+					filebrowser : 'uploadButton',
+					label : editor.lang.image.upload,
+					elements :
+					[
+						{
+							type : 'file',
+							id : 'upload',
+							label : editor.lang.image.btnUpload,
+							style: 'height:40px',
+							size : 38
+						},
+						{
+							type : 'fileButton',
+							id : 'uploadButton',
+							filebrowser : 'info:txtUrl',
+							label : editor.lang.image.btnUpload,
+							'for' : [ 'Upload', 'upload' ]
+						}
+					]
+				},
+				{
+					id : 'advanced',
+					label : editor.lang.common.advancedTab,
+					elements :
+					[
+						{
+							type : 'hbox',
+							widths : [ '50%', '25%', '25%' ],
+							children :
+							[
+								{
+									type : 'text',
+									id : 'linkId',
+									label : editor.lang.common.id,
+									setup : function( type, element )
+									{
+										if ( type == IMAGE )
+											this.setValue( element.getAttribute( 'id' ) );
+									},
+									commit : function( type, element )
+									{
+										if ( type == IMAGE )
+										{
+											if ( this.getValue() || this.isChanged() )
+												element.setAttribute( 'id', this.getValue() );
+										}
+									}
+								},
+								{
+									id : 'cmbLangDir',
+									type : 'select',
+									style : 'width : 100px;',
+									label : editor.lang.common.langDir,
+									'default' : '',
+									items :
+									[
+										[ editor.lang.common.notSet, '' ],
+										[ editor.lang.common.langDirLtr, 'ltr' ],
+										[ editor.lang.common.langDirRtl, 'rtl' ]
+									],
+									setup : function( type, element )
+									{
+										if ( type == IMAGE )
+											this.setValue( element.getAttribute( 'dir' ) );
+									},
+									commit : function( type, element )
+									{
+										if ( type == IMAGE )
+										{
+											if ( this.getValue() || this.isChanged() )
+												element.setAttribute( 'dir', this.getValue() );
+										}
+									}
+								},
+								{
+									type : 'text',
+									id : 'txtLangCode',
+									label : editor.lang.common.langCode,
+									'default' : '',
+									setup : function( type, element )
+									{
+										if ( type == IMAGE )
+											this.setValue( element.getAttribute( 'lang' ) );
+									},
+									commit : function( type, element )
+									{
+										if ( type == IMAGE )
+										{
+											if ( this.getValue() || this.isChanged() )
+												element.setAttribute( 'lang', this.getValue() );
+										}
+									}
+								}
+							]
+						},
+						{
+							type : 'text',
+							id : 'txtGenLongDescr',
+							label : editor.lang.common.longDescr,
+							setup : function( type, element )
+							{
+								if ( type == IMAGE )
+									this.setValue( element.getAttribute( 'longDesc' ) );
+							},
+							commit : function( type, element )
+							{
+								if ( type == IMAGE )
+								{
+									if ( this.getValue() || this.isChanged() )
+										element.setAttribute( 'longDesc', this.getValue() );
+								}
+							}
+						},
+						{
+							type : 'hbox',
+							widths : [ '50%', '50%' ],
+							children :
+							[
+								{
+									type : 'text',
+									id : 'txtGenClass',
+									label : editor.lang.common.cssClass,
+									'default' : '',
+									setup : function( type, element )
+									{
+										if ( type == IMAGE )
+											this.setValue( element.getAttribute( 'class' ) );
+									},
+									commit : function( type, element )
+									{
+										if ( type == IMAGE )
+										{
+											if ( this.getValue() || this.isChanged() )
+												element.setAttribute( 'class', this.getValue() );
+										}
+									}
+								},
+								{
+									type : 'text',
+									id : 'txtGenTitle',
+									label : editor.lang.common.advisoryTitle,
+									'default' : '',
+									onChange : function()
+									{
+										updatePreview( this.getDialog() );
+									},
+									setup : function( type, element )
+									{
+										if ( type == IMAGE )
+											this.setValue( element.getAttribute( 'title' ) );
+									},
+									commit : function( type, element )
+									{
+										if ( type == IMAGE )
+										{
+											if ( this.getValue() || this.isChanged() )
+												element.setAttribute( 'title', this.getValue() );
+										}
+										else if ( type == PREVIEW )
+										{
+											element.setAttribute( 'title', this.getValue() );
+										}
+										else if ( type == CLEANUP )
+										{
+											element.removeAttribute( 'title' );
+										}
+									}
+								}
+							]
+						},
+						{
+							type : 'text',
+							id : 'txtdlgGenStyle',
+							label : editor.lang.common.cssStyle,
+							'default' : '',
+							setup : function( type, element )
+							{
+								if ( type == IMAGE )
+								{
+									var genStyle = element.getAttribute( 'style' );
+									if ( !genStyle && element.$.style.cssText )
+										genStyle = element.$.style.cssText;
+									this.setValue( genStyle );
+
+									var height = element.$.style.height,
+										width = element.$.style.width,
+										aMatchH  = ( height ? height : '' ).match( regexGetSize ),
+										aMatchW  = ( width ? width : '').match( regexGetSize );
+
+									this.attributesInStyle =
+									{
+										height : !!aMatchH,
+										width : !!aMatchW
+									};
+								}
+							},
+							onChange : function ()
+							{
+								commitInternally.call( this,
+									[ 'info:cmbFloat', 'info:cmbAlign',
+									  'info:txtVSpace', 'info:txtHSpace',
+									  'info:txtBorder',
+									  'info:txtWidth', 'info:txtHeight' ] );
+								updatePreview( this );
+							},
+							commit : function( type, element )
+							{
+								if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
+								{
+									element.setAttribute( 'style', this.getValue() );
+								}
+							}
+						}
+					]
+				}
+			]
+		};
+	};
+
+	CKEDITOR.dialog.add( 'image', function( editor )
+		{
+			return imageDialog( editor, 'image' );
+		});
+
+	CKEDITOR.dialog.add( 'imagebutton', function( editor )
+		{
+			return imageDialog( editor, 'imagebutton' );
+		});
+})();