JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.6
[ckeditor.git] / _source / plugins / docprops / dialogs / docprops.js
diff --git a/_source/plugins/docprops/dialogs/docprops.js b/_source/plugins/docprops/dialogs/docprops.js
new file mode 100644 (file)
index 0000000..f797547
--- /dev/null
@@ -0,0 +1,686 @@
+/*\r
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+*/\r
+\r
+CKEDITOR.dialog.add( 'docProps', function( editor )\r
+{\r
+       var lang = editor.lang.docprops,\r
+               langCommon = editor.lang.common,\r
+               metaHash = {};\r
+\r
+       function getDialogValue( dialogName, callback )\r
+       {\r
+               var onOk = function()\r
+               {\r
+                       releaseHandlers( this );\r
+                       callback( this, this._.parentDialog );\r
+               };\r
+               var releaseHandlers = function( dialog )\r
+               {\r
+                       dialog.removeListener( 'ok', onOk );\r
+                       dialog.removeListener( 'cancel', releaseHandlers );\r
+               };\r
+               var bindToDialog = function( dialog )\r
+               {\r
+                       dialog.on( 'ok', onOk );\r
+                       dialog.on( 'cancel', releaseHandlers );\r
+               };\r
+               editor.execCommand( dialogName );\r
+               if ( editor._.storedDialogs.colordialog )\r
+                       bindToDialog( editor._.storedDialogs.colordialog );\r
+               else\r
+               {\r
+                       CKEDITOR.on( 'dialogDefinition', function( e )\r
+                       {\r
+                               if ( e.data.name != dialogName )\r
+                                       return;\r
+\r
+                               var definition = e.data.definition;\r
+\r
+                               e.removeListener();\r
+                               definition.onLoad = CKEDITOR.tools.override( definition.onLoad, function( orginal )\r
+                               {\r
+                                       return function()\r
+                                       {\r
+                                               bindToDialog( this );\r
+                                               definition.onLoad = orginal;\r
+                                               if ( typeof orginal == 'function' )\r
+                                                       orginal.call( this );\r
+                                       };\r
+                               });\r
+                       });\r
+               }\r
+       }\r
+       function handleOther()\r
+       {\r
+               var dialog = this.getDialog(),\r
+                       other = dialog.getContentElement( 'general', this.id + 'Other' );\r
+               if ( !other )\r
+                       return;\r
+               if ( this.getValue() == 'other' )\r
+               {\r
+                       other.getInputElement().removeAttribute( 'readOnly' );\r
+                       other.focus();\r
+                       other.getElement().removeClass( 'cke_disabled' );\r
+               }\r
+               else\r
+               {\r
+                       other.getInputElement().setAttribute( 'readOnly', true );\r
+                       other.getElement().addClass( 'cke_disabled' );\r
+               }\r
+       }\r
+       function commitMeta( name, isHttp, value )\r
+       {\r
+               return function( doc, html, head )\r
+               {\r
+                       var hash = metaHash,\r
+                               val = typeof value != 'undefined' ? value : this.getValue();\r
+                       if ( !val && ( name in hash ) )\r
+                               hash[ name ].remove();\r
+                       else if ( val && ( name in hash ) )\r
+                               hash[ name ].setAttribute( 'content', val );\r
+                       else if ( val )\r
+                       {\r
+                               var meta = new CKEDITOR.dom.element( 'meta', editor.document );\r
+                               meta.setAttribute( isHttp ? 'http-equiv' : 'name', name );\r
+                               meta.setAttribute( 'content', val );\r
+                               head.append( meta );\r
+                       }\r
+               };\r
+       }\r
+       function setupMeta( name, ret )\r
+       {\r
+               return function()\r
+               {\r
+                       var hash = metaHash,\r
+                               result = ( name in hash ) ? hash[ name ].getAttribute( 'content' ) || '' : '';\r
+                       if ( ret )\r
+                               return result;\r
+                       this.setValue( result );\r
+                       return null;\r
+               };\r
+       }\r
+       function commitMargin( name )\r
+       {\r
+               return function( doc, html, head, body )\r
+               {\r
+                       body.removeAttribute( 'margin' + name );\r
+                       var val = this.getValue();\r
+                       if ( val !== '' )\r
+                               body.setStyle( 'margin-' + name, CKEDITOR.tools.cssLength( val ) );\r
+                       else\r
+                               body.removeStyle( 'margin-' + name );\r
+               };\r
+       }\r
+\r
+       function createMetaHash( doc )\r
+       {\r
+               var hash = {},\r
+                       metas = doc.getElementsByTag( 'meta' ),\r
+                       count = metas.count();\r
+\r
+               for ( var i = 0; i < count; i++ )\r
+               {\r
+                       var meta = metas.getItem( i );\r
+                       hash[ meta.getAttribute( meta.hasAttribute( 'http-equiv' ) ? 'http-equiv' : 'name' ).toLowerCase() ] = meta;\r
+               }\r
+               return hash;\r
+       }\r
+       // We cannot just remove the style from the element, as it might be affected from non-inline stylesheets.\r
+       // To get the proper result, we should manually set the inline style to its default value.\r
+       function resetStyle( element, prop, resetVal )\r
+       {\r
+               element.removeStyle( prop );\r
+               if ( element.getComputedStyle( prop ) != resetVal )\r
+                       element.setStyle( prop, resetVal );\r
+       }\r
+\r
+       // Utilty to shorten the creation of color fields in the dialog.\r
+       var colorField = function( id, label, fieldProps )\r
+       {\r
+               return {\r
+                       type : 'hbox',\r
+                       padding : 0,\r
+                       widths : [ '60%', '40%' ],\r
+                       children : [\r
+                               CKEDITOR.tools.extend( {\r
+                                       type : 'text',\r
+                                       id : id,\r
+                                       label : lang[ label ]\r
+                               }, fieldProps || {}, 1 ),\r
+                               {\r
+                                       type : 'button',\r
+                                       id : id + 'Choose',\r
+                                       label : lang.chooseColor,\r
+                                       className : 'colorChooser',\r
+                                       onClick : function()\r
+                                       {\r
+                                               var self = this;\r
+                                               getDialogValue( 'colordialog', function( colorDialog )\r
+                                               {\r
+                                                       var dialog = self.getDialog();\r
+                                                       dialog.getContentElement( dialog._.currentTabId, id ).setValue( colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue() );\r
+                                               });\r
+                                       }\r
+                               }\r
+                       ]\r
+               };\r
+       };\r
+       var previewSrc = 'javascript:' +\r
+               'void((function(){' +\r
+                       encodeURIComponent(\r
+                               'document.open();' +\r
+                               ( CKEDITOR.env.isCustomDomain() ? 'document.domain=\'' + document.domain + '\';' : '' ) +\r
+                               'document.write( \'<html style="background-color: #ffffff; height: 100%"><head></head><body style="width: 100%; height: 100%; margin: 0px">' + lang.previewHtml + '</body></html>\' );' +\r
+                               'document.close();'\r
+                       ) +\r
+               '})())';\r
+\r
+       return {\r
+               title : lang.title,\r
+               minHeight: 330,\r
+               minWidth: 500,\r
+               onShow : function()\r
+               {\r
+                       var doc = editor.document,\r
+                               html = doc.getElementsByTag( 'html' ).getItem( 0 ),\r
+                               head = doc.getHead(),\r
+                               body = doc.getBody();\r
+                       metaHash = createMetaHash( doc );\r
+                       this.setupContent( doc, html, head, body );\r
+               },\r
+               onHide : function()\r
+               {\r
+                       metaHash = {};\r
+               },\r
+               onOk : function()\r
+               {\r
+                       var doc = editor.document,\r
+                               html = doc.getElementsByTag( 'html' ).getItem( 0 ),\r
+                               head = doc.getHead(),\r
+                               body = doc.getBody();\r
+                       this.commitContent( doc, html, head, body );\r
+               },\r
+               contents : [\r
+                       {\r
+                               id : 'general',\r
+                               label : langCommon.generalTab,\r
+                               elements : [\r
+                                       {\r
+                                               type : 'text',\r
+                                               id : 'title',\r
+                                               label : lang.docTitle,\r
+                                               setup : function( doc )\r
+                                               {\r
+                                                       this.setValue( doc.getElementsByTag( 'title' ).getItem( 0 ).data( 'cke-title' ) );\r
+                                               },\r
+                                               commit : function( doc, html, head, body, isPreview )\r
+                                               {\r
+                                                       if ( isPreview )\r
+                                                               return;\r
+                                                       doc.getElementsByTag( 'title' ).getItem( 0 ).data( 'cke-title', this.getValue() );\r
+                                               }\r
+                                       },\r
+                                       {\r
+                                               type : 'hbox',\r
+                                               children : [\r
+                                                       {\r
+                                                               type : 'select',\r
+                                                               id : 'dir',\r
+                                                               label : langCommon.langDir,\r
+                                                               style : 'width: 100%',\r
+                                                               items : [\r
+                                                                       [ langCommon.notSet , '' ],\r
+                                                                       [ langCommon.langDirLtr, 'ltr' ],\r
+                                                                       [ langCommon.langDirRtl, 'rtl' ]\r
+                                                               ],\r
+                                                               setup : function( doc, html, head, body )\r
+                                                               {\r
+                                                                       this.setValue( body.getDirection() || '' );\r
+                                                               },\r
+                                                               commit : function( doc, html, head, body )\r
+                                                               {\r
+                                                                       var val = this.getValue();\r
+                                                                       if ( val )\r
+                                                                               body.setAttribute( 'dir', val );\r
+                                                                       else\r
+                                                                               body.removeAttribute( 'dir' );\r
+                                                                       body.removeStyle( 'direction' );\r
+                                                               }\r
+                                                       },\r
+                                                       {\r
+                                                               type : 'text',\r
+                                                               id : 'langCode',\r
+                                                               label : langCommon.langCode,\r
+                                                               setup : function( doc, html )\r
+                                                               {\r
+                                                                       this.setValue( html.getAttribute( 'xml:lang' ) || html.getAttribute( 'lang' ) || '' );\r
+                                                               },\r
+                                                               commit : function( doc, html, head, body, isPreview )\r
+                                                               {\r
+                                                                       if ( isPreview )\r
+                                                                               return;\r
+                                                                       var val = this.getValue();\r
+                                                                       if ( val )\r
+                                                                               html.setAttributes( { 'xml:lang' : val, lang : val } );\r
+                                                                       else\r
+                                                                               html.removeAttributes( { 'xml:lang' : 1, lang : 1 } );\r
+                                                               }\r
+                                                       }\r
+                                               ]\r
+                                       },\r
+                                       {\r
+                                               type : 'hbox',\r
+                                               children : [\r
+                                                       {\r
+                                                               type : 'select',\r
+                                                               id : 'charset',\r
+                                                               label : lang.charset,\r
+                                                               style : 'width: 100%',\r
+                                                               items : [\r
+                                                                       [ langCommon.notSet, '' ],\r
+                                                                       [ lang.charsetASCII, 'us-ascii' ],\r
+                                                                       [ lang.charsetCE, 'iso-8859-2' ],\r
+                                                                       [ lang.charsetCT, 'big5' ],\r
+                                                                       [ lang.charsetCR, 'iso-8859-5' ],\r
+                                                                       [ lang.charsetGR, 'iso-8859-7' ],\r
+                                                                       [ lang.charsetJP, 'iso-2022-jp' ],\r
+                                                                       [ lang.charsetKR, 'iso-2022-kr' ],\r
+                                                                       [ lang.charsetTR, 'iso-8859-9' ],\r
+                                                                       [ lang.charsetUN, 'utf-8' ],\r
+                                                                       [ lang.charsetWE, 'iso-8859-1' ],\r
+                                                                       [ lang.other, 'other' ]\r
+                                                               ],\r
+                                                               'default' : '',\r
+                                                               onChange : function()\r
+                                                               {\r
+                                                                       this.getDialog().selectedCharset = this.getValue() != 'other' ? this.getValue() : '';\r
+                                                                       handleOther.call( this );\r
+                                                               },\r
+                                                               setup : function()\r
+                                                               {\r
+                                                                       this.metaCharset = ( 'charset' in metaHash );\r
+\r
+                                                                       var func = setupMeta( this.metaCharset ? 'charset' : 'content-type', 1, 1 ),\r
+                                                                               val = func.call( this );\r
+\r
+                                                                       !this.metaCharset && val.match( /charset=[^=]+$/ ) && ( val = val.substring( val.indexOf( '=' ) + 1 ) );\r
+\r
+                                                                       if ( val )\r
+                                                                       {\r
+                                                                               this.setValue( val.toLowerCase() );\r
+                                                                               if ( !this.getValue() )\r
+                                                                               {\r
+                                                                                       this.setValue( 'other' );\r
+                                                                                       var other = this.getDialog().getContentElement( 'general', 'charsetOther' );\r
+                                                                                       other && other.setValue( val );\r
+                                                                               }\r
+                                                                               this.getDialog().selectedCharset = val;\r
+                                                                       }\r
+\r
+                                                                       handleOther.call( this );\r
+                                                               },\r
+                                                               commit : function( doc, html, head, body, isPreview )\r
+                                                               {\r
+                                                                       if ( isPreview )\r
+                                                                               return;\r
+                                                                       var value = this.getValue(),\r
+                                                                               other = this.getDialog().getContentElement( 'general', 'charsetOther' );\r
+\r
+                                                                       value == 'other' && ( value = other ? other.getValue() : '' );\r
+\r
+                                                                       value && !this.metaCharset && ( value = ( metaHash[ 'content-type' ] ? metaHash[ 'content-type' ].getAttribute( 'content' ).split( ';' )[0] : 'text/html' ) + '; charset=' + value );\r
+\r
+                                                                       var func = commitMeta( this.metaCharset ? 'charset' : 'content-type', 1, value );\r
+                                                                       func.call( this, doc, html, head );\r
+                                                               }\r
+                                                       },\r
+                                                       {\r
+                                                               type : 'text',\r
+                                                               id : 'charsetOther',\r
+                                                               label : lang.charsetOther,\r
+                                                               onChange : function(){ this.getDialog().selectedCharset = this.getValue(); }\r
+                                                       }\r
+                                               ]\r
+                                       },\r
+                                       {\r
+                                               type : 'hbox',\r
+                                               children : [\r
+                                                       {\r
+                                                               type : 'select',\r
+                                                               id : 'docType',\r
+                                                               label : lang.docType,\r
+                                                               style : 'width: 100%',\r
+                                                               items : [\r
+                                                                       [ langCommon.notSet , '' ],\r
+                                                                       [ 'XHTML 1.1', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">' ],\r
+                                                                       [ 'XHTML 1.0 Transitional', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' ],\r
+                                                                       [ 'XHTML 1.0 Strict', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' ],\r
+                                                                       [ 'XHTML 1.0 Frameset', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">' ],\r
+                                                                       [ 'HTML 5', '<!DOCTYPE html>' ],\r
+                                                                       [ 'HTML 4.01 Transitional', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">' ],\r
+                                                                       [ 'HTML 4.01 Strict', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' ],\r
+                                                                       [ 'HTML 4.01 Frameset', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">' ],\r
+                                                                       [ 'HTML 3.2', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">' ],\r
+                                                                       [ 'HTML 2.0', '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">' ],\r
+                                                                       [ lang.other, 'other' ]\r
+                                                               ],\r
+                                                               onChange : handleOther,\r
+                                                               setup : function()\r
+                                                               {\r
+                                                                       if ( editor.docType )\r
+                                                                       {\r
+                                                                               this.setValue( editor.docType );\r
+                                                                               if ( !this.getValue() )\r
+                                                                               {\r
+                                                                                       this.setValue( 'other' );\r
+                                                                                       var other = this.getDialog().getContentElement( 'general', 'docTypeOther' );\r
+                                                                                       other && other.setValue( editor.docType );\r
+                                                                               }\r
+                                                                       }\r
+                                                                       handleOther.call( this );\r
+                                                               },\r
+                                                               commit : function( doc, html, head, body, isPreview )\r
+                                                               {\r
+                                                                       if ( isPreview )\r
+                                                                               return;\r
+                                                                       var value = this.getValue(),\r
+                                                                               other = this.getDialog().getContentElement( 'general', 'docTypeOther' );\r
+                                                                       editor.docType = value == 'other' ? ( other ? other.getValue() : '' ) : value;\r
+                                                               }\r
+                                                       },\r
+                                                       {\r
+                                                               type : 'text',\r
+                                                               id : 'docTypeOther',\r
+                                                               label : lang.docTypeOther\r
+                                                       }\r
+                                               ]\r
+                                       },\r
+                                       {\r
+                                               type : 'checkbox',\r
+                                               id : 'xhtmlDec',\r
+                                               label : lang.xhtmlDec,\r
+                                               setup : function()\r
+                                               {\r
+                                                       this.setValue( !!editor.xmlDeclaration );\r
+                                               },\r
+                                               commit : function( doc, html, head, body, isPreview )\r
+                                               {\r
+                                                       if ( isPreview )\r
+                                                               return;\r
+                                                       if ( this.getValue() )\r
+                                                       {\r
+                                                               editor.xmlDeclaration = '<?xml version="1.0" encoding="' + ( this.getDialog().selectedCharset || 'utf-8' )+ '"?>' ;\r
+                                                               html.setAttribute( 'xmlns', 'http://www.w3.org/1999/xhtml' );\r
+                                                       }\r
+                                                       else\r
+                                                       {\r
+                                                               editor.xmlDeclaration = '';\r
+                                                               html.removeAttribute( 'xmlns' );\r
+                                                       }\r
+                                               }\r
+                                       }\r
+                               ]\r
+                       },\r
+                       {\r
+                               id : 'design',\r
+                               label : lang.design,\r
+                               elements : [\r
+                                       {\r
+                                               type : 'hbox',\r
+                                               widths : [ '60%', '40%' ],\r
+                                               children : [\r
+                                                       {\r
+                                                               type : 'vbox',\r
+                                                               children : [\r
+                                                                       colorField( 'txtColor', 'txtColor',\r
+                                                                       {\r
+                                                                               setup : function( doc, html, head, body )\r
+                                                                               {\r
+                                                                                       this.setValue( body.getComputedStyle( 'color' ) );\r
+                                                                               },\r
+                                                                               commit : function( doc, html, head, body, isPreview )\r
+                                                                               {\r
+                                                                                       if ( this.isChanged() || isPreview )\r
+                                                                                       {\r
+                                                                                               body.removeAttribute( 'text' );\r
+                                                                                               var val = this.getValue();\r
+                                                                                               if ( val )\r
+                                                                                                       body.setStyle( 'color', val );\r
+                                                                                               else\r
+                                                                                                       body.removeStyle( 'color' );\r
+                                                                                       }\r
+                                                                               }\r
+                                                                       }),\r
+                                                                       colorField( 'bgColor', 'bgColor', {\r
+                                                                               setup : function( doc, html, head, body )\r
+                                                                               {\r
+                                                                                       var val = body.getComputedStyle( 'background-color' ) || '';\r
+                                                                                       this.setValue( val == 'transparent' ? '' : val );\r
+                                                                               },\r
+                                                                               commit : function( doc, html, head, body, isPreview )\r
+                                                                               {\r
+                                                                                       if ( this.isChanged() || isPreview )\r
+                                                                                       {\r
+                                                                                               body.removeAttribute( 'bgcolor' );\r
+                                                                                               var val = this.getValue();\r
+                                                                                               if ( val )\r
+                                                                                                       body.setStyle( 'background-color', val );\r
+                                                                                               else\r
+                                                                                                       resetStyle( body, 'background-color', 'transparent' );\r
+                                                                                       }\r
+                                                                               }\r
+                                                                       }),\r
+                                                                       {\r
+                                                                               type : 'hbox',\r
+                                                                               widths : [ '60%', '40%' ],\r
+                                                                               padding : 0,\r
+                                                                               children : [\r
+                                                                                       {\r
+                                                                                               type : 'text',\r
+                                                                                               id : 'bgImage',\r
+                                                                                               label : lang.bgImage,\r
+                                                                                               setup : function( doc, html, head, body )\r
+                                                                                               {\r
+                                                                                                       var val = body.getComputedStyle( 'background-image' ) || '';\r
+                                                                                                       if ( val == 'none' )\r
+                                                                                                               val = '';\r
+                                                                                                       else\r
+                                                                                                       {\r
+                                                                                                               val = val.replace( /url\(\s*(["']?)\s*([^\)]*)\s*\1\s*\)/i, function( match, quote, url )\r
+                                                                                                               {\r
+                                                                                                                       return url;\r
+                                                                                                               });\r
+                                                                                                       }\r
+                                                                                                       this.setValue( val );\r
+                                                                                               },\r
+                                                                                               commit : function( doc, html, head, body )\r
+                                                                                               {\r
+                                                                                                       body.removeAttribute( 'background' );\r
+                                                                                                       var val = this.getValue();\r
+                                                                                                       if ( val )\r
+                                                                                                               body.setStyle( 'background-image', 'url(' + val + ')' );\r
+                                                                                                       else\r
+                                                                                                               resetStyle( body, 'background-image', 'none' );\r
+                                                                                               }\r
+                                                                                       },\r
+                                                                                       {\r
+                                                                                               type : 'button',\r
+                                                                                               id : 'bgImageChoose',\r
+                                                                                               label : langCommon.browseServer,\r
+                                                                                               style : 'display:inline-block;margin-top:10px;',\r
+                                                                                               hidden : true,\r
+                                                                                               filebrowser : 'bg:bgImage'\r
+                                                                                       }\r
+                                                                               ]\r
+                                                                       },\r
+                                                                       {\r
+                                                                               type : 'checkbox',\r
+                                                                               id : 'bgFixed',\r
+                                                                               label : lang.bgFixed,\r
+                                                                               setup : function( doc, html, head, body )\r
+                                                                               {\r
+                                                                                       this.setValue( body.getComputedStyle( 'background-attachment' ) == 'fixed' );\r
+                                                                               },\r
+                                                                               commit : function( doc, html, head, body )\r
+                                                                               {\r
+                                                                                       if ( this.getValue() )\r
+                                                                                               body.setStyle( 'background-attachment', 'fixed' );\r
+                                                                                       else\r
+                                                                                               resetStyle( body, 'background-attachment', 'scroll' );\r
+                                                                               }\r
+                                                                       }\r
+                                                               ]\r
+                                                       },\r
+                                                       {\r
+                                                               type : 'vbox',\r
+                                                               children : [\r
+                                                                       {\r
+                                                                               type : 'html',\r
+                                                                               id : 'marginTitle',\r
+                                                                               html : '<div style="text-align: center; margin: 0px auto; font-weight: bold">' + lang.margin + '</div>'\r
+                                                                       },\r
+                                                                       {\r
+                                                                               type : 'text',\r
+                                                                               id : 'marginTop',\r
+                                                                               label : lang.marginTop,\r
+                                                                               style : 'width: 80px; text-align: center; margin: 0px auto',\r
+                                                                               controlStyle : 'text-align: center',\r
+                                                                               setup : function( doc, html, head, body )\r
+                                                                               {\r
+                                                                                       this.setValue( body.getStyle( 'margin-top' ) || body.getAttribute( 'margintop' ) || '' );\r
+                                                                               },\r
+                                                                               commit : commitMargin( 'top' ),\r
+                                                                               onLoad : function()\r
+                                                                               {\r
+                                                                                       this.getElement().getParent().setStyle( 'text-align', 'center' );\r
+                                                                               }\r
+                                                                       },\r
+                                                                       {\r
+                                                                               type : 'hbox',\r
+                                                                               children : [\r
+                                                                                       {\r
+                                                                                               type : 'text',\r
+                                                                                               id : 'marginLeft',\r
+                                                                                               label : lang.marginLeft,\r
+                                                                                               style : 'width: 80px; text-align: center; margin: 0px auto',\r
+                                                                                               controlStyle : 'text-align: center',\r
+                                                                                               setup : function( doc, html, head, body )\r
+                                                                                               {\r
+                                                                                                       this.setValue( body.getStyle( 'margin-left' ) || body.getAttribute( 'marginleft' ) || '' );\r
+                                                                                               },\r
+                                                                                               commit : commitMargin( 'left' ),\r
+                                                                                               onLoad : function()\r
+                                                                                               {\r
+                                                                                                       this.getElement().getParent().setStyle( 'text-align', 'center' );\r
+                                                                                               }\r
+                                                                                       },\r
+                                                                                       {\r
+                                                                                               type : 'text',\r
+                                                                                               id : 'marginRight',\r
+                                                                                               label : lang.marginRight,\r
+                                                                                               style : 'width: 80px; text-align: center; margin: 0px auto',\r
+                                                                                               controlStyle : 'text-align: center',\r
+                                                                                               setup : function( doc, html, head, body )\r
+                                                                                               {\r
+                                                                                                       this.setValue( body.getStyle( 'margin-right' ) || body.getAttribute( 'marginright' ) || '' );\r
+                                                                                               },\r
+                                                                                               commit : commitMargin( 'right' ),\r
+                                                                                               onLoad : function()\r
+                                                                                               {\r
+                                                                                                       this.getElement().getParent().setStyle( 'text-align', 'center' );\r
+                                                                                               }\r
+                                                                                       }\r
+                                                                               ]\r
+                                                                       },\r
+                                                                       {\r
+                                                                               type : 'text',\r
+                                                                               id : 'marginBottom',\r
+                                                                               label : lang.marginBottom,\r
+                                                                               style : 'width: 80px; text-align: center; margin: 0px auto',\r
+                                                                               controlStyle : 'text-align: center',\r
+                                                                               setup : function( doc, html, head, body )\r
+                                                                               {\r
+                                                                                       this.setValue( body.getStyle( 'margin-bottom' ) || body.getAttribute( 'marginbottom' ) || '' );\r
+                                                                               },\r
+                                                                               commit : commitMargin( 'bottom' ),\r
+                                                                               onLoad : function()\r
+                                                                               {\r
+                                                                                       this.getElement().getParent().setStyle( 'text-align', 'center' );\r
+                                                                               }\r
+                                                                       }\r
+                                                               ]\r
+                                                       }\r
+                                               ]\r
+                                       }\r
+                               ]\r
+                       },\r
+                       {\r
+                               id : 'meta',\r
+                               label : lang.meta,\r
+                               elements : [\r
+                                       {\r
+                                               type : 'textarea',\r
+                                               id : 'metaKeywords',\r
+                                               label : lang.metaKeywords,\r
+                                               setup : setupMeta( 'keywords' ),\r
+                                               commit : commitMeta( 'keywords' )\r
+                                       },\r
+                                       {\r
+                                               type : 'textarea',\r
+                                               id : 'metaDescription',\r
+                                               label : lang.metaDescription,\r
+                                               setup : setupMeta( 'description' ),\r
+                                               commit : commitMeta( 'description' )\r
+                                       },\r
+                                       {\r
+                                               type : 'text',\r
+                                               id : 'metaAuthor',\r
+                                               label : lang.metaAuthor,\r
+                                               setup : setupMeta( 'author' ),\r
+                                               commit : commitMeta( 'author' )\r
+                                       },\r
+                                       {\r
+                                               type : 'text',\r
+                                               id : 'metaCopyright',\r
+                                               label : lang.metaCopyright,\r
+                                               setup : setupMeta( 'copyright' ),\r
+                                               commit : commitMeta( 'copyright' )\r
+                                       }\r
+                               ]\r
+                       },\r
+                       {\r
+                               id : 'preview',\r
+                               label : langCommon.preview,\r
+                               elements : [\r
+                                       {\r
+                                               type : 'html',\r
+                                               id : 'previewHtml',\r
+                                               html : '<iframe src="' + previewSrc + '" style="width: 100%; height: 310px" hidefocus="true" frameborder="0" ' +\r
+                                                               'id="cke_docProps_preview_iframe"></iframe>',\r
+                                               onLoad : function()\r
+                                               {\r
+                                                       this.getDialog().on( 'selectPage', function( ev )\r
+                                                       {\r
+                                                               if ( ev.data.page == 'preview' )\r
+                                                               {\r
+                                                                       var self = this;\r
+                                                                       setTimeout( function()\r
+                                                                       {\r
+                                                                               var doc = CKEDITOR.document.getById( 'cke_docProps_preview_iframe' ).getFrameDocument(),\r
+                                                                                       html = doc.getElementsByTag( 'html' ).getItem( 0 ),\r
+                                                                                       head = doc.getHead(),\r
+                                                                                       body = doc.getBody();\r
+                                                                               self.commitContent( doc, html, head, body, 1 );\r
+                                                                       }, 50 );\r
+                                                               }\r
+                                                       });\r
+                                                       CKEDITOR.document.getById( 'cke_docProps_preview_iframe' ).getAscendant( 'table' ).setStyle( 'height', '100%' );\r
+                                               }\r
+                                       }\r
+                               ]\r
+                       }\r
+               ]\r
+       };\r
+});\r