| 1 | /*
|
|---|
| 2 | Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
|
|---|
| 3 | For licensing, see LICENSE.html or http://ckeditor.com/license
|
|---|
| 4 | */
|
|---|
| 5 |
|
|---|
| 6 | (function()
|
|---|
| 7 | {
|
|---|
| 8 | var imageDialog = function( editor, dialogType )
|
|---|
| 9 | {
|
|---|
| 10 | // Load image preview.
|
|---|
| 11 | var IMAGE = 1,
|
|---|
| 12 | LINK = 2,
|
|---|
| 13 | PREVIEW = 4,
|
|---|
| 14 | CLEANUP = 8,
|
|---|
| 15 | regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
|
|---|
| 16 | regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
|
|---|
| 17 | pxLengthRegex = /^\d+px$/;
|
|---|
| 18 |
|
|---|
| 19 | var onSizeChange = function()
|
|---|
| 20 | {
|
|---|
| 21 | var value = this.getValue(), // This = input element.
|
|---|
| 22 | dialog = this.getDialog(),
|
|---|
| 23 | aMatch = value.match( regexGetSize ); // Check value
|
|---|
| 24 | if ( aMatch )
|
|---|
| 25 | {
|
|---|
| 26 | if ( aMatch[2] == '%' ) // % is allowed - > unlock ratio.
|
|---|
| 27 | switchLockRatio( dialog, false ); // Unlock.
|
|---|
| 28 | value = aMatch[1];
|
|---|
| 29 | }
|
|---|
| 30 |
|
|---|
| 31 | // Only if ratio is locked
|
|---|
| 32 | if ( dialog.lockRatio )
|
|---|
| 33 | {
|
|---|
| 34 | var oImageOriginal = dialog.originalElement;
|
|---|
| 35 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
|---|
| 36 | {
|
|---|
| 37 | if ( this.id == 'txtHeight' )
|
|---|
| 38 | {
|
|---|
| 39 | if ( value && value != '0' )
|
|---|
| 40 | value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
|
|---|
| 41 | if ( !isNaN( value ) )
|
|---|
| 42 | dialog.setValueOf( 'info', 'txtWidth', value );
|
|---|
| 43 | }
|
|---|
| 44 | else //this.id = txtWidth.
|
|---|
| 45 | {
|
|---|
| 46 | if ( value && value != '0' )
|
|---|
| 47 | value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
|
|---|
| 48 | if ( !isNaN( value ) )
|
|---|
| 49 | dialog.setValueOf( 'info', 'txtHeight', value );
|
|---|
| 50 | }
|
|---|
| 51 | }
|
|---|
| 52 | }
|
|---|
| 53 | updatePreview( dialog );
|
|---|
| 54 | };
|
|---|
| 55 |
|
|---|
| 56 | var updatePreview = function( dialog )
|
|---|
| 57 | {
|
|---|
| 58 | //Don't load before onShow.
|
|---|
| 59 | if ( !dialog.originalElement || !dialog.preview )
|
|---|
| 60 | return 1;
|
|---|
| 61 |
|
|---|
| 62 | // Read attributes and update imagePreview;
|
|---|
| 63 | dialog.commitContent( PREVIEW, dialog.preview );
|
|---|
| 64 | return 0;
|
|---|
| 65 | };
|
|---|
| 66 |
|
|---|
| 67 | // Custom commit dialog logic, where we're intended to give inline style
|
|---|
| 68 | // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
|
|---|
| 69 | // by other fields.
|
|---|
| 70 | function commitContent()
|
|---|
| 71 | {
|
|---|
| 72 | var args = arguments;
|
|---|
| 73 | var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
|
|---|
| 74 | inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
|
|---|
| 75 |
|
|---|
| 76 | this.foreach( function( widget )
|
|---|
| 77 | {
|
|---|
| 78 | if ( widget.commit && widget.id != 'txtdlgGenStyle' )
|
|---|
| 79 | widget.commit.apply( widget, args );
|
|---|
| 80 | });
|
|---|
| 81 | }
|
|---|
| 82 |
|
|---|
| 83 | // Avoid recursions.
|
|---|
| 84 | var incommit;
|
|---|
| 85 |
|
|---|
| 86 | // Synchronous field values to other impacted fields is required, e.g. border
|
|---|
| 87 | // size change should alter inline-style text as well.
|
|---|
| 88 | function commitInternally( targetFields )
|
|---|
| 89 | {
|
|---|
| 90 | if ( incommit )
|
|---|
| 91 | return;
|
|---|
| 92 |
|
|---|
| 93 | incommit = 1;
|
|---|
| 94 |
|
|---|
| 95 | var dialog = this.getDialog(),
|
|---|
| 96 | element = dialog.imageElement;
|
|---|
| 97 | if ( element )
|
|---|
| 98 | {
|
|---|
| 99 | // Commit this field and broadcast to target fields.
|
|---|
| 100 | this.commit( IMAGE, element );
|
|---|
| 101 |
|
|---|
| 102 | targetFields = [].concat( targetFields );
|
|---|
| 103 | var length = targetFields.length,
|
|---|
| 104 | field;
|
|---|
| 105 | for ( var i = 0; i < length; i++ )
|
|---|
| 106 | {
|
|---|
| 107 | field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
|
|---|
| 108 | // May cause recursion.
|
|---|
| 109 | field && field.setup( IMAGE, element );
|
|---|
| 110 | }
|
|---|
| 111 | }
|
|---|
| 112 |
|
|---|
| 113 | incommit = 0;
|
|---|
| 114 | }
|
|---|
| 115 |
|
|---|
| 116 | var switchLockRatio = function( dialog, value )
|
|---|
| 117 | {
|
|---|
| 118 | if ( !dialog.getContentElement( 'info', 'ratioLock' ) )
|
|---|
| 119 | return null;
|
|---|
| 120 |
|
|---|
| 121 | var oImageOriginal = dialog.originalElement;
|
|---|
| 122 |
|
|---|
| 123 | // Dialog may already closed. (#5505)
|
|---|
| 124 | if( !oImageOriginal )
|
|---|
| 125 | return null;
|
|---|
| 126 |
|
|---|
| 127 | // Check image ratio and original image ratio, but respecting user's preference.
|
|---|
| 128 | if ( value == 'check' )
|
|---|
| 129 | {
|
|---|
| 130 | if ( !dialog.userlockRatio && oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
|---|
| 131 | {
|
|---|
| 132 | var width = dialog.getValueOf( 'info', 'txtWidth' ),
|
|---|
| 133 | height = dialog.getValueOf( 'info', 'txtHeight' ),
|
|---|
| 134 | originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
|
|---|
| 135 | thisRatio = width * 1000 / height;
|
|---|
| 136 | dialog.lockRatio = false; // Default: unlock ratio
|
|---|
| 137 |
|
|---|
| 138 | if ( !width && !height )
|
|---|
| 139 | dialog.lockRatio = true;
|
|---|
| 140 | else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
|
|---|
| 141 | {
|
|---|
| 142 | if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
|
|---|
| 143 | dialog.lockRatio = true;
|
|---|
| 144 | }
|
|---|
| 145 | }
|
|---|
| 146 | }
|
|---|
| 147 | else if ( value != undefined )
|
|---|
| 148 | dialog.lockRatio = value;
|
|---|
| 149 | else
|
|---|
| 150 | {
|
|---|
| 151 | dialog.userlockRatio = 1;
|
|---|
| 152 | dialog.lockRatio = !dialog.lockRatio;
|
|---|
| 153 | }
|
|---|
| 154 |
|
|---|
| 155 | var ratioButton = CKEDITOR.document.getById( btnLockSizesId );
|
|---|
| 156 | if ( dialog.lockRatio )
|
|---|
| 157 | ratioButton.removeClass( 'cke_btn_unlocked' );
|
|---|
| 158 | else
|
|---|
| 159 | ratioButton.addClass( 'cke_btn_unlocked' );
|
|---|
| 160 |
|
|---|
| 161 | ratioButton.setAttribute( 'aria-checked', dialog.lockRatio );
|
|---|
| 162 |
|
|---|
| 163 | // Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE
|
|---|
| 164 | if ( CKEDITOR.env.hc )
|
|---|
| 165 | {
|
|---|
| 166 | var icon = ratioButton.getChild( 0 );
|
|---|
| 167 | icon.setHtml( dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0': '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
|
|---|
| 168 | }
|
|---|
| 169 |
|
|---|
| 170 | return dialog.lockRatio;
|
|---|
| 171 | };
|
|---|
| 172 |
|
|---|
| 173 | var resetSize = function( dialog )
|
|---|
| 174 | {
|
|---|
| 175 | var oImageOriginal = dialog.originalElement;
|
|---|
| 176 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
|---|
| 177 | {
|
|---|
| 178 | var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
|
|---|
| 179 | heightField = dialog.getContentElement( 'info', 'txtHeight' );
|
|---|
| 180 | widthField && widthField.setValue( oImageOriginal.$.width );
|
|---|
| 181 | heightField && heightField.setValue( oImageOriginal.$.height );
|
|---|
| 182 | }
|
|---|
| 183 | updatePreview( dialog );
|
|---|
| 184 | };
|
|---|
| 185 |
|
|---|
| 186 | var setupDimension = function( type, element )
|
|---|
| 187 | {
|
|---|
| 188 | if ( type != IMAGE )
|
|---|
| 189 | return;
|
|---|
| 190 |
|
|---|
| 191 | function checkDimension( size, defaultValue )
|
|---|
| 192 | {
|
|---|
| 193 | var aMatch = size.match( regexGetSize );
|
|---|
| 194 | if ( aMatch )
|
|---|
| 195 | {
|
|---|
| 196 | if ( aMatch[2] == '%' ) // % is allowed.
|
|---|
| 197 | {
|
|---|
| 198 | aMatch[1] += '%';
|
|---|
| 199 | switchLockRatio( dialog, false ); // Unlock ratio
|
|---|
| 200 | }
|
|---|
| 201 | return aMatch[1];
|
|---|
| 202 | }
|
|---|
| 203 | return defaultValue;
|
|---|
| 204 | }
|
|---|
| 205 |
|
|---|
| 206 | var dialog = this.getDialog(),
|
|---|
| 207 | value = '',
|
|---|
| 208 | dimension = this.id == 'txtWidth' ? 'width' : 'height',
|
|---|
| 209 | size = element.getAttribute( dimension );
|
|---|
| 210 |
|
|---|
| 211 | if ( size )
|
|---|
| 212 | value = checkDimension( size, value );
|
|---|
| 213 | value = checkDimension( element.getStyle( dimension ), value );
|
|---|
| 214 |
|
|---|
| 215 | this.setValue( value );
|
|---|
| 216 | };
|
|---|
| 217 |
|
|---|
| 218 | var previewPreloader;
|
|---|
| 219 |
|
|---|
| 220 | var onImgLoadEvent = function()
|
|---|
| 221 | {
|
|---|
| 222 | // Image is ready.
|
|---|
| 223 | var original = this.originalElement;
|
|---|
| 224 | original.setCustomData( 'isReady', 'true' );
|
|---|
| 225 | original.removeListener( 'load', onImgLoadEvent );
|
|---|
| 226 | original.removeListener( 'error', onImgLoadErrorEvent );
|
|---|
| 227 | original.removeListener( 'abort', onImgLoadErrorEvent );
|
|---|
| 228 |
|
|---|
| 229 | // Hide loader
|
|---|
| 230 | CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
|
|---|
| 231 |
|
|---|
| 232 | // New image -> new domensions
|
|---|
| 233 | if ( !this.dontResetSize )
|
|---|
| 234 | resetSize( this );
|
|---|
| 235 |
|
|---|
| 236 | if ( this.firstLoad )
|
|---|
| 237 | CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this );
|
|---|
| 238 |
|
|---|
| 239 | this.firstLoad = false;
|
|---|
| 240 | this.dontResetSize = false;
|
|---|
| 241 | };
|
|---|
| 242 |
|
|---|
| 243 | var onImgLoadErrorEvent = function()
|
|---|
| 244 | {
|
|---|
| 245 | // Error. Image is not loaded.
|
|---|
| 246 | var original = this.originalElement;
|
|---|
| 247 | original.removeListener( 'load', onImgLoadEvent );
|
|---|
| 248 | original.removeListener( 'error', onImgLoadErrorEvent );
|
|---|
| 249 | original.removeListener( 'abort', onImgLoadErrorEvent );
|
|---|
| 250 |
|
|---|
| 251 | // Set Error image.
|
|---|
| 252 | var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
|
|---|
| 253 |
|
|---|
| 254 | if ( this.preview )
|
|---|
| 255 | this.preview.setAttribute( 'src', noimage );
|
|---|
| 256 |
|
|---|
| 257 | // Hide loader
|
|---|
| 258 | CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
|
|---|
| 259 | switchLockRatio( this, false ); // Unlock.
|
|---|
| 260 | };
|
|---|
| 261 |
|
|---|
| 262 | var numbering = function( id )
|
|---|
| 263 | {
|
|---|
| 264 | return CKEDITOR.tools.getNextId() + '_' + id;
|
|---|
| 265 | },
|
|---|
| 266 | btnLockSizesId = numbering( 'btnLockSizes' ),
|
|---|
| 267 | btnResetSizeId = numbering( 'btnResetSize' ),
|
|---|
| 268 | imagePreviewLoaderId = numbering( 'ImagePreviewLoader' ),
|
|---|
| 269 | imagePreviewBoxId = numbering( 'ImagePreviewBox' ),
|
|---|
| 270 | previewLinkId = numbering( 'previewLink' ),
|
|---|
| 271 | previewImageId = numbering( 'previewImage' );
|
|---|
| 272 |
|
|---|
| 273 | return {
|
|---|
| 274 | title : editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ],
|
|---|
| 275 | minWidth : 420,
|
|---|
| 276 | minHeight : 360,
|
|---|
| 277 | onShow : function()
|
|---|
| 278 | {
|
|---|
| 279 | this.imageElement = false;
|
|---|
| 280 | this.linkElement = false;
|
|---|
| 281 |
|
|---|
| 282 | // Default: create a new element.
|
|---|
| 283 | this.imageEditMode = false;
|
|---|
| 284 | this.linkEditMode = false;
|
|---|
| 285 |
|
|---|
| 286 | this.lockRatio = true;
|
|---|
| 287 | this.userlockRatio = 0;
|
|---|
| 288 | this.dontResetSize = false;
|
|---|
| 289 | this.firstLoad = true;
|
|---|
| 290 | this.addLink = false;
|
|---|
| 291 |
|
|---|
| 292 | var editor = this.getParentEditor(),
|
|---|
| 293 | sel = this.getParentEditor().getSelection(),
|
|---|
| 294 | element = sel.getSelectedElement(),
|
|---|
| 295 | link = element && element.getAscendant( 'a' );
|
|---|
| 296 |
|
|---|
| 297 | //Hide loader.
|
|---|
| 298 | CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
|
|---|
| 299 | // Create the preview before setup the dialog contents.
|
|---|
| 300 | previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );
|
|---|
| 301 | this.preview = CKEDITOR.document.getById( previewImageId );
|
|---|
| 302 |
|
|---|
| 303 | // Copy of the image
|
|---|
| 304 | this.originalElement = editor.document.createElement( 'img' );
|
|---|
| 305 | this.originalElement.setAttribute( 'alt', '' );
|
|---|
| 306 | this.originalElement.setCustomData( 'isReady', 'false' );
|
|---|
| 307 |
|
|---|
| 308 | if ( link )
|
|---|
| 309 | {
|
|---|
| 310 | this.linkElement = link;
|
|---|
| 311 | this.linkEditMode = true;
|
|---|
| 312 |
|
|---|
| 313 | // Look for Image element.
|
|---|
| 314 | var linkChildren = link.getChildren();
|
|---|
| 315 | if ( linkChildren.count() == 1 ) // 1 child.
|
|---|
| 316 | {
|
|---|
| 317 | var childTagName = linkChildren.getItem( 0 ).getName();
|
|---|
| 318 | if ( childTagName == 'img' || childTagName == 'input' )
|
|---|
| 319 | {
|
|---|
| 320 | this.imageElement = linkChildren.getItem( 0 );
|
|---|
| 321 | if ( this.imageElement.getName() == 'img' )
|
|---|
| 322 | this.imageEditMode = 'img';
|
|---|
| 323 | else if ( this.imageElement.getName() == 'input' )
|
|---|
| 324 | this.imageEditMode = 'input';
|
|---|
| 325 | }
|
|---|
| 326 | }
|
|---|
| 327 | // Fill out all fields.
|
|---|
| 328 | if ( dialogType == 'image' )
|
|---|
| 329 | this.setupContent( LINK, link );
|
|---|
| 330 | }
|
|---|
| 331 |
|
|---|
| 332 | if ( element && element.getName() == 'img' && !element.data( 'cke-realelement' )
|
|---|
| 333 | || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' )
|
|---|
| 334 | {
|
|---|
| 335 | this.imageEditMode = element.getName();
|
|---|
| 336 | this.imageElement = element;
|
|---|
| 337 | }
|
|---|
| 338 |
|
|---|
| 339 | if ( this.imageEditMode )
|
|---|
| 340 | {
|
|---|
| 341 | // Use the original element as a buffer from since we don't want
|
|---|
| 342 | // temporary changes to be committed, e.g. if the dialog is canceled.
|
|---|
| 343 | this.cleanImageElement = this.imageElement;
|
|---|
| 344 | this.imageElement = this.cleanImageElement.clone( true, true );
|
|---|
| 345 |
|
|---|
| 346 | // Fill out all fields.
|
|---|
| 347 | this.setupContent( IMAGE, this.imageElement );
|
|---|
| 348 | }
|
|---|
| 349 | else
|
|---|
| 350 | this.imageElement = editor.document.createElement( 'img' );
|
|---|
| 351 |
|
|---|
| 352 | // Refresh LockRatio button
|
|---|
| 353 | switchLockRatio ( this, true );
|
|---|
| 354 |
|
|---|
| 355 | // Dont show preview if no URL given.
|
|---|
| 356 | if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )
|
|---|
| 357 | {
|
|---|
| 358 | this.preview.removeAttribute( 'src' );
|
|---|
| 359 | this.preview.setStyle( 'display', 'none' );
|
|---|
| 360 | }
|
|---|
| 361 | },
|
|---|
| 362 | onOk : function()
|
|---|
| 363 | {
|
|---|
| 364 | // Edit existing Image.
|
|---|
| 365 | if ( this.imageEditMode )
|
|---|
| 366 | {
|
|---|
| 367 | var imgTagName = this.imageEditMode;
|
|---|
| 368 |
|
|---|
| 369 | // Image dialog and Input element.
|
|---|
| 370 | if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
|
|---|
| 371 | {
|
|---|
| 372 | // Replace INPUT-> IMG
|
|---|
| 373 | imgTagName = 'img';
|
|---|
| 374 | this.imageElement = editor.document.createElement( 'img' );
|
|---|
| 375 | this.imageElement.setAttribute( 'alt', '' );
|
|---|
| 376 | editor.insertElement( this.imageElement );
|
|---|
| 377 | }
|
|---|
| 378 | // ImageButton dialog and Image element.
|
|---|
| 379 | else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
|
|---|
| 380 | {
|
|---|
| 381 | // Replace IMG -> INPUT
|
|---|
| 382 | imgTagName = 'input';
|
|---|
| 383 | this.imageElement = editor.document.createElement( 'input' );
|
|---|
| 384 | this.imageElement.setAttributes(
|
|---|
| 385 | {
|
|---|
| 386 | type : 'image',
|
|---|
| 387 | alt : ''
|
|---|
| 388 | }
|
|---|
| 389 | );
|
|---|
| 390 | editor.insertElement( this.imageElement );
|
|---|
| 391 | }
|
|---|
| 392 | else
|
|---|
| 393 | {
|
|---|
| 394 | // Restore the original element before all commits.
|
|---|
| 395 | this.imageElement = this.cleanImageElement;
|
|---|
| 396 | delete this.cleanImageElement;
|
|---|
| 397 | }
|
|---|
| 398 | }
|
|---|
| 399 | else // Create a new image.
|
|---|
| 400 | {
|
|---|
| 401 | // Image dialog -> create IMG element.
|
|---|
| 402 | if ( dialogType == 'image' )
|
|---|
| 403 | this.imageElement = editor.document.createElement( 'img' );
|
|---|
| 404 | else
|
|---|
| 405 | {
|
|---|
| 406 | this.imageElement = editor.document.createElement( 'input' );
|
|---|
| 407 | this.imageElement.setAttribute ( 'type' ,'image' );
|
|---|
| 408 | }
|
|---|
| 409 | this.imageElement.setAttribute( 'alt', '' );
|
|---|
| 410 | }
|
|---|
| 411 |
|
|---|
| 412 | // Create a new link.
|
|---|
| 413 | if ( !this.linkEditMode )
|
|---|
| 414 | this.linkElement = editor.document.createElement( 'a' );
|
|---|
| 415 |
|
|---|
| 416 | // Set attributes.
|
|---|
| 417 | this.commitContent( IMAGE, this.imageElement );
|
|---|
| 418 | this.commitContent( LINK, this.linkElement );
|
|---|
| 419 |
|
|---|
| 420 | // Remove empty style attribute.
|
|---|
| 421 | if ( !this.imageElement.getAttribute( 'style' ) )
|
|---|
| 422 | this.imageElement.removeAttribute( 'style' );
|
|---|
| 423 |
|
|---|
| 424 | // Insert a new Image.
|
|---|
| 425 | if ( !this.imageEditMode )
|
|---|
| 426 | {
|
|---|
| 427 | if ( this.addLink )
|
|---|
| 428 | {
|
|---|
| 429 | //Insert a new Link.
|
|---|
| 430 | if ( !this.linkEditMode )
|
|---|
| 431 | {
|
|---|
| 432 | editor.insertElement( this.linkElement );
|
|---|
| 433 | this.linkElement.append( this.imageElement, false );
|
|---|
| 434 | }
|
|---|
| 435 | else //Link already exists, image not.
|
|---|
| 436 | editor.insertElement( this.imageElement );
|
|---|
| 437 | }
|
|---|
| 438 | else
|
|---|
| 439 | editor.insertElement( this.imageElement );
|
|---|
| 440 | }
|
|---|
| 441 | else // Image already exists.
|
|---|
| 442 | {
|
|---|
| 443 | //Add a new link element.
|
|---|
| 444 | if ( !this.linkEditMode && this.addLink )
|
|---|
| 445 | {
|
|---|
| 446 | editor.insertElement( this.linkElement );
|
|---|
| 447 | this.imageElement.appendTo( this.linkElement );
|
|---|
| 448 | }
|
|---|
| 449 | //Remove Link, Image exists.
|
|---|
| 450 | else if ( this.linkEditMode && !this.addLink )
|
|---|
| 451 | {
|
|---|
| 452 | editor.getSelection().selectElement( this.linkElement );
|
|---|
| 453 | editor.insertElement( this.imageElement );
|
|---|
| 454 | }
|
|---|
| 455 | }
|
|---|
| 456 | },
|
|---|
| 457 | onLoad : function()
|
|---|
| 458 | {
|
|---|
| 459 | if ( dialogType != 'image' )
|
|---|
| 460 | this.hidePage( 'Link' ); //Hide Link tab.
|
|---|
| 461 | var doc = this._.element.getDocument();
|
|---|
| 462 |
|
|---|
| 463 | if ( this.getContentElement( 'info', 'ratioLock' ) )
|
|---|
| 464 | {
|
|---|
| 465 | this.addFocusable( doc.getById( btnResetSizeId ), 5 );
|
|---|
| 466 | this.addFocusable( doc.getById( btnLockSizesId ), 5 );
|
|---|
| 467 | }
|
|---|
| 468 |
|
|---|
| 469 | this.commitContent = commitContent;
|
|---|
| 470 | },
|
|---|
| 471 | onHide : function()
|
|---|
| 472 | {
|
|---|
| 473 | if ( this.preview )
|
|---|
| 474 | this.commitContent( CLEANUP, this.preview );
|
|---|
| 475 |
|
|---|
| 476 | if ( this.originalElement )
|
|---|
| 477 | {
|
|---|
| 478 | this.originalElement.removeListener( 'load', onImgLoadEvent );
|
|---|
| 479 | this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
|
|---|
| 480 | this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
|
|---|
| 481 | this.originalElement.remove();
|
|---|
| 482 | this.originalElement = false; // Dialog is closed.
|
|---|
| 483 | }
|
|---|
| 484 |
|
|---|
| 485 | delete this.imageElement;
|
|---|
| 486 | },
|
|---|
| 487 | contents : [
|
|---|
| 488 | {
|
|---|
| 489 | id : 'info',
|
|---|
| 490 | label : editor.lang.image.infoTab,
|
|---|
| 491 | accessKey : 'I',
|
|---|
| 492 | elements :
|
|---|
| 493 | [
|
|---|
| 494 | {
|
|---|
| 495 | type : 'vbox',
|
|---|
| 496 | padding : 0,
|
|---|
| 497 | children :
|
|---|
| 498 | [
|
|---|
| 499 | {
|
|---|
| 500 | type : 'hbox',
|
|---|
| 501 | widths : [ '280px', '110px' ],
|
|---|
| 502 | align : 'right',
|
|---|
| 503 | children :
|
|---|
| 504 | [
|
|---|
| 505 | {
|
|---|
| 506 | id : 'txtUrl',
|
|---|
| 507 | type : 'text',
|
|---|
| 508 | label : editor.lang.common.url,
|
|---|
| 509 | required: true,
|
|---|
| 510 | onChange : function()
|
|---|
| 511 | {
|
|---|
| 512 | var dialog = this.getDialog(),
|
|---|
| 513 | newUrl = this.getValue();
|
|---|
| 514 |
|
|---|
| 515 | //Update original image
|
|---|
| 516 | if ( newUrl.length > 0 ) //Prevent from load before onShow
|
|---|
| 517 | {
|
|---|
| 518 | dialog = this.getDialog();
|
|---|
| 519 | var original = dialog.originalElement;
|
|---|
| 520 |
|
|---|
| 521 | dialog.preview.removeStyle( 'display' );
|
|---|
| 522 |
|
|---|
| 523 | original.setCustomData( 'isReady', 'false' );
|
|---|
| 524 | // Show loader
|
|---|
| 525 | var loader = CKEDITOR.document.getById( imagePreviewLoaderId );
|
|---|
| 526 | if ( loader )
|
|---|
| 527 | loader.setStyle( 'display', '' );
|
|---|
| 528 |
|
|---|
| 529 | original.on( 'load', onImgLoadEvent, dialog );
|
|---|
| 530 | original.on( 'error', onImgLoadErrorEvent, dialog );
|
|---|
| 531 | original.on( 'abort', onImgLoadErrorEvent, dialog );
|
|---|
| 532 | original.setAttribute( 'src', newUrl );
|
|---|
| 533 |
|
|---|
| 534 | // Query the preloader to figure out the url impacted by based href.
|
|---|
| 535 | previewPreloader.setAttribute( 'src', newUrl );
|
|---|
| 536 | dialog.preview.setAttribute( 'src', previewPreloader.$.src );
|
|---|
| 537 | updatePreview( dialog );
|
|---|
| 538 | }
|
|---|
| 539 | // Dont show preview if no URL given.
|
|---|
| 540 | else if ( dialog.preview )
|
|---|
| 541 | {
|
|---|
| 542 | dialog.preview.removeAttribute( 'src' );
|
|---|
| 543 | dialog.preview.setStyle( 'display', 'none' );
|
|---|
| 544 | }
|
|---|
| 545 | },
|
|---|
| 546 | setup : function( type, element )
|
|---|
| 547 | {
|
|---|
| 548 | if ( type == IMAGE )
|
|---|
| 549 | {
|
|---|
| 550 | var url = element.data( 'cke-saved-src' ) || element.getAttribute( 'src' );
|
|---|
| 551 | var field = this;
|
|---|
| 552 |
|
|---|
| 553 | this.getDialog().dontResetSize = true;
|
|---|
| 554 |
|
|---|
| 555 | field.setValue( url ); // And call this.onChange()
|
|---|
| 556 | // Manually set the initial value.(#4191)
|
|---|
| 557 | field.setInitValue();
|
|---|
| 558 | }
|
|---|
| 559 | },
|
|---|
| 560 | commit : function( type, element )
|
|---|
| 561 | {
|
|---|
| 562 | if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
|
|---|
| 563 | {
|
|---|
| 564 | element.data( 'cke-saved-src', this.getValue() );
|
|---|
| 565 | element.setAttribute( 'src', this.getValue() );
|
|---|
| 566 | }
|
|---|
| 567 | else if ( type == CLEANUP )
|
|---|
| 568 | {
|
|---|
| 569 | element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
|
|---|
| 570 | element.removeAttribute( 'src' );
|
|---|
| 571 | }
|
|---|
| 572 | },
|
|---|
| 573 | validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
|
|---|
| 574 | },
|
|---|
| 575 | {
|
|---|
| 576 | type : 'button',
|
|---|
| 577 | id : 'browse',
|
|---|
| 578 | // v-align with the 'txtUrl' field.
|
|---|
| 579 | // TODO: We need something better than a fixed size here.
|
|---|
| 580 | style : 'display:inline-block;margin-top:10px;',
|
|---|
| 581 | align : 'center',
|
|---|
| 582 | label : editor.lang.common.browseServer,
|
|---|
| 583 | hidden : true,
|
|---|
| 584 | filebrowser : 'info:txtUrl'
|
|---|
| 585 | }
|
|---|
| 586 | ]
|
|---|
| 587 | }
|
|---|
| 588 | ]
|
|---|
| 589 | },
|
|---|
| 590 | {
|
|---|
| 591 | id : 'txtAlt',
|
|---|
| 592 | type : 'text',
|
|---|
| 593 | label : editor.lang.image.alt,
|
|---|
| 594 | accessKey : 'T',
|
|---|
| 595 | 'default' : '',
|
|---|
| 596 | onChange : function()
|
|---|
| 597 | {
|
|---|
| 598 | updatePreview( this.getDialog() );
|
|---|
| 599 | },
|
|---|
| 600 | setup : function( type, element )
|
|---|
| 601 | {
|
|---|
| 602 | if ( type == IMAGE )
|
|---|
| 603 | this.setValue( element.getAttribute( 'alt' ) );
|
|---|
| 604 | },
|
|---|
| 605 | commit : function( type, element )
|
|---|
| 606 | {
|
|---|
| 607 | if ( type == IMAGE )
|
|---|
| 608 | {
|
|---|
| 609 | if ( this.getValue() || this.isChanged() )
|
|---|
| 610 | element.setAttribute( 'alt', this.getValue() );
|
|---|
| 611 | }
|
|---|
| 612 | else if ( type == PREVIEW )
|
|---|
| 613 | {
|
|---|
| 614 | element.setAttribute( 'alt', this.getValue() );
|
|---|
| 615 | }
|
|---|
| 616 | else if ( type == CLEANUP )
|
|---|
| 617 | {
|
|---|
| 618 | element.removeAttribute( 'alt' );
|
|---|
| 619 | }
|
|---|
| 620 | }
|
|---|
| 621 | },
|
|---|
| 622 | {
|
|---|
| 623 | type : 'hbox',
|
|---|
| 624 | children :
|
|---|
| 625 | [
|
|---|
| 626 | {
|
|---|
| 627 | id : 'basic',
|
|---|
| 628 | type : 'vbox',
|
|---|
| 629 | children :
|
|---|
| 630 | [
|
|---|
| 631 | {
|
|---|
| 632 | type : 'hbox',
|
|---|
| 633 | widths : [ '50%', '50%' ],
|
|---|
| 634 | children :
|
|---|
| 635 | [
|
|---|
| 636 | {
|
|---|
| 637 | type : 'vbox',
|
|---|
| 638 | padding : 1,
|
|---|
| 639 | children :
|
|---|
| 640 | [
|
|---|
| 641 | {
|
|---|
| 642 | type : 'text',
|
|---|
| 643 | width: '40px',
|
|---|
| 644 | id : 'txtWidth',
|
|---|
| 645 | label : editor.lang.common.width,
|
|---|
| 646 | onKeyUp : onSizeChange,
|
|---|
| 647 | onChange : function()
|
|---|
| 648 | {
|
|---|
| 649 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );
|
|---|
| 650 | },
|
|---|
| 651 | validate : function()
|
|---|
| 652 | {
|
|---|
| 653 | var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
|
|---|
| 654 | isValid = !!( aMatch && parseInt( aMatch[1], 10 ) !== 0 );
|
|---|
| 655 | if ( !isValid )
|
|---|
| 656 | alert( editor.lang.common.invalidWidth );
|
|---|
| 657 | return isValid;
|
|---|
| 658 | },
|
|---|
| 659 | setup : setupDimension,
|
|---|
| 660 | commit : function( type, element, internalCommit )
|
|---|
| 661 | {
|
|---|
| 662 | var value = this.getValue();
|
|---|
| 663 | if ( type == IMAGE )
|
|---|
| 664 | {
|
|---|
| 665 | if ( value )
|
|---|
| 666 | element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 667 | else
|
|---|
| 668 | element.removeStyle( 'width' );
|
|---|
| 669 |
|
|---|
| 670 | !internalCommit && element.removeAttribute( 'width' );
|
|---|
| 671 | }
|
|---|
| 672 | else if ( type == PREVIEW )
|
|---|
| 673 | {
|
|---|
| 674 | var aMatch = value.match( regexGetSize );
|
|---|
| 675 | if ( !aMatch )
|
|---|
| 676 | {
|
|---|
| 677 | var oImageOriginal = this.getDialog().originalElement;
|
|---|
| 678 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
|---|
| 679 | element.setStyle( 'width', oImageOriginal.$.width + 'px');
|
|---|
| 680 | }
|
|---|
| 681 | else
|
|---|
| 682 | element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 683 | }
|
|---|
| 684 | else if ( type == CLEANUP )
|
|---|
| 685 | {
|
|---|
| 686 | element.removeAttribute( 'width' );
|
|---|
| 687 | element.removeStyle( 'width' );
|
|---|
| 688 | }
|
|---|
| 689 | }
|
|---|
| 690 | },
|
|---|
| 691 | {
|
|---|
| 692 | type : 'text',
|
|---|
| 693 | id : 'txtHeight',
|
|---|
| 694 | width: '40px',
|
|---|
| 695 | label : editor.lang.common.height,
|
|---|
| 696 | onKeyUp : onSizeChange,
|
|---|
| 697 | onChange : function()
|
|---|
| 698 | {
|
|---|
| 699 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );
|
|---|
| 700 | },
|
|---|
| 701 | validate : function()
|
|---|
| 702 | {
|
|---|
| 703 | var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
|
|---|
| 704 | isValid = !!( aMatch && parseInt( aMatch[1], 10 ) !== 0 );
|
|---|
| 705 | if ( !isValid )
|
|---|
| 706 | alert( editor.lang.common.invalidHeight );
|
|---|
| 707 | return isValid;
|
|---|
| 708 | },
|
|---|
| 709 | setup : setupDimension,
|
|---|
| 710 | commit : function( type, element, internalCommit )
|
|---|
| 711 | {
|
|---|
| 712 | var value = this.getValue();
|
|---|
| 713 | if ( type == IMAGE )
|
|---|
| 714 | {
|
|---|
| 715 | if ( value )
|
|---|
| 716 | element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 717 | else
|
|---|
| 718 | element.removeStyle( 'height' );
|
|---|
| 719 |
|
|---|
| 720 | !internalCommit && element.removeAttribute( 'height' );
|
|---|
| 721 | }
|
|---|
| 722 | else if ( type == PREVIEW )
|
|---|
| 723 | {
|
|---|
| 724 | var aMatch = value.match( regexGetSize );
|
|---|
| 725 | if ( !aMatch )
|
|---|
| 726 | {
|
|---|
| 727 | var oImageOriginal = this.getDialog().originalElement;
|
|---|
| 728 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
|---|
| 729 | element.setStyle( 'height', oImageOriginal.$.height + 'px' );
|
|---|
| 730 | }
|
|---|
| 731 | else
|
|---|
| 732 | element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 733 | }
|
|---|
| 734 | else if ( type == CLEANUP )
|
|---|
| 735 | {
|
|---|
| 736 | element.removeAttribute( 'height' );
|
|---|
| 737 | element.removeStyle( 'height' );
|
|---|
| 738 | }
|
|---|
| 739 | }
|
|---|
| 740 | }
|
|---|
| 741 | ]
|
|---|
| 742 | },
|
|---|
| 743 | {
|
|---|
| 744 | id : 'ratioLock',
|
|---|
| 745 | type : 'html',
|
|---|
| 746 | style : 'margin-top:30px;width:40px;height:40px;',
|
|---|
| 747 | onLoad : function()
|
|---|
| 748 | {
|
|---|
| 749 | // Activate Reset button
|
|---|
| 750 | var resetButton = CKEDITOR.document.getById( btnResetSizeId ),
|
|---|
| 751 | ratioButton = CKEDITOR.document.getById( btnLockSizesId );
|
|---|
| 752 | if ( resetButton )
|
|---|
| 753 | {
|
|---|
| 754 | resetButton.on( 'click', function( evt )
|
|---|
| 755 | {
|
|---|
| 756 | resetSize( this );
|
|---|
| 757 | evt.data && evt.data.preventDefault();
|
|---|
| 758 | }, this.getDialog() );
|
|---|
| 759 | resetButton.on( 'mouseover', function()
|
|---|
| 760 | {
|
|---|
| 761 | this.addClass( 'cke_btn_over' );
|
|---|
| 762 | }, resetButton );
|
|---|
| 763 | resetButton.on( 'mouseout', function()
|
|---|
| 764 | {
|
|---|
| 765 | this.removeClass( 'cke_btn_over' );
|
|---|
| 766 | }, resetButton );
|
|---|
| 767 | }
|
|---|
| 768 | // Activate (Un)LockRatio button
|
|---|
| 769 | if ( ratioButton )
|
|---|
| 770 | {
|
|---|
| 771 | ratioButton.on( 'click', function(evt)
|
|---|
| 772 | {
|
|---|
| 773 | var locked = switchLockRatio( this ),
|
|---|
| 774 | oImageOriginal = this.originalElement,
|
|---|
| 775 | width = this.getValueOf( 'info', 'txtWidth' );
|
|---|
| 776 |
|
|---|
| 777 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
|
|---|
| 778 | {
|
|---|
| 779 | var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
|
|---|
| 780 | if ( !isNaN( height ) )
|
|---|
| 781 | {
|
|---|
| 782 | this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
|
|---|
| 783 | updatePreview( this );
|
|---|
| 784 | }
|
|---|
| 785 | }
|
|---|
| 786 | evt.data && evt.data.preventDefault();
|
|---|
| 787 | }, this.getDialog() );
|
|---|
| 788 | ratioButton.on( 'mouseover', function()
|
|---|
| 789 | {
|
|---|
| 790 | this.addClass( 'cke_btn_over' );
|
|---|
| 791 | }, ratioButton );
|
|---|
| 792 | ratioButton.on( 'mouseout', function()
|
|---|
| 793 | {
|
|---|
| 794 | this.removeClass( 'cke_btn_over' );
|
|---|
| 795 | }, ratioButton );
|
|---|
| 796 | }
|
|---|
| 797 | },
|
|---|
| 798 | html : '<div>'+
|
|---|
| 799 | '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
|
|---|
| 800 | '" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' +
|
|---|
| 801 | '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
|
|---|
| 802 | '" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>'+
|
|---|
| 803 | '</div>'
|
|---|
| 804 | }
|
|---|
| 805 | ]
|
|---|
| 806 | },
|
|---|
| 807 | {
|
|---|
| 808 | type : 'vbox',
|
|---|
| 809 | padding : 1,
|
|---|
| 810 | children :
|
|---|
| 811 | [
|
|---|
| 812 | {
|
|---|
| 813 | type : 'text',
|
|---|
| 814 | id : 'txtBorder',
|
|---|
| 815 | width: '60px',
|
|---|
| 816 | label : editor.lang.image.border,
|
|---|
| 817 | 'default' : '',
|
|---|
| 818 | onKeyUp : function()
|
|---|
| 819 | {
|
|---|
| 820 | updatePreview( this.getDialog() );
|
|---|
| 821 | },
|
|---|
| 822 | onChange : function()
|
|---|
| 823 | {
|
|---|
| 824 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );
|
|---|
| 825 | },
|
|---|
| 826 | validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),
|
|---|
| 827 | setup : function( type, element )
|
|---|
| 828 | {
|
|---|
| 829 | if ( type == IMAGE )
|
|---|
| 830 | {
|
|---|
| 831 | var value,
|
|---|
| 832 | borderStyle = element.getStyle( 'border-width' );
|
|---|
| 833 | borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
|
|---|
| 834 | value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
|
|---|
| 835 | isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );
|
|---|
| 836 | this.setValue( value );
|
|---|
| 837 | }
|
|---|
| 838 | },
|
|---|
| 839 | commit : function( type, element, internalCommit )
|
|---|
| 840 | {
|
|---|
| 841 | var value = parseInt( this.getValue(), 10 );
|
|---|
| 842 | if ( type == IMAGE || type == PREVIEW )
|
|---|
| 843 | {
|
|---|
| 844 | if ( !isNaN( value ) )
|
|---|
| 845 | {
|
|---|
| 846 | element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 847 | element.setStyle( 'border-style', 'solid' );
|
|---|
| 848 | }
|
|---|
| 849 | else if ( !value && this.isChanged() )
|
|---|
| 850 | {
|
|---|
| 851 | element.removeStyle( 'border-width' );
|
|---|
| 852 | element.removeStyle( 'border-style' );
|
|---|
| 853 | element.removeStyle( 'border-color' );
|
|---|
| 854 | }
|
|---|
| 855 |
|
|---|
| 856 | if ( !internalCommit && type == IMAGE )
|
|---|
| 857 | element.removeAttribute( 'border' );
|
|---|
| 858 | }
|
|---|
| 859 | else if ( type == CLEANUP )
|
|---|
| 860 | {
|
|---|
| 861 | element.removeAttribute( 'border' );
|
|---|
| 862 | element.removeStyle( 'border-width' );
|
|---|
| 863 | element.removeStyle( 'border-style' );
|
|---|
| 864 | element.removeStyle( 'border-color' );
|
|---|
| 865 | }
|
|---|
| 866 | }
|
|---|
| 867 | },
|
|---|
| 868 | {
|
|---|
| 869 | type : 'text',
|
|---|
| 870 | id : 'txtHSpace',
|
|---|
| 871 | width: '60px',
|
|---|
| 872 | label : editor.lang.image.hSpace,
|
|---|
| 873 | 'default' : '',
|
|---|
| 874 | onKeyUp : function()
|
|---|
| 875 | {
|
|---|
| 876 | updatePreview( this.getDialog() );
|
|---|
| 877 | },
|
|---|
| 878 | onChange : function()
|
|---|
| 879 | {
|
|---|
| 880 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );
|
|---|
| 881 | },
|
|---|
| 882 | validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),
|
|---|
| 883 | setup : function( type, element )
|
|---|
| 884 | {
|
|---|
| 885 | if ( type == IMAGE )
|
|---|
| 886 | {
|
|---|
| 887 | var value,
|
|---|
| 888 | marginLeftPx,
|
|---|
| 889 | marginRightPx,
|
|---|
| 890 | marginLeftStyle = element.getStyle( 'margin-left' ),
|
|---|
| 891 | marginRightStyle = element.getStyle( 'margin-right' );
|
|---|
| 892 |
|
|---|
| 893 | marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
|
|---|
| 894 | marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
|
|---|
| 895 | marginLeftPx = parseInt( marginLeftStyle, 10 );
|
|---|
| 896 | marginRightPx = parseInt( marginRightStyle, 10 );
|
|---|
| 897 |
|
|---|
| 898 | value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
|
|---|
| 899 | isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
|
|---|
| 900 |
|
|---|
| 901 | this.setValue( value );
|
|---|
| 902 | }
|
|---|
| 903 | },
|
|---|
| 904 | commit : function( type, element, internalCommit )
|
|---|
| 905 | {
|
|---|
| 906 | var value = parseInt( this.getValue(), 10 );
|
|---|
| 907 | if ( type == IMAGE || type == PREVIEW )
|
|---|
| 908 | {
|
|---|
| 909 | if ( !isNaN( value ) )
|
|---|
| 910 | {
|
|---|
| 911 | element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 912 | element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 913 | }
|
|---|
| 914 | else if ( !value && this.isChanged( ) )
|
|---|
| 915 | {
|
|---|
| 916 | element.removeStyle( 'margin-left' );
|
|---|
| 917 | element.removeStyle( 'margin-right' );
|
|---|
| 918 | }
|
|---|
| 919 |
|
|---|
| 920 | if ( !internalCommit && type == IMAGE )
|
|---|
| 921 | element.removeAttribute( 'hspace' );
|
|---|
| 922 | }
|
|---|
| 923 | else if ( type == CLEANUP )
|
|---|
| 924 | {
|
|---|
| 925 | element.removeAttribute( 'hspace' );
|
|---|
| 926 | element.removeStyle( 'margin-left' );
|
|---|
| 927 | element.removeStyle( 'margin-right' );
|
|---|
| 928 | }
|
|---|
| 929 | }
|
|---|
| 930 | },
|
|---|
| 931 | {
|
|---|
| 932 | type : 'text',
|
|---|
| 933 | id : 'txtVSpace',
|
|---|
| 934 | width : '60px',
|
|---|
| 935 | label : editor.lang.image.vSpace,
|
|---|
| 936 | 'default' : '',
|
|---|
| 937 | onKeyUp : function()
|
|---|
| 938 | {
|
|---|
| 939 | updatePreview( this.getDialog() );
|
|---|
| 940 | },
|
|---|
| 941 | onChange : function()
|
|---|
| 942 | {
|
|---|
| 943 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );
|
|---|
| 944 | },
|
|---|
| 945 | validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),
|
|---|
| 946 | setup : function( type, element )
|
|---|
| 947 | {
|
|---|
| 948 | if ( type == IMAGE )
|
|---|
| 949 | {
|
|---|
| 950 | var value,
|
|---|
| 951 | marginTopPx,
|
|---|
| 952 | marginBottomPx,
|
|---|
| 953 | marginTopStyle = element.getStyle( 'margin-top' ),
|
|---|
| 954 | marginBottomStyle = element.getStyle( 'margin-bottom' );
|
|---|
| 955 |
|
|---|
| 956 | marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
|
|---|
| 957 | marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
|
|---|
| 958 | marginTopPx = parseInt( marginTopStyle, 10 );
|
|---|
| 959 | marginBottomPx = parseInt( marginBottomStyle, 10 );
|
|---|
| 960 |
|
|---|
| 961 | value = ( marginTopPx == marginBottomPx ) && marginTopPx;
|
|---|
| 962 | isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );
|
|---|
| 963 | this.setValue( value );
|
|---|
| 964 | }
|
|---|
| 965 | },
|
|---|
| 966 | commit : function( type, element, internalCommit )
|
|---|
| 967 | {
|
|---|
| 968 | var value = parseInt( this.getValue(), 10 );
|
|---|
| 969 | if ( type == IMAGE || type == PREVIEW )
|
|---|
| 970 | {
|
|---|
| 971 | if ( !isNaN( value ) )
|
|---|
| 972 | {
|
|---|
| 973 | element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 974 | element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );
|
|---|
| 975 | }
|
|---|
| 976 | else if ( !value && this.isChanged( ) )
|
|---|
| 977 | {
|
|---|
| 978 | element.removeStyle( 'margin-top' );
|
|---|
| 979 | element.removeStyle( 'margin-bottom' );
|
|---|
| 980 | }
|
|---|
| 981 |
|
|---|
| 982 | if ( !internalCommit && type == IMAGE )
|
|---|
| 983 | element.removeAttribute( 'vspace' );
|
|---|
| 984 | }
|
|---|
| 985 | else if ( type == CLEANUP )
|
|---|
| 986 | {
|
|---|
| 987 | element.removeAttribute( 'vspace' );
|
|---|
| 988 | element.removeStyle( 'margin-top' );
|
|---|
| 989 | element.removeStyle( 'margin-bottom' );
|
|---|
| 990 | }
|
|---|
| 991 | }
|
|---|
| 992 | },
|
|---|
| 993 | {
|
|---|
| 994 | id : 'cmbAlign',
|
|---|
| 995 | type : 'select',
|
|---|
| 996 | widths : [ '35%','65%' ],
|
|---|
| 997 | style : 'width:90px',
|
|---|
| 998 | label : editor.lang.common.align,
|
|---|
| 999 | 'default' : '',
|
|---|
| 1000 | items :
|
|---|
| 1001 | [
|
|---|
| 1002 | [ editor.lang.common.notSet , ''],
|
|---|
| 1003 | [ editor.lang.common.alignLeft , 'left'],
|
|---|
| 1004 | [ editor.lang.common.alignRight , 'right']
|
|---|
| 1005 | // Backward compatible with v2 on setup when specified as attribute value,
|
|---|
| 1006 | // while these values are no more available as select options.
|
|---|
| 1007 | // [ editor.lang.image.alignAbsBottom , 'absBottom'],
|
|---|
| 1008 | // [ editor.lang.image.alignAbsMiddle , 'absMiddle'],
|
|---|
| 1009 | // [ editor.lang.image.alignBaseline , 'baseline'],
|
|---|
| 1010 | // [ editor.lang.image.alignTextTop , 'text-top'],
|
|---|
| 1011 | // [ editor.lang.image.alignBottom , 'bottom'],
|
|---|
| 1012 | // [ editor.lang.image.alignMiddle , 'middle'],
|
|---|
| 1013 | // [ editor.lang.image.alignTop , 'top']
|
|---|
| 1014 | ],
|
|---|
| 1015 | onChange : function()
|
|---|
| 1016 | {
|
|---|
| 1017 | updatePreview( this.getDialog() );
|
|---|
| 1018 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );
|
|---|
| 1019 | },
|
|---|
| 1020 | setup : function( type, element )
|
|---|
| 1021 | {
|
|---|
| 1022 | if ( type == IMAGE )
|
|---|
| 1023 | {
|
|---|
| 1024 | var value = element.getStyle( 'float' );
|
|---|
| 1025 | switch( value )
|
|---|
| 1026 | {
|
|---|
| 1027 | // Ignore those unrelated values.
|
|---|
| 1028 | case 'inherit':
|
|---|
| 1029 | case 'none':
|
|---|
| 1030 | value = '';
|
|---|
| 1031 | }
|
|---|
| 1032 |
|
|---|
| 1033 | !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );
|
|---|
| 1034 | this.setValue( value );
|
|---|
| 1035 | }
|
|---|
| 1036 | },
|
|---|
| 1037 | commit : function( type, element, internalCommit )
|
|---|
| 1038 | {
|
|---|
| 1039 | var value = this.getValue();
|
|---|
| 1040 | if ( type == IMAGE || type == PREVIEW )
|
|---|
| 1041 | {
|
|---|
| 1042 | if ( value )
|
|---|
| 1043 | element.setStyle( 'float', value );
|
|---|
| 1044 | else
|
|---|
| 1045 | element.removeStyle( 'float' );
|
|---|
| 1046 |
|
|---|
| 1047 | if ( !internalCommit && type == IMAGE )
|
|---|
| 1048 | {
|
|---|
| 1049 | value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();
|
|---|
| 1050 | switch( value )
|
|---|
| 1051 | {
|
|---|
| 1052 | // we should remove it only if it matches "left" or "right",
|
|---|
| 1053 | // otherwise leave it intact.
|
|---|
| 1054 | case 'left':
|
|---|
| 1055 | case 'right':
|
|---|
| 1056 | element.removeAttribute( 'align' );
|
|---|
| 1057 | }
|
|---|
| 1058 | }
|
|---|
| 1059 | }
|
|---|
| 1060 | else if ( type == CLEANUP )
|
|---|
| 1061 | element.removeStyle( 'float' );
|
|---|
| 1062 |
|
|---|
| 1063 | }
|
|---|
| 1064 | }
|
|---|
| 1065 | ]
|
|---|
| 1066 | }
|
|---|
| 1067 | ]
|
|---|
| 1068 | },
|
|---|
| 1069 | {
|
|---|
| 1070 | type : 'vbox',
|
|---|
| 1071 | height : '250px',
|
|---|
| 1072 | children :
|
|---|
| 1073 | [
|
|---|
| 1074 | {
|
|---|
| 1075 | type : 'html',
|
|---|
| 1076 | id : 'htmlPreview',
|
|---|
| 1077 | style : 'width:95%;',
|
|---|
| 1078 | html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>'+
|
|---|
| 1079 | '<div id="' + imagePreviewLoaderId + '" class="ImagePreviewLoader" style="display:none"><div class="loading"> </div></div>'+
|
|---|
| 1080 | '<div id="' + imagePreviewBoxId + '" class="ImagePreviewBox"><table><tr><td>'+
|
|---|
| 1081 | '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="' + previewLinkId + '">'+
|
|---|
| 1082 | '<img id="' + previewImageId + '" alt="" /></a>' +
|
|---|
| 1083 | ( editor.config.image_previewText ||
|
|---|
| 1084 | 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
|
|---|
| 1085 | 'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
|
|---|
| 1086 | '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.' ) +
|
|---|
| 1087 | '</td></tr></table></div></div>'
|
|---|
| 1088 | }
|
|---|
| 1089 | ]
|
|---|
| 1090 | }
|
|---|
| 1091 | ]
|
|---|
| 1092 | }
|
|---|
| 1093 | ]
|
|---|
| 1094 | },
|
|---|
| 1095 | {
|
|---|
| 1096 | id : 'Link',
|
|---|
| 1097 | label : editor.lang.link.title,
|
|---|
| 1098 | padding : 0,
|
|---|
| 1099 | elements :
|
|---|
| 1100 | [
|
|---|
| 1101 | {
|
|---|
| 1102 | id : 'txtUrl',
|
|---|
| 1103 | type : 'text',
|
|---|
| 1104 | label : editor.lang.common.url,
|
|---|
| 1105 | style : 'width: 100%',
|
|---|
| 1106 | 'default' : '',
|
|---|
| 1107 | setup : function( type, element )
|
|---|
| 1108 | {
|
|---|
| 1109 | if ( type == LINK )
|
|---|
| 1110 | {
|
|---|
| 1111 | var href = element.data( 'cke-saved-href' );
|
|---|
| 1112 | if ( !href )
|
|---|
| 1113 | href = element.getAttribute( 'href' );
|
|---|
| 1114 | this.setValue( href );
|
|---|
| 1115 | }
|
|---|
| 1116 | },
|
|---|
| 1117 | commit : function( type, element )
|
|---|
| 1118 | {
|
|---|
| 1119 | if ( type == LINK )
|
|---|
| 1120 | {
|
|---|
| 1121 | if ( this.getValue() || this.isChanged() )
|
|---|
| 1122 | {
|
|---|
| 1123 | var url = decodeURI( this.getValue() );
|
|---|
| 1124 | element.data( 'cke-saved-href', url );
|
|---|
| 1125 | element.setAttribute( 'href', url );
|
|---|
| 1126 |
|
|---|
| 1127 | if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
|
|---|
| 1128 | this.getDialog().addLink = true;
|
|---|
| 1129 | }
|
|---|
| 1130 | }
|
|---|
| 1131 | }
|
|---|
| 1132 | },
|
|---|
| 1133 | {
|
|---|
| 1134 | type : 'button',
|
|---|
| 1135 | id : 'browse',
|
|---|
| 1136 | filebrowser :
|
|---|
| 1137 | {
|
|---|
| 1138 | action : 'Browse',
|
|---|
| 1139 | target: 'Link:txtUrl',
|
|---|
| 1140 | url: editor.config.filebrowserImageBrowseLinkUrl
|
|---|
| 1141 | },
|
|---|
| 1142 | style : 'float:right',
|
|---|
| 1143 | hidden : true,
|
|---|
| 1144 | label : editor.lang.common.browseServer
|
|---|
| 1145 | },
|
|---|
| 1146 | {
|
|---|
| 1147 | id : 'cmbTarget',
|
|---|
| 1148 | type : 'select',
|
|---|
| 1149 | label : editor.lang.common.target,
|
|---|
| 1150 | 'default' : '',
|
|---|
| 1151 | items :
|
|---|
| 1152 | [
|
|---|
| 1153 | [ editor.lang.common.notSet , ''],
|
|---|
| 1154 | [ editor.lang.common.targetNew , '_blank'],
|
|---|
| 1155 | [ editor.lang.common.targetTop , '_top'],
|
|---|
| 1156 | [ editor.lang.common.targetSelf , '_self'],
|
|---|
| 1157 | [ editor.lang.common.targetParent , '_parent']
|
|---|
| 1158 | ],
|
|---|
| 1159 | setup : function( type, element )
|
|---|
| 1160 | {
|
|---|
| 1161 | if ( type == LINK )
|
|---|
| 1162 | this.setValue( element.getAttribute( 'target' ) || '' );
|
|---|
| 1163 | },
|
|---|
| 1164 | commit : function( type, element )
|
|---|
| 1165 | {
|
|---|
| 1166 | if ( type == LINK )
|
|---|
| 1167 | {
|
|---|
| 1168 | if ( this.getValue() || this.isChanged() )
|
|---|
| 1169 | element.setAttribute( 'target', this.getValue() );
|
|---|
| 1170 | }
|
|---|
| 1171 | }
|
|---|
| 1172 | }
|
|---|
| 1173 | ]
|
|---|
| 1174 | },
|
|---|
| 1175 | {
|
|---|
| 1176 | id : 'Upload',
|
|---|
| 1177 | hidden : true,
|
|---|
| 1178 | filebrowser : 'uploadButton',
|
|---|
| 1179 | label : editor.lang.image.upload,
|
|---|
| 1180 | elements :
|
|---|
| 1181 | [
|
|---|
| 1182 | {
|
|---|
| 1183 | type : 'file',
|
|---|
| 1184 | id : 'upload',
|
|---|
| 1185 | label : editor.lang.image.btnUpload,
|
|---|
| 1186 | style: 'height:40px',
|
|---|
| 1187 | size : 38
|
|---|
| 1188 | },
|
|---|
| 1189 | {
|
|---|
| 1190 | type : 'fileButton',
|
|---|
| 1191 | id : 'uploadButton',
|
|---|
| 1192 | filebrowser : 'info:txtUrl',
|
|---|
| 1193 | label : editor.lang.image.btnUpload,
|
|---|
| 1194 | 'for' : [ 'Upload', 'upload' ]
|
|---|
| 1195 | }
|
|---|
| 1196 | ]
|
|---|
| 1197 | },
|
|---|
| 1198 | {
|
|---|
| 1199 | id : 'advanced',
|
|---|
| 1200 | label : editor.lang.common.advancedTab,
|
|---|
| 1201 | elements :
|
|---|
| 1202 | [
|
|---|
| 1203 | {
|
|---|
| 1204 | type : 'hbox',
|
|---|
| 1205 | widths : [ '50%', '25%', '25%' ],
|
|---|
| 1206 | children :
|
|---|
| 1207 | [
|
|---|
| 1208 | {
|
|---|
| 1209 | type : 'text',
|
|---|
| 1210 | id : 'linkId',
|
|---|
| 1211 | label : editor.lang.common.id,
|
|---|
| 1212 | setup : function( type, element )
|
|---|
| 1213 | {
|
|---|
| 1214 | if ( type == IMAGE )
|
|---|
| 1215 | this.setValue( element.getAttribute( 'id' ) );
|
|---|
| 1216 | },
|
|---|
| 1217 | commit : function( type, element )
|
|---|
| 1218 | {
|
|---|
| 1219 | if ( type == IMAGE )
|
|---|
| 1220 | {
|
|---|
| 1221 | if ( this.getValue() || this.isChanged() )
|
|---|
| 1222 | element.setAttribute( 'id', this.getValue() );
|
|---|
| 1223 | }
|
|---|
| 1224 | }
|
|---|
| 1225 | },
|
|---|
| 1226 | {
|
|---|
| 1227 | id : 'cmbLangDir',
|
|---|
| 1228 | type : 'select',
|
|---|
| 1229 | style : 'width : 100px;',
|
|---|
| 1230 | label : editor.lang.common.langDir,
|
|---|
| 1231 | 'default' : '',
|
|---|
| 1232 | items :
|
|---|
| 1233 | [
|
|---|
| 1234 | [ editor.lang.common.notSet, '' ],
|
|---|
| 1235 | [ editor.lang.common.langDirLtr, 'ltr' ],
|
|---|
| 1236 | [ editor.lang.common.langDirRtl, 'rtl' ]
|
|---|
| 1237 | ],
|
|---|
| 1238 | setup : function( type, element )
|
|---|
| 1239 | {
|
|---|
| 1240 | if ( type == IMAGE )
|
|---|
| 1241 | this.setValue( element.getAttribute( 'dir' ) );
|
|---|
| 1242 | },
|
|---|
| 1243 | commit : function( type, element )
|
|---|
| 1244 | {
|
|---|
| 1245 | if ( type == IMAGE )
|
|---|
| 1246 | {
|
|---|
| 1247 | if ( this.getValue() || this.isChanged() )
|
|---|
| 1248 | element.setAttribute( 'dir', this.getValue() );
|
|---|
| 1249 | }
|
|---|
| 1250 | }
|
|---|
| 1251 | },
|
|---|
| 1252 | {
|
|---|
| 1253 | type : 'text',
|
|---|
| 1254 | id : 'txtLangCode',
|
|---|
| 1255 | label : editor.lang.common.langCode,
|
|---|
| 1256 | 'default' : '',
|
|---|
| 1257 | setup : function( type, element )
|
|---|
| 1258 | {
|
|---|
| 1259 | if ( type == IMAGE )
|
|---|
| 1260 | this.setValue( element.getAttribute( 'lang' ) );
|
|---|
| 1261 | },
|
|---|
| 1262 | commit : function( type, element )
|
|---|
| 1263 | {
|
|---|
| 1264 | if ( type == IMAGE )
|
|---|
| 1265 | {
|
|---|
| 1266 | if ( this.getValue() || this.isChanged() )
|
|---|
| 1267 | element.setAttribute( 'lang', this.getValue() );
|
|---|
| 1268 | }
|
|---|
| 1269 | }
|
|---|
| 1270 | }
|
|---|
| 1271 | ]
|
|---|
| 1272 | },
|
|---|
| 1273 | {
|
|---|
| 1274 | type : 'text',
|
|---|
| 1275 | id : 'txtGenLongDescr',
|
|---|
| 1276 | label : editor.lang.common.longDescr,
|
|---|
| 1277 | setup : function( type, element )
|
|---|
| 1278 | {
|
|---|
| 1279 | if ( type == IMAGE )
|
|---|
| 1280 | this.setValue( element.getAttribute( 'longDesc' ) );
|
|---|
| 1281 | },
|
|---|
| 1282 | commit : function( type, element )
|
|---|
| 1283 | {
|
|---|
| 1284 | if ( type == IMAGE )
|
|---|
| 1285 | {
|
|---|
| 1286 | if ( this.getValue() || this.isChanged() )
|
|---|
| 1287 | element.setAttribute( 'longDesc', this.getValue() );
|
|---|
| 1288 | }
|
|---|
| 1289 | }
|
|---|
| 1290 | },
|
|---|
| 1291 | {
|
|---|
| 1292 | type : 'hbox',
|
|---|
| 1293 | widths : [ '50%', '50%' ],
|
|---|
| 1294 | children :
|
|---|
| 1295 | [
|
|---|
| 1296 | {
|
|---|
| 1297 | type : 'text',
|
|---|
| 1298 | id : 'txtGenClass',
|
|---|
| 1299 | label : editor.lang.common.cssClass,
|
|---|
| 1300 | 'default' : '',
|
|---|
| 1301 | setup : function( type, element )
|
|---|
| 1302 | {
|
|---|
| 1303 | if ( type == IMAGE )
|
|---|
| 1304 | this.setValue( element.getAttribute( 'class' ) );
|
|---|
| 1305 | },
|
|---|
| 1306 | commit : function( type, element )
|
|---|
| 1307 | {
|
|---|
| 1308 | if ( type == IMAGE )
|
|---|
| 1309 | {
|
|---|
| 1310 | if ( this.getValue() || this.isChanged() )
|
|---|
| 1311 | element.setAttribute( 'class', this.getValue() );
|
|---|
| 1312 | }
|
|---|
| 1313 | }
|
|---|
| 1314 | },
|
|---|
| 1315 | {
|
|---|
| 1316 | type : 'text',
|
|---|
| 1317 | id : 'txtGenTitle',
|
|---|
| 1318 | label : editor.lang.common.advisoryTitle,
|
|---|
| 1319 | 'default' : '',
|
|---|
| 1320 | onChange : function()
|
|---|
| 1321 | {
|
|---|
| 1322 | updatePreview( this.getDialog() );
|
|---|
| 1323 | },
|
|---|
| 1324 | setup : function( type, element )
|
|---|
| 1325 | {
|
|---|
| 1326 | if ( type == IMAGE )
|
|---|
| 1327 | this.setValue( element.getAttribute( 'title' ) );
|
|---|
| 1328 | },
|
|---|
| 1329 | commit : function( type, element )
|
|---|
| 1330 | {
|
|---|
| 1331 | if ( type == IMAGE )
|
|---|
| 1332 | {
|
|---|
| 1333 | if ( this.getValue() || this.isChanged() )
|
|---|
| 1334 | element.setAttribute( 'title', this.getValue() );
|
|---|
| 1335 | }
|
|---|
| 1336 | else if ( type == PREVIEW )
|
|---|
| 1337 | {
|
|---|
| 1338 | element.setAttribute( 'title', this.getValue() );
|
|---|
| 1339 | }
|
|---|
| 1340 | else if ( type == CLEANUP )
|
|---|
| 1341 | {
|
|---|
| 1342 | element.removeAttribute( 'title' );
|
|---|
| 1343 | }
|
|---|
| 1344 | }
|
|---|
| 1345 | }
|
|---|
| 1346 | ]
|
|---|
| 1347 | },
|
|---|
| 1348 | {
|
|---|
| 1349 | type : 'text',
|
|---|
| 1350 | id : 'txtdlgGenStyle',
|
|---|
| 1351 | label : editor.lang.common.cssStyle,
|
|---|
| 1352 | validate : CKEDITOR.dialog.validate.inlineStyle( editor.lang.common.invalidInlineStyle ),
|
|---|
| 1353 | 'default' : '',
|
|---|
| 1354 | setup : function( type, element )
|
|---|
| 1355 | {
|
|---|
| 1356 | if ( type == IMAGE )
|
|---|
| 1357 | {
|
|---|
| 1358 | var genStyle = element.getAttribute( 'style' );
|
|---|
| 1359 | if ( !genStyle && element.$.style.cssText )
|
|---|
| 1360 | genStyle = element.$.style.cssText;
|
|---|
| 1361 | this.setValue( genStyle );
|
|---|
| 1362 |
|
|---|
| 1363 | var height = element.$.style.height,
|
|---|
| 1364 | width = element.$.style.width,
|
|---|
| 1365 | aMatchH = ( height ? height : '' ).match( regexGetSize ),
|
|---|
| 1366 | aMatchW = ( width ? width : '').match( regexGetSize );
|
|---|
| 1367 |
|
|---|
| 1368 | this.attributesInStyle =
|
|---|
| 1369 | {
|
|---|
| 1370 | height : !!aMatchH,
|
|---|
| 1371 | width : !!aMatchW
|
|---|
| 1372 | };
|
|---|
| 1373 | }
|
|---|
| 1374 | },
|
|---|
| 1375 | onChange : function ()
|
|---|
| 1376 | {
|
|---|
| 1377 | commitInternally.call( this,
|
|---|
| 1378 | [ 'info:cmbFloat', 'info:cmbAlign',
|
|---|
| 1379 | 'info:txtVSpace', 'info:txtHSpace',
|
|---|
| 1380 | 'info:txtBorder',
|
|---|
| 1381 | 'info:txtWidth', 'info:txtHeight' ] );
|
|---|
| 1382 | updatePreview( this );
|
|---|
| 1383 | },
|
|---|
| 1384 | commit : function( type, element )
|
|---|
| 1385 | {
|
|---|
| 1386 | if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
|
|---|
| 1387 | {
|
|---|
| 1388 | element.setAttribute( 'style', this.getValue() );
|
|---|
| 1389 | }
|
|---|
| 1390 | }
|
|---|
| 1391 | }
|
|---|
| 1392 | ]
|
|---|
| 1393 | }
|
|---|
| 1394 | ]
|
|---|
| 1395 | };
|
|---|
| 1396 | };
|
|---|
| 1397 |
|
|---|
| 1398 | CKEDITOR.dialog.add( 'image', function( editor )
|
|---|
| 1399 | {
|
|---|
| 1400 | return imageDialog( editor, 'image' );
|
|---|
| 1401 | });
|
|---|
| 1402 |
|
|---|
| 1403 | CKEDITOR.dialog.add( 'imagebutton', function( editor )
|
|---|
| 1404 | {
|
|---|
| 1405 | return imageDialog( editor, 'imagebutton' );
|
|---|
| 1406 | });
|
|---|
| 1407 | })();
|
|---|
