2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
8 // Load image preview.
\r
13 regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
\r
14 regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
\r
15 pxLengthRegex = /^\d+px$/;
\r
17 var onSizeChange = function()
\r
19 var value = this.getValue(), // This = input element.
\r
20 dialog = this.getDialog(),
\r
21 aMatch = value.match( regexGetSize ); // Check value
\r
24 if ( aMatch[2] == '%' ) // % is allowed - > unlock ratio.
\r
25 switchLockRatio( dialog, false ); // Unlock.
\r
29 // Only if ratio is locked
\r
30 if ( dialog.lockRatio )
\r
32 var oImageOriginal = dialog.originalElement;
\r
33 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
35 if ( this.id == 'txtHeight' )
\r
37 if ( value && value != '0' )
\r
38 value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
\r
39 if ( !isNaN( value ) )
\r
40 dialog.setValueOf( 'info', 'txtWidth', value );
\r
42 else //this.id = txtWidth.
\r
44 if ( value && value != '0' )
\r
45 value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
\r
46 if ( !isNaN( value ) )
\r
47 dialog.setValueOf( 'info', 'txtHeight', value );
\r
51 updatePreview( dialog );
\r
54 var updatePreview = function( dialog )
\r
56 //Don't load before onShow.
\r
57 if ( !dialog.originalElement || !dialog.preview )
\r
60 // Read attributes and update imagePreview;
\r
61 dialog.commitContent( PREVIEW, dialog.preview );
\r
65 // Custom commit dialog logic, where we're intended to give inline style
\r
66 // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
\r
68 function commitContent()
\r
70 var args = arguments;
\r
71 var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
\r
72 inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
\r
74 this.foreach( function( widget )
\r
76 if ( widget.commit && widget.id != 'txtdlgGenStyle' )
\r
77 widget.commit.apply( widget, args );
\r
81 // Avoid recursions.
\r
84 // Synchronous field values to other impacted fields is required, e.g. border
\r
85 // size change should alter inline-style text as well.
\r
86 function commitInternally( targetFields )
\r
93 var dialog = this.getDialog(),
\r
94 element = dialog.imageElement;
\r
97 // Commit this field and broadcast to target fields.
\r
98 this.commit( IMAGE, element );
\r
100 targetFields = [].concat( targetFields );
\r
101 var length = targetFields.length,
\r
103 for ( var i = 0; i < length; i++ )
\r
105 field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
\r
106 // May cause recursion.
\r
107 field && field.setup( IMAGE, element );
\r
114 var switchLockRatio = function( dialog, value )
\r
116 var oImageOriginal = dialog.originalElement,
\r
117 ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
\r
119 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
121 if ( value == 'check' ) // Check image ratio and original image ratio.
\r
123 var width = dialog.getValueOf( 'info', 'txtWidth' ),
\r
124 height = dialog.getValueOf( 'info', 'txtHeight' ),
\r
125 originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
\r
126 thisRatio = width * 1000 / height;
\r
127 dialog.lockRatio = false; // Default: unlock ratio
\r
129 if ( !width && !height )
\r
130 dialog.lockRatio = true;
\r
131 else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
\r
133 if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
\r
134 dialog.lockRatio = true;
\r
137 else if ( value != undefined )
\r
138 dialog.lockRatio = value;
\r
140 dialog.lockRatio = !dialog.lockRatio;
\r
142 else if ( value != 'check' ) // I can't lock ratio if ratio is unknown.
\r
143 dialog.lockRatio = false;
\r
145 if ( dialog.lockRatio )
\r
146 ratioButton.removeClass( 'cke_btn_unlocked' );
\r
148 ratioButton.addClass( 'cke_btn_unlocked' );
\r
150 return dialog.lockRatio;
\r
153 var resetSize = function( dialog )
\r
155 var oImageOriginal = dialog.originalElement;
\r
156 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
158 dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );
\r
159 dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );
\r
161 updatePreview( dialog );
\r
164 var setupDimension = function( type, element )
\r
166 if ( type != IMAGE )
\r
169 function checkDimension( size, defaultValue )
\r
171 var aMatch = size.match( regexGetSize );
\r
174 if ( aMatch[2] == '%' ) // % is allowed.
\r
177 switchLockRatio( dialog, false ); // Unlock ratio
\r
181 return defaultValue;
\r
184 var dialog = this.getDialog(),
\r
186 dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),
\r
187 size = element.getAttribute( dimension );
\r
190 value = checkDimension( size, value );
\r
191 value = checkDimension( element.getStyle( dimension ), value );
\r
193 this.setValue( value );
\r
196 var imageDialog = function( editor, dialogType )
\r
198 var onImgLoadEvent = function()
\r
201 var original = this.originalElement;
\r
202 original.setCustomData( 'isReady', 'true' );
\r
203 original.removeListener( 'load', onImgLoadEvent );
\r
204 original.removeListener( 'error', onImgLoadErrorEvent );
\r
205 original.removeListener( 'abort', onImgLoadErrorEvent );
\r
208 CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
\r
210 // New image -> new domensions
\r
211 if ( !this.dontResetSize )
\r
214 if ( this.firstLoad )
\r
215 switchLockRatio( this, 'check' );
\r
216 this.firstLoad = false;
\r
217 this.dontResetSize = false;
\r
220 var onImgLoadErrorEvent = function()
\r
222 // Error. Image is not loaded.
\r
223 var original = this.originalElement;
\r
224 original.removeListener( 'load', onImgLoadEvent );
\r
225 original.removeListener( 'error', onImgLoadErrorEvent );
\r
226 original.removeListener( 'abort', onImgLoadErrorEvent );
\r
228 // Set Error image.
\r
229 var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
\r
231 if ( this.preview )
\r
232 this.preview.setAttribute( 'src', noimage );
\r
235 CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
\r
236 switchLockRatio( this, false ); // Unlock.
\r
239 title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton,
\r
242 onShow : function()
\r
244 this.imageElement = false;
\r
245 this.linkElement = false;
\r
247 // Default: create a new element.
\r
248 this.imageEditMode = false;
\r
249 this.linkEditMode = false;
\r
251 this.lockRatio = true;
\r
252 this.dontResetSize = false;
\r
253 this.firstLoad = true;
\r
254 this.addLink = false;
\r
257 CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
\r
259 this.preview = CKEDITOR.document.getById( 'previewImage' );
\r
261 var editor = this.getParentEditor(),
\r
262 sel = this.getParentEditor().getSelection(),
\r
263 element = sel.getSelectedElement(),
\r
264 link = element && element.getAscendant( 'a' );
\r
266 // Copy of the image
\r
267 this.originalElement = editor.document.createElement( 'img' );
\r
268 this.originalElement.setAttribute( 'alt', '' );
\r
269 this.originalElement.setCustomData( 'isReady', 'false' );
\r
273 this.linkElement = link;
\r
274 this.linkEditMode = true;
\r
276 // Look for Image element.
\r
277 var linkChildren = link.getChildren();
\r
278 if ( linkChildren.count() == 1 ) // 1 child.
\r
280 var childTagName = linkChildren.getItem( 0 ).getName();
\r
281 if ( childTagName == 'img' || childTagName == 'input' )
\r
283 this.imageElement = linkChildren.getItem( 0 );
\r
284 if ( this.imageElement.getName() == 'img' )
\r
285 this.imageEditMode = 'img';
\r
286 else if ( this.imageElement.getName() == 'input' )
\r
287 this.imageEditMode = 'input';
\r
290 // Fill out all fields.
\r
291 if ( dialogType == 'image' )
\r
292 this.setupContent( LINK, link );
\r
295 if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' )
\r
296 || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' )
\r
298 this.imageEditMode = element.getName();
\r
299 this.imageElement = element;
\r
302 if ( this.imageEditMode )
\r
304 // Use the original element as a buffer from since we don't want
\r
305 // temporary changes to be committed, e.g. if the dialog is canceled.
\r
306 this.cleanImageElement = this.imageElement;
\r
307 this.imageElement = this.cleanImageElement.clone( true, true );
\r
309 // Fill out all fields.
\r
310 this.setupContent( IMAGE, this.imageElement );
\r
312 // Refresh LockRatio button
\r
313 switchLockRatio ( this, true );
\r
316 this.imageElement = editor.document.createElement( 'img' );
\r
318 // Dont show preview if no URL given.
\r
319 if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )
\r
321 this.preview.removeAttribute( 'src' );
\r
322 this.preview.setStyle( 'display', 'none' );
\r
327 // Edit existing Image.
\r
328 if ( this.imageEditMode )
\r
330 var imgTagName = this.imageEditMode;
\r
332 // Image dialog and Input element.
\r
333 if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
\r
335 // Replace INPUT-> IMG
\r
336 imgTagName = 'img';
\r
337 this.imageElement = editor.document.createElement( 'img' );
\r
338 this.imageElement.setAttribute( 'alt', '' );
\r
339 editor.insertElement( this.imageElement );
\r
341 // ImageButton dialog and Image element.
\r
342 else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
\r
344 // Replace IMG -> INPUT
\r
345 imgTagName = 'input';
\r
346 this.imageElement = editor.document.createElement( 'input' );
\r
347 this.imageElement.setAttributes(
\r
353 editor.insertElement( this.imageElement );
\r
357 // Restore the original element before all commits.
\r
358 this.imageElement = this.cleanImageElement;
\r
359 delete this.cleanImageElement;
\r
362 else // Create a new image.
\r
364 // Image dialog -> create IMG element.
\r
365 if ( dialogType == 'image' )
\r
366 this.imageElement = editor.document.createElement( 'img' );
\r
369 this.imageElement = editor.document.createElement( 'input' );
\r
370 this.imageElement.setAttribute ( 'type' ,'image' );
\r
372 this.imageElement.setAttribute( 'alt', '' );
\r
375 // Create a new link.
\r
376 if ( !this.linkEditMode )
\r
377 this.linkElement = editor.document.createElement( 'a' );
\r
380 this.commitContent( IMAGE, this.imageElement );
\r
381 this.commitContent( LINK, this.linkElement );
\r
383 // Remove empty style attribute.
\r
384 if( !this.imageElement.getAttribute( 'style' ) )
\r
385 this.imageElement.removeAttribute( 'style' );
\r
387 // Insert a new Image.
\r
388 if ( !this.imageEditMode )
\r
390 if ( this.addLink )
\r
392 //Insert a new Link.
\r
393 if ( !this.linkEditMode )
\r
395 editor.insertElement(this.linkElement);
\r
396 this.linkElement.append(this.imageElement, false);
\r
398 else //Link already exists, image not.
\r
399 editor.insertElement(this.imageElement );
\r
402 editor.insertElement( this.imageElement );
\r
404 else // Image already exists.
\r
406 //Add a new link element.
\r
407 if ( !this.linkEditMode && this.addLink )
\r
409 editor.insertElement( this.linkElement );
\r
410 this.imageElement.appendTo( this.linkElement );
\r
412 //Remove Link, Image exists.
\r
413 else if ( this.linkEditMode && !this.addLink )
\r
415 editor.getSelection().selectElement( this.linkElement );
\r
416 editor.insertElement( this.imageElement );
\r
420 onLoad : function()
\r
422 if ( dialogType != 'image' )
\r
423 this.hidePage( 'Link' ); //Hide Link tab.
\r
424 var doc = this._.element.getDocument();
\r
425 this.addFocusable( doc.getById( 'btnResetSize' ), 5 );
\r
426 this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );
\r
428 this.commitContent = commitContent;
\r
430 onHide : function()
\r
432 if ( this.preview )
\r
433 this.commitContent( CLEANUP, this.preview );
\r
435 if ( this.originalElement )
\r
437 this.originalElement.removeListener( 'load', onImgLoadEvent );
\r
438 this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
\r
439 this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
\r
440 this.originalElement.remove();
\r
441 this.originalElement = false; // Dialog is closed.
\r
444 delete this.imageElement;
\r
449 label : editor.lang.image.infoTab,
\r
460 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '</span>'
\r
464 widths : [ '280px', '110px' ],
\r
472 onChange : function()
\r
474 var dialog = this.getDialog(),
\r
475 newUrl = this.getValue();
\r
477 //Update original image
\r
478 if ( newUrl.length > 0 ) //Prevent from load before onShow
\r
480 dialog = this.getDialog();
\r
481 var original = dialog.originalElement;
\r
483 dialog.preview.removeStyle( 'display' );
\r
485 original.setCustomData( 'isReady', 'false' );
\r
487 var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );
\r
489 loader.setStyle( 'display', '' );
\r
491 original.on( 'load', onImgLoadEvent, dialog );
\r
492 original.on( 'error', onImgLoadErrorEvent, dialog );
\r
493 original.on( 'abort', onImgLoadErrorEvent, dialog );
\r
494 original.setAttribute( 'src', newUrl );
\r
495 dialog.preview.setAttribute( 'src', newUrl );
\r
497 updatePreview( dialog );
\r
499 // Dont show preview if no URL given.
\r
500 else if ( dialog.preview )
\r
502 dialog.preview.removeAttribute( 'src' );
\r
503 dialog.preview.setStyle( 'display', 'none' );
\r
506 setup : function( type, element )
\r
508 if ( type == IMAGE )
\r
510 var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' );
\r
513 this.getDialog().dontResetSize = true;
\r
515 field.setValue( url ); // And call this.onChange()
\r
516 // Manually set the initial value.(#4191)
\r
517 field.setInitValue();
\r
521 commit : function( type, element )
\r
523 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
\r
525 element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );
\r
526 element.setAttribute( 'src', decodeURI( this.getValue() ) );
\r
528 else if ( type == CLEANUP )
\r
530 element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
\r
531 element.removeAttribute( 'src' );
\r
534 validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
\r
540 label : editor.lang.common.browseServer,
\r
542 filebrowser : 'info:txtUrl'
\r
551 label : editor.lang.image.alt,
\r
554 onChange : function()
\r
556 updatePreview( this.getDialog() );
\r
558 setup : function( type, element )
\r
560 if ( type == IMAGE )
\r
561 this.setValue( element.getAttribute( 'alt' ) );
\r
563 commit : function( type, element )
\r
565 if ( type == IMAGE )
\r
567 if ( this.getValue() || this.isChanged() )
\r
568 element.setAttribute( 'alt', this.getValue() );
\r
570 else if ( type == PREVIEW )
\r
572 element.setAttribute( 'alt', this.getValue() );
\r
574 else if ( type == CLEANUP )
\r
576 element.removeAttribute( 'alt' );
\r
582 widths : [ '140px', '240px' ],
\r
592 widths : [ '70%', '30%' ],
\r
604 labelLayout : 'horizontal',
\r
605 label : editor.lang.image.width,
\r
606 onKeyUp : onSizeChange,
\r
607 onChange : function()
\r
609 commitInternally.call( this, 'advanced:txtdlgGenStyle' );
\r
611 validate: function()
\r
613 var aMatch = this.getValue().match( regexGetSizeOrEmpty );
\r
615 alert( editor.lang.common.validateNumberFailed );
\r
618 setup : setupDimension,
\r
619 commit : function( type, element, internalCommit )
\r
621 var value = this.getValue();
\r
622 if ( type == IMAGE )
\r
625 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
\r
626 else if ( !value && this.isChanged( ) )
\r
627 element.removeStyle( 'width' );
\r
629 !internalCommit && element.removeAttribute( 'width' );
\r
631 else if ( type == PREVIEW )
\r
633 var aMatch = value.match( regexGetSize );
\r
636 var oImageOriginal = this.getDialog().originalElement;
\r
637 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
638 element.setStyle( 'width', oImageOriginal.$.width + 'px');
\r
641 element.setStyle( 'width', value + 'px');
\r
643 else if ( type == CLEANUP )
\r
645 element.removeAttribute( 'width' );
\r
646 element.removeStyle( 'width' );
\r
654 labelLayout : 'horizontal',
\r
655 label : editor.lang.image.height,
\r
656 onKeyUp : onSizeChange,
\r
657 onChange : function()
\r
659 commitInternally.call( this, 'advanced:txtdlgGenStyle' );
\r
661 validate: function()
\r
663 var aMatch = this.getValue().match( regexGetSizeOrEmpty );
\r
665 alert( editor.lang.common.validateNumberFailed );
\r
668 setup : setupDimension,
\r
669 commit : function( type, element, internalCommit )
\r
671 var value = this.getValue();
\r
672 if ( type == IMAGE )
\r
675 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
\r
676 else if ( !value && this.isChanged( ) )
\r
677 element.removeStyle( 'height' );
\r
679 if( !internalCommit && type == IMAGE )
\r
680 element.removeAttribute( 'height' );
\r
682 else if ( type == PREVIEW )
\r
684 var aMatch = value.match( regexGetSize );
\r
687 var oImageOriginal = this.getDialog().originalElement;
\r
688 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
689 element.setStyle( 'height', oImageOriginal.$.height + 'px' );
\r
692 element.setStyle( 'height', value + 'px' );
\r
694 else if ( type == CLEANUP )
\r
696 element.removeAttribute( 'height' );
\r
697 element.removeStyle( 'height' );
\r
705 style : 'margin-top:10px;width:40px;height:40px;',
\r
706 onLoad : function()
\r
708 // Activate Reset button
\r
709 var resetButton = CKEDITOR.document.getById( 'btnResetSize' ),
\r
710 ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
\r
713 resetButton.on( 'click', function()
\r
716 }, this.getDialog() );
\r
717 resetButton.on( 'mouseover', function()
\r
719 this.addClass( 'cke_btn_over' );
\r
721 resetButton.on( 'mouseout', function()
\r
723 this.removeClass( 'cke_btn_over' );
\r
726 // Activate (Un)LockRatio button
\r
729 ratioButton.on( 'click', function()
\r
731 var locked = switchLockRatio( this ),
\r
732 oImageOriginal = this.originalElement,
\r
733 width = this.getValueOf( 'info', 'txtWidth' );
\r
735 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
\r
737 var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
\r
738 if ( !isNaN( height ) )
\r
740 this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
\r
741 updatePreview( this );
\r
744 }, this.getDialog() );
\r
745 ratioButton.on( 'mouseover', function()
\r
747 this.addClass( 'cke_btn_over' );
\r
749 ratioButton.on( 'mouseout', function()
\r
751 this.removeClass( 'cke_btn_over' );
\r
756 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
\r
757 '" class="cke_btn_locked" id="btnLockSizes"></a>' +
\r
758 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
\r
759 '" class="cke_btn_reset" id="btnResetSize"></a>'+
\r
773 labelLayout : 'horizontal',
\r
774 label : editor.lang.image.border,
\r
776 onKeyUp : function()
\r
778 updatePreview( this.getDialog() );
\r
780 onChange : function()
\r
782 commitInternally.call( this, 'advanced:txtdlgGenStyle' );
\r
784 validate: function()
\r
786 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
787 return func.apply( this );
\r
789 setup : function( type, element )
\r
791 if ( type == IMAGE )
\r
794 borderStyle = element.getStyle( 'border-width' );
\r
796 borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
\r
797 value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
\r
798 !value && ( value = element.getAttribute( 'border' ) );
\r
800 this.setValue( value );
\r
803 commit : function( type, element, internalCommit )
\r
805 var value = parseInt( this.getValue(), 10 );
\r
806 if ( type == IMAGE || type == PREVIEW )
\r
810 element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
\r
811 element.setStyle( 'border-style', 'solid' );
\r
813 else if ( !value && this.isChanged() )
\r
815 element.removeStyle( 'border-width' );
\r
816 element.removeStyle( 'border-style' );
\r
817 element.removeStyle( 'border-color' );
\r
820 if( !internalCommit && type == IMAGE )
\r
821 element.removeAttribute( 'border' );
\r
823 else if ( type == CLEANUP )
\r
825 element.removeAttribute( 'border' );
\r
826 element.removeStyle( 'border-width' );
\r
827 element.removeStyle( 'border-style' );
\r
828 element.removeStyle( 'border-color' );
\r
836 labelLayout : 'horizontal',
\r
837 label : editor.lang.image.hSpace,
\r
839 onKeyUp : function()
\r
841 updatePreview( this.getDialog() );
\r
843 onChange : function()
\r
845 commitInternally.call( this, 'advanced:txtdlgGenStyle' );
\r
847 validate: function()
\r
849 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
850 return func.apply( this );
\r
852 setup : function( type, element )
\r
854 if ( type == IMAGE )
\r
859 marginLeftStyle = element.getStyle( 'margin-left' ),
\r
860 marginRightStyle = element.getStyle( 'margin-right' );
\r
862 marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
\r
863 marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
\r
864 marginLeftPx = parseInt( marginLeftStyle, 10 );
\r
865 marginRightPx = parseInt( marginRightStyle, 10 );
\r
867 value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
\r
868 !value && ( value = element.getAttribute( 'hspace' ) );
\r
870 this.setValue( value );
\r
873 commit : function( type, element, internalCommit )
\r
875 var value = parseInt( this.getValue(), 10 );
\r
876 if ( type == IMAGE || type == PREVIEW )
\r
880 element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
\r
881 element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
\r
883 else if ( !value && this.isChanged( ) )
\r
885 element.removeStyle( 'margin-left' );
\r
886 element.removeStyle( 'margin-right' );
\r
889 if( !internalCommit && type == IMAGE )
\r
890 element.removeAttribute( 'hspace' );
\r
892 else if ( type == CLEANUP )
\r
894 element.removeAttribute( 'hspace' );
\r
895 element.removeStyle( 'margin-left' );
\r
896 element.removeStyle( 'margin-right' );
\r
904 labelLayout : 'horizontal',
\r
905 label : editor.lang.image.vSpace,
\r
907 onKeyUp : function()
\r
909 updatePreview( this.getDialog() );
\r
911 onChange : function()
\r
913 commitInternally.call( this, 'advanced:txtdlgGenStyle' );
\r
915 validate: function()
\r
917 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
918 return func.apply( this );
\r
920 setup : function( type, element )
\r
922 if ( type == IMAGE )
\r
927 marginTopStyle = element.getStyle( 'margin-top' ),
\r
928 marginBottomStyle = element.getStyle( 'margin-bottom' );
\r
930 marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
\r
931 marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
\r
932 marginTopPx = parseInt( marginTopStyle, 10 );
\r
933 marginBottomPx = parseInt( marginBottomStyle, 10 );
\r
935 value = ( marginTopPx == marginBottomPx ) && marginTopPx;
\r
936 !value && ( value = element.getAttribute( 'vspace' ) );
\r
937 this.setValue( value );
\r
940 commit : function( type, element, internalCommit )
\r
942 var value = parseInt( this.getValue(), 10 );
\r
943 if ( type == IMAGE || type == PREVIEW )
\r
947 element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );
\r
948 element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );
\r
950 else if ( !value && this.isChanged( ) )
\r
952 element.removeStyle( 'margin-top' );
\r
953 element.removeStyle( 'margin-bottom' );
\r
956 if( !internalCommit && type == IMAGE )
\r
957 element.removeAttribute( 'vspace' );
\r
959 else if ( type == CLEANUP )
\r
961 element.removeAttribute( 'vspace' );
\r
962 element.removeStyle( 'margin-top' );
\r
963 element.removeStyle( 'margin-bottom' );
\r
970 labelLayout : 'horizontal',
\r
971 widths : [ '35%','65%' ],
\r
972 style : 'width:90px',
\r
973 label : editor.lang.image.align,
\r
977 [ editor.lang.common.notSet , ''],
\r
978 [ editor.lang.image.alignLeft , 'left'],
\r
979 [ editor.lang.image.alignRight , 'right']
\r
980 // Backward compatible with v2 on setup when specified as attribute value,
\r
981 // while these values are no more available as select options.
\r
982 // [ editor.lang.image.alignAbsBottom , 'absBottom'],
\r
983 // [ editor.lang.image.alignAbsMiddle , 'absMiddle'],
\r
984 // [ editor.lang.image.alignBaseline , 'baseline'],
\r
985 // [ editor.lang.image.alignTextTop , 'text-top'],
\r
986 // [ editor.lang.image.alignBottom , 'bottom'],
\r
987 // [ editor.lang.image.alignMiddle , 'middle'],
\r
988 // [ editor.lang.image.alignTop , 'top']
\r
990 onChange : function()
\r
992 updatePreview( this.getDialog() );
\r
993 commitInternally.call( this, 'advanced:txtdlgGenStyle' );
\r
995 setup : function( type, element )
\r
997 if ( type == IMAGE )
\r
999 var value = element.getStyle( 'float' );
\r
1002 // Ignore those unrelated values.
\r
1008 !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );
\r
1009 this.setValue( value );
\r
1012 commit : function( type, element, internalCommit )
\r
1014 var value = this.getValue();
\r
1015 if ( type == IMAGE || type == PREVIEW )
\r
1018 element.setStyle( 'float', value );
\r
1019 else if ( !value && this.isChanged( ) )
\r
1020 element.removeStyle( 'float' );
\r
1022 if( !internalCommit && type == IMAGE )
\r
1024 value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();
\r
1027 // we should remove it only if it matches "left" or "right",
\r
1028 // otherwise leave it intact.
\r
1031 element.removeAttribute( 'align' );
\r
1035 else if ( type == CLEANUP )
\r
1036 element.removeStyle( 'float' );
\r
1051 style : 'width:95%;',
\r
1052 html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+
\r
1053 '<div id="ImagePreviewLoader" style="display:none"><div class="loading"> </div></div>'+
\r
1054 '<div id="ImagePreviewBox">'+
\r
1055 '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+
\r
1056 '<img id="previewImage" src="" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
\r
1057 'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
\r
1058 '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.' +
\r
1069 label : editor.lang.link.title,
\r
1076 label : editor.lang.image.url,
\r
1077 style : 'width: 100%',
\r
1079 setup : function( type, element )
\r
1081 if ( type == LINK )
\r
1083 var href = element.getAttribute( '_cke_saved_href' );
\r
1085 href = element.getAttribute( 'href' );
\r
1086 this.setValue( href );
\r
1089 commit : function( type, element )
\r
1091 if ( type == LINK )
\r
1093 if ( this.getValue() || this.isChanged() )
\r
1095 element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );
\r
1096 element.setAttribute( 'href', 'javascript:void(0)/*' +
\r
1097 CKEDITOR.tools.getNextNumber() + '*/' );
\r
1099 if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
\r
1100 this.getDialog().addLink = true;
\r
1108 filebrowser : 'Link:txtUrl',
\r
1109 style : 'float:right',
\r
1111 label : editor.lang.common.browseServer
\r
1116 label : editor.lang.link.target,
\r
1120 [ editor.lang.link.targetNotSet , ''],
\r
1121 [ editor.lang.link.targetNew , '_blank'],
\r
1122 [ editor.lang.link.targetTop , '_top'],
\r
1123 [ editor.lang.link.targetSelf , '_self'],
\r
1124 [ editor.lang.link.targetParent , '_parent']
\r
1126 setup : function( type, element )
\r
1128 if ( type == LINK )
\r
1129 this.setValue( element.getAttribute( 'target' ) );
\r
1131 commit : function( type, element )
\r
1133 if ( type == LINK )
\r
1135 if ( this.getValue() || this.isChanged() )
\r
1136 element.setAttribute( 'target', this.getValue() );
\r
1145 filebrowser : 'uploadButton',
\r
1146 label : editor.lang.image.upload,
\r
1152 label : editor.lang.image.btnUpload,
\r
1153 style: 'height:40px',
\r
1157 type : 'fileButton',
\r
1158 id : 'uploadButton',
\r
1159 filebrowser : 'info:txtUrl',
\r
1160 label : editor.lang.image.btnUpload,
\r
1161 'for' : [ 'Upload', 'upload' ]
\r
1167 label : editor.lang.common.advancedTab,
\r
1172 widths : [ '50%', '25%', '25%' ],
\r
1178 label : editor.lang.common.id,
\r
1179 setup : function( type, element )
\r
1181 if ( type == IMAGE )
\r
1182 this.setValue( element.getAttribute( 'id' ) );
\r
1184 commit : function( type, element )
\r
1186 if ( type == IMAGE )
\r
1188 if ( this.getValue() || this.isChanged() )
\r
1189 element.setAttribute( 'id', this.getValue() );
\r
1194 id : 'cmbLangDir',
\r
1196 style : 'width : 100px;',
\r
1197 label : editor.lang.common.langDir,
\r
1201 [ editor.lang.common.notSet, '' ],
\r
1202 [ editor.lang.common.langDirLtr, 'ltr' ],
\r
1203 [ editor.lang.common.langDirRtl, 'rtl' ]
\r
1205 setup : function( type, element )
\r
1207 if ( type == IMAGE )
\r
1208 this.setValue( element.getAttribute( 'dir' ) );
\r
1210 commit : function( type, element )
\r
1212 if ( type == IMAGE )
\r
1214 if ( this.getValue() || this.isChanged() )
\r
1215 element.setAttribute( 'dir', this.getValue() );
\r
1221 id : 'txtLangCode',
\r
1222 label : editor.lang.common.langCode,
\r
1224 setup : function( type, element )
\r
1226 if ( type == IMAGE )
\r
1227 this.setValue( element.getAttribute( 'lang' ) );
\r
1229 commit : function( type, element )
\r
1231 if ( type == IMAGE )
\r
1233 if ( this.getValue() || this.isChanged() )
\r
1234 element.setAttribute( 'lang', this.getValue() );
\r
1242 id : 'txtGenLongDescr',
\r
1243 label : editor.lang.common.longDescr,
\r
1244 setup : function( type, element )
\r
1246 if ( type == IMAGE )
\r
1247 this.setValue( element.getAttribute( 'longDesc' ) );
\r
1249 commit : function( type, element )
\r
1251 if ( type == IMAGE )
\r
1253 if ( this.getValue() || this.isChanged() )
\r
1254 element.setAttribute( 'longDesc', this.getValue() );
\r
1260 widths : [ '50%', '50%' ],
\r
1265 id : 'txtGenClass',
\r
1266 label : editor.lang.common.cssClass,
\r
1268 setup : function( type, element )
\r
1270 if ( type == IMAGE )
\r
1271 this.setValue( element.getAttribute( 'class' ) );
\r
1273 commit : function( type, element )
\r
1275 if ( type == IMAGE )
\r
1277 if ( this.getValue() || this.isChanged() )
\r
1278 element.setAttribute( 'class', this.getValue() );
\r
1284 id : 'txtGenTitle',
\r
1285 label : editor.lang.common.advisoryTitle,
\r
1287 onChange : function()
\r
1289 updatePreview( this.getDialog() );
\r
1291 setup : function( type, element )
\r
1293 if ( type == IMAGE )
\r
1294 this.setValue( element.getAttribute( 'title' ) );
\r
1296 commit : function( type, element )
\r
1298 if ( type == IMAGE )
\r
1300 if ( this.getValue() || this.isChanged() )
\r
1301 element.setAttribute( 'title', this.getValue() );
\r
1303 else if ( type == PREVIEW )
\r
1305 element.setAttribute( 'title', this.getValue() );
\r
1307 else if ( type == CLEANUP )
\r
1309 element.removeAttribute( 'title' );
\r
1317 id : 'txtdlgGenStyle',
\r
1318 label : editor.lang.common.cssStyle,
\r
1320 setup : function( type, element )
\r
1322 if ( type == IMAGE )
\r
1324 var genStyle = element.getAttribute( 'style' );
\r
1325 if ( !genStyle && element.$.style.cssText )
\r
1326 genStyle = element.$.style.cssText;
\r
1327 this.setValue( genStyle );
\r
1329 var height = element.$.style.height,
\r
1330 width = element.$.style.width,
\r
1331 aMatchH = ( height ? height : '' ).match( regexGetSize ),
\r
1332 aMatchW = ( width ? width : '').match( regexGetSize );
\r
1334 this.attributesInStyle =
\r
1336 height : !!aMatchH,
\r
1341 onChange : function ()
\r
1343 commitInternally.call( this,
\r
1344 [ 'info:cmbFloat', 'info:cmbAlign',
\r
1345 'info:txtVSpace', 'info:txtHSpace',
\r
1347 'info:txtWidth', 'info:txtHeight' ] );
\r
1348 updatePreview( this );
\r
1350 commit : function( type, element )
\r
1352 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
\r
1354 element.setAttribute( 'style', this.getValue() );
\r
1364 CKEDITOR.dialog.add( 'image', function( editor )
\r
1366 return imageDialog( editor, 'image' );
\r
1369 CKEDITOR.dialog.add( 'imagebutton', function( editor )
\r
1371 return imageDialog( editor, 'imagebutton' );
\r