Ticket #2853: 2853.patch

File 2853.patch, 43.4 KB (added by Artur Formella, 16 years ago)
  • _source/core/config.js

     
    146146         * @example
    147147         * config.plugins = 'basicstyles,button,htmldataprocessor,toolbar,wysiwygarea';
    148148         */
    149         plugins : 'basicstyles,button,elementspath,horizontalrule,htmldataprocessor,keystrokes,newpage,removeformat,smiley,sourcearea,specialchar,tab,toolbar,wysiwygarea',
     149        plugins : 'basicstyles,button,elementspath,horizontalrule,htmldataprocessor,keystrokes,newpage,removeformat,smiley,sourcearea,specialchar,tab,toolbar,wysiwygarea,image',
    150150
    151151        /**
    152152         * The theme to be used to build the UI.
  • _source/plugins/image/dialogs/image.js

     
     1/*
     2Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5
     6imageDialog = function( editor, dialogType )
     7{
     8        // Load image preview.
     9        var IMAGE = 1,
     10                LINK = 2,
     11                PREVIEW = 4,
     12                ORIGINAL = 8,
     13                CLEANUP = 16,
     14                showPreview = editor.config.image.showPreview,
     15                regexSize = /^\s*(\d+)((px)|\%)?\s*$/i,
     16                regexValidSize = /^(\d+)\%?$|^$/i,
     17                imageDialog = ( dialogType == 'image' );
     18
     19        var onImgLoadEvent = function()
     20        {
     21                // Image is ready.
     22                var original = this.editObj[ ORIGINAL ];
     23                original.setCustomData( 'isReady', 'true' );
     24                original.removeListener( 'load', onImgLoadEvent );
     25                original.removeListener( 'error', onImgLoadErrorEvent );
     26                original.removeListener( 'abort', onImgLoadErrorEvent );
     27
     28                // Hide loader
     29                CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
     30
     31                // New image -> new domensions
     32                if ( this.dontResetSize == false )
     33                        resetSize( this );
     34                else
     35                        updatePreview( this );          // Uptade only
     36
     37                if ( this.firstLoad )
     38                        switchLockRatio( this, 'check' );
     39                this.firstLoad = false;
     40                this.dontResetSize = false;
     41        }
     42        var onImgLoadErrorEvent = function()
     43        {
     44                // Error. Image is not loaded.
     45                var original = this.editObj[ ORIGINAL ];
     46                original.removeListener( 'load', onImgLoadEvent );
     47                original.removeListener( 'error', onImgLoadErrorEvent );
     48                original.removeListener( 'abort', onImgLoadErrorEvent );
     49
     50                // Set Error image.
     51                var noimage = CKEDITOR.getUrl(
     52                        '_source/' +    // %REMOVE_LINE%
     53                        'skins/' + editor.config.skin + '/images/dialog.noimage.gif' );
     54
     55                if ( showPreview && this.editObj[ PREVIEW ] )
     56                        this.editObj[ PREVIEW ].setAttribute( 'src', noimage );
     57
     58                // Hide loader
     59                CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
     60                switchLockRatio( this, false ); // Unlock.
     61        }
     62        var onSizeChange = function()
     63        {
     64                var value = this.getValue(),    // This = input element.
     65                        dialog = this.getDialog();
     66
     67                //Don't load before onShow.
     68                if ( !dialog.allowOnChange )
     69                        return 0;
     70
     71                // Check value
     72                var aMatch  =  value.match( regexSize );
     73                if ( aMatch )
     74                {
     75                        if ( aMatch[2] == '%' )                 // % is allowed - > unlock ratio.
     76                                switchLockRatio( dialog, false );       // Unlock.
     77                        value = aMatch[1];
     78                }
     79
     80                // Only if ratio is locked
     81                if ( dialog.lockRatio )
     82                {
     83                        var oImageOriginal = dialog.editObj[ ORIGINAL ];
     84                        if ( oImageOriginal && oImageOriginal.getCustomData( 'isReady' ) == 'true' )
     85                        {
     86                                if ( this.id == 'txtHeight' ){
     87                                        if ( value != '' && value != 0 )
     88                                                value = Math.round( oImageOriginal.$.width * ( value  / oImageOriginal.$.height ) );
     89                                        if ( !isNaN( value ) )
     90                                                dialog.setValueOf( 'info', 'txtWidth', value );
     91                                }
     92                                else            //this.id = txtWidth.
     93                                {
     94                                        if ( value != '' && value != 0 )
     95                                                value = Math.round( oImageOriginal.$.height * ( value  / oImageOriginal.$.width ) );
     96                                        if ( !isNaN( value ) )
     97                                                dialog.setValueOf( 'info', 'txtHeight', value );
     98                                }
     99                        }
     100                }
     101                updatePreview( dialog );
     102        }
     103
     104        var updatePreview = function( dialog )
     105        {
     106                //Don't load before onShow.
     107                if ( !dialog.allowOnChange || !dialog.editObj[ PREVIEW ] )
     108                        return 1;
     109
     110                // Read attributes and update imagePreview;
     111                dialog.commitContent( PREVIEW, dialog.editObj[ PREVIEW ] );
     112                return 0;
     113        }
     114
     115        var switchLockRatio = function( dialog, value )
     116        {
     117                var oImageOriginal = dialog.editObj[ ORIGINAL ];
     118                if ( oImageOriginal && oImageOriginal.getCustomData( 'isReady' ) == 'true' )
     119                {
     120                        if ( value == 'check' )                 // Check image ratio and original image ratio.
     121                        {
     122                                var width = dialog.getValueOf( 'info', 'txtWidth' ),
     123                                        height = dialog.getValueOf( 'info', 'txtHeight' ),
     124                                        originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
     125                                        thisRatio = width * 1000 / height;
     126                                dialog.lockRatio  = false;              // Default: unlock ratio
     127
     128                                if ( width == 0 && height == 0 )
     129                                        dialog.lockRatio = true;
     130                                else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ))
     131                                        if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
     132                                                dialog.lockRatio = true;
     133                        }
     134                        else if ( value != undefined )
     135                                dialog.lockRatio = value
     136                        else
     137                                dialog.lockRatio = !dialog.lockRatio;
     138                }
     139                else if ( value != 'check' )            // I can't lock ratio if ratio is unknown.
     140                        dialog.lockRatio = false;
     141
     142                var ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
     143                if ( dialog.lockRatio )
     144                        ratioButton.removeClass( 'BtnUnlocked' );
     145                else
     146                        ratioButton.addClass( 'BtnUnlocked' );
     147
     148                return dialog.lockRatio;
     149        }
     150
     151        var resetSize = function( dialog )
     152        {
     153                var oImageOriginal = dialog.editObj[ ORIGINAL ];
     154                if ( oImageOriginal && oImageOriginal.getCustomData( 'isReady' ) == 'true' )
     155                {
     156                        dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );
     157                        dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );
     158                }
     159                updatePreview( dialog );
     160        }
     161
     162        setupDimension = function( type, element )
     163        {
     164                if ( type != IMAGE )
     165                        return 0;
     166
     167                var checkDimension = function( size, defaultValue )
     168                {
     169                        var aMatch  =  size.match( regexSize );
     170                        if ( aMatch )
     171                        {
     172                                if ( aMatch[2] == '%' )                         // % is allowed.
     173                                {
     174                                        aMatch[1] += '%';
     175                                        switchLockRatio( dialog, false );       // Unlock ratio
     176                                }
     177                                return aMatch[1];
     178                        }
     179                        return defaultValue;
     180                },
     181                        dialog = this.getDialog(),
     182                        value = '',
     183                        dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),
     184                        size = element.getAttribute( dimension );
     185
     186                if ( size )
     187                        value = checkDimension( size, value );
     188                value = checkDimension( element.$.style[ dimension ], value );
     189               
     190                this.setValue( value );
     191        }
     192
     193        return {
     194                title : ( imageDialog ) ? editor.lang.image.title : editor.lang.image.titleButton,
     195                minWidth : 450,
     196                minHeight : 400,
     197                onOk : function()
     198                {
     199                        this.allowOnChange = true;
     200
     201                        var removeObj = false;
     202
     203                        // Edit existing Image.
     204                        if ( this.editMode[ IMAGE ] )
     205                        {
     206                                var imgTagName = this.editMode[ IMAGE ];
     207
     208                                // Image dialog and Input element.
     209                                if ( imageDialog && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
     210                                {
     211                                        // Replace INPUT-> IMG
     212                                        removeObj = this.editObj[ IMAGE ];
     213                                        this.editObj[ IMAGE ] = editor.document.createElement( 'img' );
     214                                        removeObj.insertBeforeMe( this.editObj[ IMAGE ] );
     215                                        removeObj.remove( false );
     216                                        imgTagName = 'img';
     217                                }
     218                                // ImageButton dialog and Image element.
     219                                else if ( !imageDialog && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
     220                                {
     221                                        // Replace IMG -> INPUT
     222                                        removeObj = this.editObj[ IMAGE ];
     223                                        this.editObj[ IMAGE ] = editor.document.createElement( 'input' );
     224                                        this.editObj[ IMAGE ].setAttribute ( 'type' ,'image' );
     225                                        removeObj.insertBeforeMe( this.editObj[ IMAGE ] );
     226                                        removeObj.remove( false );
     227                                        imgTagName = 'input';
     228                                }
     229                        }
     230                        else    // Create a new image.
     231                        {
     232                                // Image dialog -> create IMG element.
     233                                if ( imageDialog )
     234                                        this.editObj[ IMAGE ] = editor.document.createElement( 'img' );
     235                                else
     236                                {
     237                                        this.editObj[ IMAGE ] = editor.document.createElement( 'input' );
     238                                        this.editObj[ IMAGE ].setAttribute ( 'type' ,'image' );
     239                                }
     240                        }
     241
     242                        // Create a new link.
     243                        if ( this.editMode[ LINK ] == false )
     244                                this.editObj[ LINK ] = editor.document.createElement( 'a' );
     245
     246
     247                        // Set attributes.
     248                        this.commitContent( IMAGE, this.editObj[ IMAGE ] );
     249                        this.commitContent( LINK, this.editObj[ LINK ] );
     250
     251                        // Insert a new Image.
     252                        if ( this.editMode[ IMAGE ] == false )
     253                        {
     254                                // It doesn't work with IE.
     255                                this.restoreSelection();
     256                                this.clearSavedSelection();
     257
     258                                if ( this.addLink )
     259                                        //Insert a new Link.
     260                                        if ( this.editMode[ LINK ] == false )
     261                                        {
     262                                                this.editObj[ LINK ].append( this.editObj[ IMAGE ], false );
     263                                                editor.insertElement( this.editObj[ LINK ] );
     264                                        }
     265                                        else    //Link already exists, image not.
     266                                                this.editObj[ LINK ].append( this.editObj[ IMAGE ], false );
     267                                else
     268                                        editor.insertElement( this.editObj[ IMAGE ] );
     269                        }
     270                        else            // Image already exists.
     271                        {
     272                                //Add a new link element.
     273                                if ( this.editMode[ LINK ] == false && this.addLink )
     274                                {
     275                                        this.editObj[ IMAGE ].insertBeforeMe( this.editObj[ LINK ] );
     276                                        this.editObj[ IMAGE ].appendTo( this.editObj[ LINK ] );
     277                                }
     278                                //Remove Link, Image exists.
     279                                else if ( this.editMode[ LINK ] == true && this.addLink == false )
     280                                        this.editObj[ LINK ].remove( true );
     281                        }
     282                        this.allowOnChange = false;             // Don't load onChange before onShow.
     283
     284                        return true;
     285                },
     286                onShow : function()
     287                {
     288                        //Don't call onShow before onShow.
     289                        this.allowOnChange = false;
     290
     291                        this.editObj = new Array();
     292                        this.editObj[ IMAGE ] = false;
     293                        this.editObj[ LINK ] = false;
     294                        this.editObj[ ORIGINAL ] = false;
     295                //      this.editObj[ PREVIEW ] = false;
     296
     297                        // Default: create a new element.
     298                        this.editMode = new Array();
     299                        this.editMode[ LINK ] = false;
     300                        this.editMode[ IMAGE ] = false;
     301
     302                        this.lockRatio = true;
     303                        this.dontResetSize = false;
     304                        this.firstLoad = true;
     305                        this.addLink = false;
     306
     307                        // IE BUG: Selection must be in the editor for getSelection() to work.
     308                        this.restoreSelection();
     309
     310                        var editor = this.getParentEditor(),
     311                                selection = editor.getSelection(),
     312                                ranges = selection.getRanges();
     313
     314                        // Copy of the image
     315                        this.editObj[ ORIGINAL ] = editor.document.createElement( 'img' );
     316                        this.editObj[ ORIGINAL ].setCustomData( 'isReady', 'false' );
     317
     318                        // Preview
     319                        this.editObj[ PREVIEW ] = CKEDITOR.document.getById( 'previewImage' );
     320                        this.editObj[ 'linkPreview' ] = CKEDITOR.document.getById( 'previewLink' );
     321
     322                        //Hide loader.
     323                        CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
     324
     325                        // Check selection. Fill in all the relevant fields if there's already one link selected.
     326                        if ( ranges.length == 1 )
     327                        {
     328                                element = false;
     329                                ranges[0].enlarge( CKEDITOR.ENLARGE_ELEMENT );
     330                                rangeRoot = ranges[0].getCommonAncestor( true );
     331
     332                                elementImg = rangeRoot.getAscendant( 'img', true );
     333                                elementA = rangeRoot.getAscendant( 'a', true );
     334                                elementInput = rangeRoot.getAscendant( 'input', true );
     335
     336                                if ( elementImg && !elementImg.getAttribute( '_cke_protected_html' ) )
     337                                        element = elementImg;
     338                                else
     339                                        if ( elementA && elementA.getAttribute( 'href' ) )
     340                                                element = elementA;
     341                                        else
     342                                                if ( elementInput && elementInput.getAttribute( 'type' )
     343                                                && elementInput.getAttribute( 'type' ) == 'image' )
     344                                                        element = elementInput;
     345
     346                                if ( element )
     347                                {
     348                                        this.saveSelection();
     349
     350                                        // Link is selected.
     351                                        if ( element.$.tagName.toLowerCase() == 'a' )
     352                                        {
     353                                                this.editObj[ LINK ] = element;
     354                                                this.editMode[ LINK ] = true;
     355
     356                                                // Look for Image element.
     357                                                var linkChildren = element.getChildren();
     358                                                if ( linkChildren.count() == 1 ){               // 1 child.
     359                                                        var childTagName = linkChildren.getItem( 0 ).$.tagName.toLowerCase();
     360                                                        if ( childTagName == 'img' || childTagName == 'input' )
     361                                                        {
     362                                                                this.editObj[ IMAGE ] = linkChildren.getItem( 0 );
     363                                                                if ( this.editObj[ IMAGE ].$.tagName.toLowerCase() == 'img' )
     364                                                                        this.editMode[ IMAGE ] = 'img';
     365                                                                else if ( this.editObj[ IMAGE ].$.tagName.toLowerCase() == 'input' )
     366                                                                        this.editMode[ IMAGE ] = 'input';
     367                                                        }
     368                                                }
     369                                                if ( imageDialog )
     370                                                {
     371                                                        // Fill out all fields.
     372                                                        this.setupContent( LINK, element );
     373                                                }
     374                                        }
     375
     376                                        if ( element.$.tagName.toLowerCase() == 'img' )
     377                                                this.editMode[ IMAGE ] = 'img';
     378                                        else if ( element.$.tagName.toLowerCase() == 'input' )
     379                                                this.editMode[ IMAGE ] = 'input';
     380
     381                                        if ( this.editMode[ IMAGE ] || this.editObj[ IMAGE ] )
     382                                        {
     383                                                if ( !this.editObj[ IMAGE ] )
     384                                                        this.editObj[ IMAGE ] = element;
     385                                               
     386                                                // Fill out all fields.
     387                                                this.setupContent( IMAGE, this.editObj[ IMAGE ] );
     388
     389                                                dialog = this;
     390                                               
     391                                                // Refresh LockRatio button
     392                                                var btnLockSizes = CKEDITOR.document.getById( 'btnLockSizes' );
     393                                                if ( dialog.lockRatio )
     394                                                        btnLockSizes.removeClass( 'BtnUnlocked' );
     395                                                else
     396                                                        btnLockSizes.addClass( 'BtnUnlocked' );
     397                                        }
     398                                        selection.selectElement( element );
     399                                        this.saveSelection();
     400                                }
     401                        }
     402
     403                        this.allowOnChange = true;
     404                       
     405                        if ( !showPreview )
     406                        {
     407                                // Show sample image
     408                                var defaultImage = CKEDITOR.getUrl(
     409                                        '_source/' +    // %REMOVE_LINE%
     410                                        'skins/' + editor.config.skin + '/images/dialog.noimage.gif' );
     411                                this.editObj[ PREVIEW ].setAttribute( 'src', defaultImage );
     412                        }
     413                        this.pushDefault();
     414                },
     415                onLoad : function()
     416                {
     417                        if ( !imageDialog )
     418                                this.hidePage( 'Link' );                //Hide Link tab.
     419
     420                        if ( editor.config.image.uploadTab == false )
     421                                this.hidePage( 'Upload' );              //Hide Upload tab.
     422
     423                        if ( editor.config.image.browseServer == false )
     424                                this.getContentElement( 'info', 'browse' ).getElement().hide();
     425                },
     426                onHide : function()
     427                {
     428                        if ( this.editObj[ PREVIEW ] )
     429                                this.commitContent( CLEANUP, this.editObj[ PREVIEW ] );
     430
     431                        original = this.editObj[ ORIGINAL ];
     432                        if ( this.editObj[ ORIGINAL ] )
     433                        {
     434                                original.removeListener( 'load', onImgLoadEvent );
     435                                original.removeListener( 'error', onImgLoadErrorEvent );
     436                                original.removeListener( 'abort', onImgLoadErrorEvent );
     437                                original.remove();
     438                        }
     439                        // Don't call onChange before onShow.
     440                        this.allowOnChange = false;
     441
     442                        this.popDefault();
     443                },
     444                contents : [
     445                        {
     446                                id : 'info',
     447                                label : editor.lang.image.infoTab,
     448                                accessKey : 'I',
     449                                elements :
     450                                [
     451                                        {
     452                                                type : 'vbox',
     453                                                padding : 0,
     454                                                children :
     455                                                [
     456                                                        {
     457                                                                type : 'html',
     458                                                                html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '</span>'
     459                                                        },
     460                                                        {
     461                                                                type : 'hbox',
     462                                                                widths : [ '280px', '110px' ],
     463                                                                align : 'right',
     464                                                                children :
     465                                                                [
     466                                                                        {
     467                                                                                id : 'txtUrl',
     468                                                                                type : 'text',
     469                                                                                label : '',
     470                                                                                onChange : function(){
     471                                                                                        var dialog = this.getDialog(),
     472                                                                                                editor = dialog.getParentEditor(),
     473                                                                                                url = this.getValue();
     474
     475                                                                                        if ( dialog.allowOnChange )
     476                                                                                        {
     477                                                                                                //Update original image
     478                                                                                                if ( dialog.editObj && url.length > 0 )
     479                                                                                                {
     480                                                                                                        dialog.editObj[ ORIGINAL ].setCustomData( 'isReady', 'false' );
     481                                                                                                        // Show loader
     482                                                                                                        var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );
     483                                                                                                        if ( loader && showPreview )
     484                                                                                                                loader.setStyle( 'display', '' );
     485
     486                                                                                                        if ( showPreview )              // Load image preview
     487                                                                                                        {
     488                                                                                                                dialog.editObj[ PREVIEW ].removeStyle( 'width' );
     489                                                                                                                dialog.editObj[ PREVIEW ].removeStyle( 'height' );
     490                                                                                                                dialog.editObj[ PREVIEW ].setAttribute( 'src', url );
     491                                                                                                        }
     492                                                                                                        dialog.editObj[ ORIGINAL ].on( 'load', onImgLoadEvent, dialog );
     493                                                                                                        dialog.editObj[ ORIGINAL ].on( 'error', onImgLoadErrorEvent, dialog );
     494                                                                                                        dialog.editObj[ ORIGINAL ].on( 'abort', onImgLoadErrorEvent, dialog );
     495                                                                                                        dialog.editObj[ ORIGINAL ].setAttribute( 'src', url );
     496                                                                                                }
     497                                                                                                updatePreview( dialog );
     498                                                                                        }
     499                                                                                },
     500                                                                                setup : function( type, element )
     501                                                                                {
     502                                                                                        if ( type == IMAGE )
     503                                                                                        {
     504                                                                                                var dialog = this.getDialog();
     505                                                                                                var url = element.getAttribute( '_cke_saved_src' );
     506                                                                                                if ( !url )
     507                                                                                                        url = element.getAttribute( 'src' );
     508                                                                                                dialog.dontResetSize = true;
     509                                                                                                dialog.allowOnChange = true;
     510                                                                                                this.setValue( url );           // And call this.onChange()
     511                                                                                                this.focus();
     512                                                                                                dialog.allowOnChange = false;
     513
     514                                                                                        }
     515                                                                                },
     516                                                                                commit : function( type, element )
     517                                                                                {
     518                                                                                        if ( type == IMAGE && ( this.getValue() != '' || this.isChanged() ) )
     519                                                                                        {
     520                                                                                                element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );
     521                                                                                                element.setAttribute( 'src', decodeURI( this.getValue() ) );
     522                                                                                        }
     523                                                                                        else if ( type == CLEANUP )
     524                                                                                        {
     525                                                                                                element.setAttribute( 'src', '' );      // If removeAttribute doesn't work.
     526                                                                                                element.removeAttribute( 'src' );
     527                                                                                        }
     528                                                                                }
     529                                                                        },
     530                                                                        {
     531                                                                                type : 'button',
     532                                                                                id : 'browse',
     533                                                                                align : 'center',
     534                                                                                label : editor.lang.common.browseServer,
     535                                                                                onClick : function()
     536                                                                                {
     537                                                                                        this.getDialog().setValueOf( "info", "txtUrl", "http://www.fckeditor.net/images/demo_screenshot.gif" );
     538                                                                                }
     539                                                                        }
     540                                                                ]
     541                                                        }
     542                                                ]
     543                                        },
     544                                        {
     545                                                id : 'txtAlt',
     546                                                type : 'text',
     547                                                label : editor.lang.image.alt,
     548                                                accessKey : 'A',
     549                                                'default' : '',
     550                                                onChange : function()
     551                                                {
     552                                                        updatePreview( this.getDialog() );
     553                                                },
     554                                                setup : function( type, element )
     555                                                {
     556                                                        if ( type == IMAGE )
     557                                                                this.setValue( element.getAttribute( 'alt' ) );
     558                                                },
     559                                                commit : function( type, element )
     560                                                {
     561                                                        if ( type == IMAGE )
     562                                                        {
     563                                                                if ( this.getValue() != '' || this.isChanged() )
     564                                                                        element.setAttribute( 'alt', this.getValue() );
     565                                                        }
     566                                                        else if ( type == PREVIEW )
     567                                                        {
     568                                                                element.setAttribute( 'alt', this.getValue() );
     569                                                        }
     570                                                        else if ( type == CLEANUP )
     571                                                        {
     572                                                                element.removeAttribute( 'alt' );
     573                                                        }
     574                                                }
     575                                        },
     576                                        {
     577                                                type : 'hbox',
     578                                                widths : [ '140px', '240px' ],
     579                                                children :
     580                                                [
     581                                                        {
     582                                                                type : 'vbox',
     583                                                                padding : 10,
     584                                                                children :
     585                                                                [
     586                                                                        {
     587                                                                                type : 'hbox',
     588                                                                                widths : [ '70%', '30%' ],
     589                                                                                children :
     590                                                                                [
     591                                                                                        {
     592                                                                                                type : 'vbox',
     593                                                                                                padding : 1,
     594                                                                                                children :
     595                                                                                                [
     596                                                                                                        {
     597                                                                                                                type : 'text',
     598                                                                                                                id : 'txtWidth',
     599                                                                                                                labelLayout : 'horizontal',
     600                                                                                                                label : editor.lang.image.width,
     601                                                                                                                onKeyUp : onSizeChange,
     602                                                                                                                validate: function()
     603                                                                                                                {
     604                                                                                                                        var aMatch  =  this.getValue().match( regexValidSize );
     605                                                                                                                        if ( !aMatch )
     606                                                                                                                                alert( editor.lang.common.validateNumberFailed );
     607                                                                                                                        return !!aMatch;
     608                                                                                                                },
     609                                                                                                                setup : setupDimension,
     610                                                                                                                commit : function( type, element )
     611                                                                                                                {
     612                                                                                                                        if ( type == IMAGE )
     613                                                                                                                        {
     614                                                                                                                                var value = this.getValue();
     615                                                                                                                                if ( value != '' && this.isChanged() )
     616                                                                                                                                        element.setAttribute( 'width', value );
     617                                                                                                                                else if ( value == '' && this.isChanged() )
     618                                                                                                                                        element.removeAttribute( 'width' );
     619                                                                                                                        }
     620                                                                                                                        else if ( type == PREVIEW && showPreview )
     621                                                                                                                        {
     622                                                                                                                                var value = this.getValue(),
     623                                                                                                                                        aMatch = value.match( regexValidSize );
     624                                                                                                                                if (  !aMatch || value == '' )
     625                                                                                                                                {
     626                                                                                                                                        var imageOriginal = this.getDialog().editObj[ ORIGINAL ];
     627                                                                                                                                        if ( !!imageOriginal && imageOriginal.getCustomData( 'isReady' ) == 'true' )
     628                                                                                                                                                element.setStyle( 'width',  imageOriginal.$.width + 'px');
     629                                                                                                                                }
     630                                                                                                                                else
     631                                                                                                                                        element.setStyle( 'width', value + 'px');
     632                                                                                                                        }
     633                                                                                                                        else if ( type == CLEANUP )
     634                                                                                                                        {
     635                                                                                                                                element.removeAttribute( 'width' );
     636                                                                                                                                element.removeStyle( 'width' );
     637                                                                                                                        }
     638                                                                                                                }
     639                                                                                                        },
     640                                                                                                        {
     641                                                                                                                type : 'text',
     642                                                                                                                id : 'txtHeight',
     643                                                                                                                labelLayout : 'horizontal',
     644                                                                                                                label : editor.lang.image.height,
     645                                                                                                                onKeyUp : onSizeChange,
     646                                                                                                                validate: function()
     647                                                                                                                {
     648                                                                                                                        var aMatch = this.getValue().match( regexValidSize );
     649                                                                                                                        if ( !aMatch )
     650                                                                                                                                alert( editor.lang.common.validateNumberFailed );
     651                                                                                                                        return !!aMatch;
     652                                                                                                                },
     653                                                                                                                setup : setupDimension,
     654                                                                                                                commit : function( type, element )
     655                                                                                                                {
     656                                                                                                                        if ( type == IMAGE )
     657                                                                                                                        {
     658                                                                                                                                var value = this.getValue();
     659                                                                                                                                if ( value != '' && this.isChanged() )
     660                                                                                                                                        element.setAttribute( 'height', value );
     661                                                                                                                                else if ( value == '' && this.isChanged() )
     662                                                                                                                                        element.removeAttribute( 'height' );
     663                                                                                                                        }
     664                                                                                                                        else if ( ( type == PREVIEW ) && showPreview )
     665                                                                                                                        {
     666                                                                                                                                var value = this.getValue(),
     667                                                                                                                                        aMatch = value.match( regexValidSize );
     668                                                                                                                                if (  !aMatch || value == '' )
     669                                                                                                                                {
     670                                                                                                                                        var imageOriginal = this.getDialog().editObj[ ORIGINAL ];
     671                                                                                                                                        if ( !!imageOriginal && imageOriginal.getCustomData( 'isReady' ) == 'true' )
     672                                                                                                                                                element.setStyle( 'height',  imageOriginal.$.height + 'px');
     673                                                                                                                                }
     674                                                                                                                                else
     675                                                                                                                                        element.setStyle( 'height', value + 'px');
     676                                                                                                                        }
     677                                                                                                                        else if ( type == CLEANUP )
     678                                                                                                                        {
     679                                                                                                                                element.removeAttribute( 'height' );
     680                                                                                                                                element.removeStyle( 'height' );
     681                                                                                                                        }
     682                                                                                                                }
     683                                                                                                        }
     684                                                                                                ]
     685                                                                                        },
     686                                                                                        {
     687                                                                                                type : 'html',
     688                                                                                                style : 'position:relative;top:-10px;height:20px',
     689                                                                                                onLoad : function()
     690                                                                                                {
     691                                                                                                        // Activate Reset button
     692                                                                                                        var     resetButton = CKEDITOR.document.getById( 'btnResetSize' );
     693                                                                                                                ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
     694                                                                                                        if ( resetButton )
     695                                                                                                        {
     696                                                                                                                resetButton.on( 'click', function()
     697                                                                                                                        {
     698                                                                                                                                resetSize( this );
     699                                                                                                                        }, this );      //this = dialog.
     700                                                                                                                resetButton.on( 'mouseover', function()
     701                                                                                                                        {
     702                                                                                                                                this.addClass( 'BtnOver' );
     703                                                                                                                        }, resetButton );
     704                                                                                                                resetButton.on( 'mouseout', function()
     705                                                                                                                        {
     706                                                                                                                                this.removeClass( 'BtnOver' );
     707                                                                                                                        }, resetButton );
     708                                                                                                        }
     709                                                                                                        // Activate (Un)LockRatio button
     710                                                                                                        if ( ratioButton )
     711                                                                                                        {
     712                                                                                                                ratioButton.on( 'click', function()
     713                                                                                                                        {
     714                                                                                                                                switchLockRatio( this );
     715                                                                                                                        }, this );
     716                                                                                                                ratioButton.on( 'mouseover', function()
     717                                                                                                                        {
     718                                                                                                                                this.addClass( 'BtnOver' );
     719                                                                                                                        }, ratioButton );
     720                                                                                                                ratioButton.on( 'mouseout', function()
     721                                                                                                                        {
     722                                                                                                                                this.removeClass( 'BtnOver' );
     723                                                                                                                        }, ratioButton );
     724                                                                                                        }
     725                                                                                                },
     726                                                                                                html : '<div>'+
     727                                                                                                        '<div title="' + editor.lang.image.lockRatio +
     728                                                                                                        '" class="BtnLocked" id="btnLockSizes"></div>' +
     729                                                                                                        '<div title="' + editor.lang.image.resetSize +
     730                                                                                                        '" class="BtnReset" id="btnResetSize"></div>'+
     731                                                                                                        '</div>'
     732                                                                                        }
     733                                                                                ]
     734                                                                        },
     735                                                                        {
     736                                                                                type : 'vbox',
     737                                                                                padding : 1,
     738                                                                                children :
     739                                                                                [
     740                                                                                        {
     741                                                                                                type : 'text',
     742                                                                                                id : 'txtBorder',
     743                                                                                                labelLayout : 'horizontal',
     744                                                                                                label : editor.lang.image.border,
     745                                                                                                'default' : '',
     746                                                                                                onKeyUp : function()
     747                                                                                                {
     748                                                                                                        updatePreview( this.getDialog() );
     749                                                                                                },
     750                                                                                                validate: function()
     751                                                                                                {
     752                                                                                                        var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
     753                                                                                                        return func.apply( this );
     754                                                                                                },
     755                                                                                                setup : function( type, element )
     756                                                                                                {
     757                                                                                                        if ( type == IMAGE )
     758                                                                                                                this.setValue( element.getAttribute( 'border' ) );
     759                                                                                                },
     760                                                                                                commit : function( type, element )
     761                                                                                                {
     762                                                                                                        if ( type == IMAGE )
     763                                                                                                        {
     764                                                                                                                if ( this.getValue() != '' || this.isChanged() )
     765                                                                                                                        element.setAttribute( 'border', this.getValue() );
     766                                                                                                        }
     767                                                                                                        else if ( type == PREVIEW )
     768                                                                                                        {
     769                                                                                                                var value = parseInt( this.getValue(), 10 );
     770                                                                                                                value = isNaN( value ) ? 0 : value;
     771                                                                                                                element.setAttribute( 'border', value );
     772                                                                                                                element.setStyle( 'border', value + 'px solid black' );
     773                                                                                                        }
     774                                                                                                        else if ( type == CLEANUP )
     775                                                                                                        {
     776                                                                                                                element.removeAttribute( 'border' );
     777                                                                                                                element.removeStyle( 'border' );
     778                                                                                                        }
     779                                                                                                }
     780                                                                                        },
     781                                                                                        {
     782                                                                                                type : 'text',
     783                                                                                                id : 'txtHSpace',
     784                                                                                                labelLayout : 'horizontal',
     785                                                                                                label : editor.lang.image.hSpace,
     786                                                                                                'default' : '',
     787                                                                                                onKeyUp : function()
     788                                                                                                {
     789                                                                                                        updatePreview( this.getDialog() );
     790                                                                                                },
     791                                                                                                validate: function()
     792                                                                                                {
     793                                                                                                        var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
     794                                                                                                        return func.apply( this );
     795                                                                                                },
     796                                                                                                setup : function( type, element )
     797                                                                                                {
     798                                                                                                        if ( type == IMAGE )
     799                                                                                                        {
     800                                                                                                                var value = element.getAttribute( 'hspace' );
     801                                                                                                                if ( value != -1 )                              // In IE empty = -1.
     802                                                                                                                        this.setValue( value );
     803                                                                                                        }
     804                                                                                                },
     805                                                                                                commit : function( type, element )
     806                                                                                                {
     807                                                                                                        if ( type == IMAGE )
     808                                                                                                        {
     809                                                                                                                if ( this.getValue() != '' || this.isChanged() )
     810                                                                                                                        element.setAttribute( 'hspace', this.getValue() );
     811                                                                                                        }
     812                                                                                                        else if ( type == PREVIEW )
     813                                                                                                        {
     814                                                                                                                var value = parseInt( this.getValue(), 10 );
     815                                                                                                                value = isNaN( value ) ? 0 : value;
     816                                                                                                                element.setAttribute( 'hspace', value );
     817                                                                                                                element.setStyle( 'margin-left', value + 'px' );
     818                                                                                                                element.setStyle( 'margin-right', value + 'px' );
     819                                                                                                        }
     820                                                                                                        else if ( type == CLEANUP )
     821                                                                                                        {
     822                                                                                                                element.removeAttribute( 'hspace' );
     823                                                                                                                element.removeStyle( 'margin-left' );
     824                                                                                                                element.removeStyle( 'margin-right' );
     825                                                                                                        }
     826                                                                                                }
     827                                                                                        },
     828                                                                                        {
     829                                                                                                type : 'text',
     830                                                                                                id : 'txtVSpace',
     831                                                                                                labelLayout : 'horizontal',
     832                                                                                                label : editor.lang.image.vSpace,
     833                                                                                                'default' : '',
     834                                                                                                onKeyUp : function()
     835                                                                                                {
     836                                                                                                        updatePreview( this.getDialog() );
     837                                                                                                },
     838                                                                                                validate: function()
     839                                                                                                {
     840                                                                                                        var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
     841                                                                                                        return func.apply( this );
     842                                                                                                },
     843                                                                                                setup : function( type, element )
     844                                                                                                {
     845                                                                                                        if ( type == IMAGE )
     846                                                                                                                this.setValue( element.getAttribute( 'vspace' ) );
     847                                                                                                },
     848                                                                                                commit : function( type, element )
     849                                                                                                {
     850                                                                                                        if ( type == IMAGE )
     851                                                                                                        {
     852                                                                                                                if ( this.getValue() != '' || this.isChanged() )
     853                                                                                                                        element.setAttribute( 'vspace', this.getValue() );
     854                                                                                                        }
     855                                                                                                        else if ( type == PREVIEW )
     856                                                                                                        {
     857                                                                                                                var value = parseInt( this.getValue(), 10 );
     858                                                                                                                value = isNaN( value ) ? 0 : value;
     859                                                                                                                element.setAttribute( 'vspace', this.getValue() );
     860                                                                                                                element.setStyle( 'margin-top', value + 'px' );
     861                                                                                                                element.setStyle( 'margin-bottom', value + 'px' );
     862                                                                                                        }
     863                                                                                                        else if ( type == CLEANUP )
     864                                                                                                        {
     865                                                                                                                element.removeAttribute( 'vspace' );
     866                                                                                                                element.removeStyle( 'margin-top' );
     867                                                                                                                element.removeStyle( 'margin-bottom' );
     868                                                                                                        }
     869                                                                                                }
     870                                                                                        },
     871                                                                                        {
     872                                                                                                id : 'cmbAlign',
     873                                                                                                type : 'select',
     874                                                                                                labelLayout : 'horizontal',
     875                                                                                                widths : [ '35%','65%' ],
     876                                                                                                style : 'width:100%',
     877                                                                                                label : editor.lang.image.align,
     878                                                                                                'default' : '',
     879                                                                                                items :
     880                                                                                                [
     881                                                                                                        [ editor.lang.common.notSet , ''],
     882                                                                                                        [ editor.lang.image.alignLeft , 'left'],
     883                                                                                                        [ editor.lang.image.alignAbsBottom , 'absBottom'],
     884                                                                                                        [ editor.lang.image.alignAbsMiddle , 'absMiddle'],
     885                                                                                                        [ editor.lang.image.alignBaseline , 'baseline'],
     886                                                                                                        [ editor.lang.image.alignBottom , 'bottom'],
     887                                                                                                        [ editor.lang.image.alignMiddle , 'middle'],
     888                                                                                                        [ editor.lang.image.alignRight , 'right'],
     889                                                                                                        [ editor.lang.image.alignTextTop , 'textTop'],
     890                                                                                                        [ editor.lang.image.alignTop , 'top']
     891                                                                                                ],
     892                                                                                                onKeyUp : function()
     893                                                                                                {
     894                                                                                                        updatePreview( this.getDialog() );
     895                                                                                                },
     896                                                                                                setup : function( type, element )
     897                                                                                                {
     898                                                                                                        if ( type == IMAGE )
     899                                                                                                                this.setValue( element.getAttribute( 'align' ) );
     900                                                                                                },
     901                                                                                                commit : function( type, element )
     902                                                                                                {
     903                                                                                                        if ( type == IMAGE )
     904                                                                                                        {
     905                                                                                                                if ( this.getValue() != '' || this.isChanged() )
     906                                                                                                                        element.setAttribute( 'align', this.getValue() );
     907                                                                                                        }
     908                                                                                                        else if ( type == PREVIEW )
     909                                                                                                        {
     910                                                                                                                element.setAttribute( 'align', this.getValue() );
     911                                                                                                        }
     912                                                                                                        else if ( type == CLEANUP )
     913                                                                                                        {
     914                                                                                                                element.removeAttribute( 'align' );
     915                                                                                                        }
     916                                                                                                }
     917                                                                                        }
     918                                                                                ]
     919                                                                        }
     920                                                                ]
     921                                                        },
     922                                                        {
     923                                                                type : 'vbox',
     924                                                                height : '250px',
     925                                                                children :
     926                                                                [
     927                                                                        {
     928                                                                                type : 'html',
     929                                                                                style : 'width:95%;',
     930                                                                                html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+
     931'<div id="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+
     932'<div id="ImagePreviewBox">'+
     933'<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink"><img id="previewImage" src="" /></a>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.' +
     934                '</div>'+'</div>'
     935                                                                        }
     936                                                                ]
     937                                                        }
     938                                                ]
     939                                        }
     940                                ]
     941                        },
     942                        {
     943                                id : 'Link',
     944                                label : editor.lang.link.title,
     945                                padding : 0,
     946                                elements :
     947                                [
     948                                        {
     949                                                id : 'txtUrl',
     950                                                type : 'text',
     951                                                label : editor.lang.image.url,
     952                                                style : 'width: 100%',
     953                                                'default' : '',
     954                                                setup : function( type, element )
     955                                                {
     956                                                        if ( type == LINK )
     957                                                        {
     958                                                                var href = element.getAttribute( '_cke_saved_href' );
     959                                                                if ( !href )
     960                                                                        href = element.getAttribute( 'href' );
     961                                                                this.setValue( href );
     962                                                        }
     963                                                },
     964                                                commit : function( type, element )
     965                                                {
     966                                                        if ( type == LINK )
     967                                                                if ( this.getValue() != '' || this.isChanged() )
     968                                                                {
     969                                                                        element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );
     970                                                                        element.setAttribute( 'href', 'javascript:void(0)/*' +
     971                                                                                CKEDITOR.tools.getNextNumber() + '*/' );
     972
     973                                                                        if ( this.getValue() != '' || editor.config.image.removeLinkByEmptyURL == false ){
     974                                                                                this.getDialog().addLink = true;
     975                                                                        }
     976
     977                                                                }
     978                                                }
     979                                        },
     980                                        {
     981                                                type : 'button',
     982                                                id : 'browse',
     983                                                style : 'float:right',
     984                                                label : editor.lang.common.browseServer,
     985                                                onClick : function()
     986                                                {
     987                                                        this.getDialog().setValueOf( "Link", "txtUrl", "http://www.fckeditor.net/" );
     988
     989                                                }
     990                                        },
     991                                        {
     992                                                id : 'cmbTarget',
     993                                                type : 'select',
     994                                                label : editor.lang.link.target,
     995                                                'default' : '',
     996                                                items :
     997                                                [
     998                                                        [ editor.lang.link.targetNotSet , ''],
     999                                                        [ editor.lang.link.targetNew , '_blank'],
     1000                                                        [ editor.lang.link.targetTop , '_top'],
     1001                                                        [ editor.lang.link.targetSelf , '_self'],
     1002                                                        [ editor.lang.link.targetParent , '_parent']
     1003                                                ],
     1004                                                setup : function( type, element )
     1005                                                {
     1006                                                        if ( type == LINK )
     1007                                                                this.setValue( element.getAttribute( 'target' ) );
     1008                                                },
     1009                                                commit : function( type, element )
     1010                                                {
     1011                                                        if ( type == LINK )
     1012                                                                if ( this.getValue() != '' || this.isChanged() )
     1013                                                                        element.setAttribute( 'target', this.getValue() );
     1014                                                }
     1015                                        }
     1016                                ]
     1017                        },
     1018                        {
     1019                                id : 'Upload',
     1020                                label : editor.lang.image.upload,
     1021                                elements :
     1022                                [
     1023                                        {
     1024                                                type : 'file',
     1025                                                id : 'upload',
     1026                                                label : editor.lang.image.btnUpload,
     1027                                                action : editor.config.image.uploadAction,
     1028                                                size : 38
     1029                                        },
     1030                                        {
     1031                                                type : 'fileButton',
     1032                                                id : 'uploadButton',
     1033                                                label : editor.lang.image.btnUpload,
     1034                                                'for' : [ 'Upload', 'upload' ]
     1035                                        }
     1036                                ]
     1037                        },
     1038                        {
     1039                                id : 'advanced',
     1040                                label : editor.lang.common.advancedTab,
     1041                                elements :
     1042                                [
     1043                                        {
     1044                                                type : 'hbox',
     1045                                                widths : [ '50%', '25%', '25%' ],
     1046                                                children :
     1047                                                [
     1048                                                        {
     1049                                                                type : 'text',
     1050                                                                id : 'linkId',
     1051                                                                label : editor.lang.common.id,
     1052                                                                setup : function( type, element )
     1053                                                                {
     1054                                                                        if ( type == IMAGE )
     1055                                                                                this.setValue( element.getAttribute( 'id' ) );
     1056                                                                },
     1057                                                                commit : function( type, element )
     1058                                                                {
     1059                                                                        if ( type == IMAGE )
     1060                                                                                if ( this.getValue() != '' || this.isChanged() )
     1061                                                                                        element.setAttribute( 'id', this.getValue() );
     1062                                                                }
     1063                                                        },
     1064                                                        {
     1065                                                                id : 'cmbLangDir',
     1066                                                                type : 'select',
     1067                                                                style : 'width : 100%;',
     1068                                                                label : editor.lang.common.langDir,
     1069                                                                'default' : '',
     1070                                                                items :
     1071                                                                [
     1072                                                                        [ editor.lang.common.notSet, '' ],
     1073                                                                        [ editor.lang.common.langDirLtr, 'ltr' ],
     1074                                                                        [ editor.lang.common.langDirRtl, 'rtl' ]
     1075                                                                ],
     1076                                                                setup : function( type, element )
     1077                                                                {
     1078                                                                        if ( type == IMAGE )
     1079                                                                                this.setValue( element.getAttribute( 'dir' ) );
     1080                                                                },
     1081                                                                commit : function( type, element )
     1082                                                                {
     1083                                                                        if ( type == IMAGE )
     1084                                                                                if ( this.getValue() != '' || this.isChanged() )
     1085                                                                                        element.setAttribute( 'dir', this.getValue() );
     1086                                                                }
     1087                                                        },
     1088                                                        {
     1089                                                                type : 'text',
     1090                                                                id : 'txtLangCode',
     1091                                                                label : editor.lang.common.langCode,
     1092                                                                'default' : '',
     1093                                                                setup : function( type, element )
     1094                                                                {
     1095                                                                        if ( type == IMAGE )
     1096                                                                                this.setValue( element.getAttribute( 'lang' ) );
     1097                                                                },
     1098                                                                commit : function( type, element )
     1099                                                                {
     1100                                                                        if ( type == IMAGE )
     1101                                                                                if ( this.getValue() != '' || this.isChanged() )
     1102                                                                                        element.setAttribute( 'lang', this.getValue() );
     1103                                                                }
     1104                                                        }
     1105                                                ]
     1106                                        },
     1107                                        {
     1108                                                type : 'text',
     1109                                                id : 'txtGenLongDescr',
     1110                                                label : editor.lang.common.longDescr,
     1111                                                setup : function( type, element )
     1112                                                {
     1113                                                        if ( type == IMAGE )
     1114                                                                this.setValue( element.getAttribute( 'longDesc' ) );
     1115                                                },
     1116                                                commit : function( type, element )
     1117                                                {
     1118                                                        if ( type == IMAGE )
     1119                                                                if ( this.getValue() != '' || this.isChanged() )
     1120                                                                        element.setAttribute( 'longDesc', this.getValue() );
     1121                                                }
     1122                                        },
     1123                                        {
     1124                                                type : 'hbox',
     1125                                                widths : [ '50%', '50%' ],
     1126                                                children :
     1127                                                [
     1128                                                        {
     1129                                                                type : 'text',
     1130                                                                id : 'txtGenClass',
     1131                                                                label : editor.lang.common.cssClass,
     1132                                                                'default' : '',
     1133                                                                setup : function( type, element )
     1134                                                                {
     1135                                                                        if ( type == IMAGE )
     1136                                                                                this.setValue( element.getAttribute( 'class' ) );
     1137                                                                },
     1138                                                                commit : function( type, element )
     1139                                                                {
     1140                                                                        if ( type == IMAGE )
     1141                                                                                if ( this.getValue() != '' || this.isChanged() )
     1142                                                                                        element.setAttribute( 'class', this.getValue() );
     1143                                                                }
     1144                                                        },
     1145                                                        {
     1146                                                                type : 'text',
     1147                                                                id : 'txtGenTitle',
     1148                                                                label : editor.lang.common.advisoryTitle,
     1149                                                                'default' : '',
     1150                                                                onChange : function()
     1151                                                                {
     1152                                                                        updatePreview( this.getDialog() );
     1153                                                                },
     1154                                                                setup : function( type, element )
     1155                                                                {
     1156                                                                        if ( type == IMAGE )
     1157                                                                                this.setValue( element.getAttribute( 'title' ) );
     1158                                                                },
     1159                                                                commit : function( type, element )
     1160                                                                {
     1161                                                                        if ( type == IMAGE )
     1162                                                                        {
     1163                                                                                if ( this.getValue() != '' || this.isChanged() )
     1164                                                                                        element.setAttribute( 'title', this.getValue() );
     1165                                                                        }
     1166                                                                        else if ( type == PREVIEW )
     1167                                                                        {
     1168                                                                                element.setAttribute( 'title', this.getValue() );
     1169                                                                        }
     1170                                                                        else if ( type == CLEANUP )
     1171                                                                        {
     1172                                                                                element.removeAttribute( 'title' );
     1173                                                                        }
     1174                                                                }
     1175                                                        },
     1176                                                ]
     1177                                        },
     1178                                        {
     1179                                                type : 'text',
     1180                                                id : 'txtdlgGenStyle',
     1181                                                label : editor.lang.common.cssStyle,
     1182                                                'default' : '',
     1183                                                setup : function( type, element )
     1184                                                {
     1185                                                        if ( type == IMAGE )
     1186                                                        {
     1187                                                                var genStyle = element.getAttribute( 'style' );
     1188                                                                if ( !genStyle && element.$.style.cssText )
     1189                                                                        genStyle = element.$.style.cssText;
     1190                                                                this.setValue( genStyle );
     1191
     1192                                                                var height = element.$.style.height,
     1193                                                                        width = element.$.style.width,
     1194                                                                        aMatchH  = ( height ? height : '' ).match( regexSize ),
     1195                                                                        aMatchW  = ( width ? width : '').match( regexSize );
     1196
     1197                                                                this.attributesInStyle =
     1198                                                                {
     1199                                                                        height : !!aMatchH,
     1200                                                                        width : !!aMatchW
     1201                                                                }
     1202                                                        }
     1203                                                },
     1204                                                commit : function( type, element )
     1205                                                {
     1206                                                        if ( type == IMAGE && ( this.getValue() != '' || this.isChanged() ) )
     1207                                                        {
     1208                                                                element.setAttribute( 'style', this.getValue() );
     1209
     1210                                                                // Set STYLE dimensions.
     1211                                                                var height = element.getAttribute( 'height' );
     1212                                                                        width = element.getAttribute( 'width' );
     1213                                                                if ( this.attributesInStyle.height )
     1214                                                                {
     1215                                                                        if ( height && height != '' )
     1216                                                                                element.setStyle( 'height', height + 'px' );
     1217                                                                        else
     1218                                                                        {
     1219                                                                                element.removeStyle( 'height' );
     1220                                                                                alert('remove heigh'+height);
     1221                                                                        }
     1222                                                                }
     1223                                                                if ( this.attributesInStyle.width )
     1224                                                                {
     1225                                                                        if ( width && width != '' )
     1226                                                                                element.setStyle( 'width', width + 'px' );
     1227                                                                        else
     1228                                                                        {
     1229                                                                                element.removeStyle( 'width' );
     1230                                                                                alert('remove width'+width);
     1231                                                                        }
     1232                                                                }
     1233                                                        }
     1234                                                }
     1235                                        }
     1236                                ]
     1237                        }
     1238                ]
     1239        };
     1240};
     1241
     1242CKEDITOR.dialog.add( 'image', function( editor ){
     1243                return imageDialog( editor, 'image' )
     1244        }
     1245);
     1246
     1247CKEDITOR.dialog.add( 'imagebutton', function( editor ){
     1248                return imageDialog( editor, 'imagebutton' )
     1249        }
     1250);
  • _source/plugins/image/plugin.js

     
     1/*
     2Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5
     6/**
     7 * @file Image plugin
     8 */
     9
     10CKEDITOR.plugins.add( 'image',
     11{
     12        init : function( editor )
     13        {
     14                var pluginName = 'image';
     15
     16                // Register the dialog.
     17                CKEDITOR.dialog.add( pluginName, this.path + 'dialogs/image.js' );
     18
     19                // Register the command.
     20                editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName ) );
     21
     22                // Register the toolbar button.
     23                editor.ui.addButton( 'Image',
     24                        {
     25                                label : editor.lang.common.image,
     26                                command : pluginName
     27                        });
     28        }
     29} );
     30
     31//Image Dialog and Image button Dialog.
     32CKEDITOR.config.image =
     33{
     34        /**
     35         * Show Upload tab.
     36         * @type Boolean
     37         * @default true
     38         */
     39        uploadTab : true,
     40
     41        /**
     42         * Show Browse Server button.
     43         * @type Boolean
     44         * @default true
     45         */
     46        browseServer : true,
     47
     48        /**
     49         * Upload action attribute.
     50         * @type URL
     51         */
     52        uploadAction : 'nowhere.php',
     53
     54        /**
     55         * Show Image preview in the Image Dialog.
     56         * @type Boolean
     57         * @default true
     58         */
     59        showPreview : true,
     60
     61        removeLinkByEmptyURL : true
     62};
  • _source/plugins/toolbar/plugin.js

     
    208208        [
    209209                'Source', '-',
    210210                'NewPage', '-',
    211                 'Bold', 'Italic', 'Underline', 'Strike', '-',
     211                'Bold', 'Italic', 'Underline', 'Strike', '-', 'Image',
    212212                'Subscript', 'Superscript', '-',
    213213                'SelectAll', 'RemoveFormat', '-',
    214214                'Smiley', 'HorizontalRule', 'SpecialChar'
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy