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
16 var onSizeChange = function()
\r
18 var value = this.getValue(), // This = input element.
\r
19 dialog = this.getDialog(),
\r
20 aMatch = value.match( regexGetSize ); // Check value
\r
23 if ( aMatch[2] == '%' ) // % is allowed - > unlock ratio.
\r
24 switchLockRatio( dialog, false ); // Unlock.
\r
28 // Only if ratio is locked
\r
29 if ( dialog.lockRatio )
\r
31 var oImageOriginal = dialog.originalElement;
\r
32 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
34 if ( this.id == 'txtHeight' )
\r
36 if ( value && value != '0' )
\r
37 value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
\r
38 if ( !isNaN( value ) )
\r
39 dialog.setValueOf( 'info', 'txtWidth', value );
\r
41 else //this.id = txtWidth.
\r
43 if ( value && value != '0' )
\r
44 value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
\r
45 if ( !isNaN( value ) )
\r
46 dialog.setValueOf( 'info', 'txtHeight', value );
\r
50 updatePreview( dialog );
\r
53 var updatePreview = function( dialog )
\r
55 //Don't load before onShow.
\r
56 if ( !dialog.originalElement || !dialog.preview )
\r
59 // Read attributes and update imagePreview;
\r
60 dialog.commitContent( PREVIEW, dialog.preview );
\r
64 var switchLockRatio = function( dialog, value )
\r
66 var oImageOriginal = dialog.originalElement,
\r
67 ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
\r
69 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
71 if ( value == 'check' ) // Check image ratio and original image ratio.
\r
73 var width = dialog.getValueOf( 'info', 'txtWidth' ),
\r
74 height = dialog.getValueOf( 'info', 'txtHeight' ),
\r
75 originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
\r
76 thisRatio = width * 1000 / height;
\r
77 dialog.lockRatio = false; // Default: unlock ratio
\r
79 if ( !width && !height )
\r
80 dialog.lockRatio = true;
\r
81 else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
\r
83 if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
\r
84 dialog.lockRatio = true;
\r
87 else if ( value != undefined )
\r
88 dialog.lockRatio = value;
\r
90 dialog.lockRatio = !dialog.lockRatio;
\r
92 else if ( value != 'check' ) // I can't lock ratio if ratio is unknown.
\r
93 dialog.lockRatio = false;
\r
95 if ( dialog.lockRatio )
\r
96 ratioButton.removeClass( 'cke_btn_unlocked' );
\r
98 ratioButton.addClass( 'cke_btn_unlocked' );
\r
100 return dialog.lockRatio;
\r
103 var resetSize = function( dialog )
\r
105 var oImageOriginal = dialog.originalElement;
\r
106 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
108 dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );
\r
109 dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );
\r
111 updatePreview( dialog );
\r
114 var setupDimension = function( type, element )
\r
116 if ( type != IMAGE )
\r
119 function checkDimension( size, defaultValue )
\r
121 var aMatch = size.match( regexGetSize );
\r
124 if ( aMatch[2] == '%' ) // % is allowed.
\r
127 switchLockRatio( dialog, false ); // Unlock ratio
\r
131 return defaultValue;
\r
134 var dialog = this.getDialog(),
\r
136 dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),
\r
137 size = element.getAttribute( dimension );
\r
140 value = checkDimension( size, value );
\r
141 value = checkDimension( element.$.style[ dimension ], value );
\r
143 this.setValue( value );
\r
146 var imageDialog = function( editor, dialogType )
\r
148 var onImgLoadEvent = function()
\r
151 var original = this.originalElement;
\r
152 original.setCustomData( 'isReady', 'true' );
\r
153 original.removeListener( 'load', onImgLoadEvent );
\r
154 original.removeListener( 'error', onImgLoadErrorEvent );
\r
155 original.removeListener( 'abort', onImgLoadErrorEvent );
\r
158 CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
\r
160 // New image -> new domensions
\r
161 if ( !this.dontResetSize )
\r
164 if ( this.firstLoad )
\r
165 switchLockRatio( this, 'check' );
\r
166 this.firstLoad = false;
\r
167 this.dontResetSize = false;
\r
170 var onImgLoadErrorEvent = function()
\r
172 // Error. Image is not loaded.
\r
173 var original = this.originalElement;
\r
174 original.removeListener( 'load', onImgLoadEvent );
\r
175 original.removeListener( 'error', onImgLoadErrorEvent );
\r
176 original.removeListener( 'abort', onImgLoadErrorEvent );
\r
178 // Set Error image.
\r
179 var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
\r
181 if ( this.preview )
\r
182 this.preview.setAttribute( 'src', noimage );
\r
185 CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
\r
186 switchLockRatio( this, false ); // Unlock.
\r
189 title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton,
\r
192 onShow : function()
\r
194 this.imageElement = false;
\r
195 this.linkElement = false;
\r
197 // Default: create a new element.
\r
198 this.imageEditMode = false;
\r
199 this.linkEditMode = false;
\r
201 this.lockRatio = true;
\r
202 this.dontResetSize = false;
\r
203 this.firstLoad = true;
\r
204 this.addLink = false;
\r
207 CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
\r
209 this.preview = CKEDITOR.document.getById( 'previewImage' );
\r
211 var editor = this.getParentEditor(),
\r
212 sel = this.getParentEditor().getSelection(),
\r
213 element = sel.getSelectedElement(),
\r
214 link = element && element.getAscendant( 'a' );
\r
216 // Copy of the image
\r
217 this.originalElement = editor.document.createElement( 'img' );
\r
218 this.originalElement.setAttribute( 'alt', '' );
\r
219 this.originalElement.setCustomData( 'isReady', 'false' );
\r
223 this.linkElement = link;
\r
224 this.linkEditMode = true;
\r
226 // Look for Image element.
\r
227 var linkChildren = link.getChildren();
\r
228 if ( linkChildren.count() == 1 ) // 1 child.
\r
230 var childTagName = linkChildren.getItem( 0 ).getName();
\r
231 if ( childTagName == 'img' || childTagName == 'input' )
\r
233 this.imageElement = linkChildren.getItem( 0 );
\r
234 if ( this.imageElement.getName() == 'img' )
\r
235 this.imageEditMode = 'img';
\r
236 else if ( this.imageElement.getName() == 'input' )
\r
237 this.imageEditMode = 'input';
\r
240 // Fill out all fields.
\r
241 if ( dialogType == 'image' )
\r
242 this.setupContent( LINK, link );
\r
245 if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_protected_html' ) )
\r
246 this.imageEditMode = 'img';
\r
247 else if ( element && element.getName() == 'input' && element.getAttribute( 'type' ) && element.getAttribute( 'type' ) == 'image' )
\r
248 this.imageEditMode = 'input';
\r
250 if ( this.imageEditMode || this.imageElement )
\r
252 if ( !this.imageElement )
\r
253 this.imageElement = element;
\r
255 // Fill out all fields.
\r
256 this.setupContent( IMAGE, this.imageElement );
\r
258 // Refresh LockRatio button
\r
259 switchLockRatio ( this, true );
\r
262 // Dont show preview if no URL given.
\r
263 if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )
\r
265 this.preview.removeAttribute( 'src' );
\r
266 this.preview.setStyle( 'display', 'none' );
\r
271 // Edit existing Image.
\r
272 if ( this.imageEditMode )
\r
274 var imgTagName = this.imageEditMode;
\r
276 // Image dialog and Input element.
\r
277 if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
\r
279 // Replace INPUT-> IMG
\r
280 imgTagName = 'img';
\r
281 this.imageElement = editor.document.createElement( 'img' );
\r
282 this.imageElement.setAttribute( 'alt', '' );
\r
283 editor.insertElement( this.imageElement );
\r
285 // ImageButton dialog and Image element.
\r
286 else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
\r
288 // Replace IMG -> INPUT
\r
289 imgTagName = 'input';
\r
290 this.imageElement = editor.document.createElement( 'input' );
\r
291 this.imageElement.setAttributes(
\r
297 editor.insertElement( this.imageElement );
\r
300 else // Create a new image.
\r
302 // Image dialog -> create IMG element.
\r
303 if ( dialogType == 'image' )
\r
304 this.imageElement = editor.document.createElement( 'img' );
\r
307 this.imageElement = editor.document.createElement( 'input' );
\r
308 this.imageElement.setAttribute ( 'type' ,'image' );
\r
310 this.imageElement.setAttribute( 'alt', '' );
\r
313 // Create a new link.
\r
314 if ( !this.linkEditMode )
\r
315 this.linkElement = editor.document.createElement( 'a' );
\r
318 this.commitContent( IMAGE, this.imageElement );
\r
319 this.commitContent( LINK, this.linkElement );
\r
321 // Insert a new Image.
\r
322 if ( !this.imageEditMode )
\r
324 if ( this.addLink )
\r
326 //Insert a new Link.
\r
327 if ( !this.linkEditMode )
\r
329 editor.insertElement(this.linkElement);
\r
330 this.linkElement.append(this.imageElement, false);
\r
332 else //Link already exists, image not.
\r
333 editor.insertElement(this.imageElement );
\r
336 editor.insertElement( this.imageElement );
\r
338 else // Image already exists.
\r
340 //Add a new link element.
\r
341 if ( !this.linkEditMode && this.addLink )
\r
343 editor.insertElement( this.linkElement );
\r
344 this.imageElement.appendTo( this.linkElement );
\r
346 //Remove Link, Image exists.
\r
347 else if ( this.linkEditMode && !this.addLink )
\r
349 editor.getSelection().selectElement( this.linkElement );
\r
350 editor.insertElement( this.imageElement );
\r
354 onLoad : function()
\r
356 if ( dialogType != 'image' )
\r
357 this.hidePage( 'Link' ); //Hide Link tab.
\r
358 var doc = this._.element.getDocument();
\r
359 this.addFocusable( doc.getById( 'btnResetSize' ), 5 );
\r
360 this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );
\r
362 onHide : function()
\r
364 if ( this.preview )
\r
365 this.commitContent( CLEANUP, this.preview );
\r
367 if ( this.originalElement )
\r
369 this.originalElement.removeListener( 'load', onImgLoadEvent );
\r
370 this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
\r
371 this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
\r
372 this.originalElement.remove();
\r
373 this.originalElement = false; // Dialog is closed.
\r
379 label : editor.lang.image.infoTab,
\r
390 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '</span>'
\r
394 widths : [ '280px', '110px' ],
\r
402 onChange : function()
\r
404 var dialog = this.getDialog(),
\r
405 newUrl = this.getValue();
\r
407 //Update original image
\r
408 if ( newUrl.length > 0 ) //Prevent from load before onShow
\r
410 dialog = this.getDialog();
\r
411 var original = dialog.originalElement;
\r
413 dialog.preview.removeStyle( 'display' );
\r
415 original.setCustomData( 'isReady', 'false' );
\r
417 var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );
\r
419 loader.setStyle( 'display', '' );
\r
421 original.on( 'load', onImgLoadEvent, dialog );
\r
422 original.on( 'error', onImgLoadErrorEvent, dialog );
\r
423 original.on( 'abort', onImgLoadErrorEvent, dialog );
\r
424 original.setAttribute( 'src', newUrl );
\r
425 dialog.preview.setAttribute( 'src', newUrl );
\r
427 updatePreview( dialog );
\r
429 // Dont show preview if no URL given.
\r
430 else if ( dialog.preview )
\r
432 dialog.preview.removeAttribute( 'src' );
\r
433 dialog.preview.setStyle( 'display', 'none' );
\r
436 setup : function( type, element )
\r
438 if ( type == IMAGE )
\r
440 var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' );
\r
443 this.getDialog().dontResetSize = true;
\r
445 // In IE7 the dialog is being rendered improperly when loading
\r
446 // an image with a long URL. So we need to delay it a bit. (#4122)
\r
447 setTimeout( function()
\r
449 field.setValue( url ); // And call this.onChange()
\r
450 // Manually set the initial value.(#4191)
\r
451 field.setInitValue();
\r
456 commit : function( type, element )
\r
458 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
\r
460 element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );
\r
461 element.setAttribute( 'src', decodeURI( this.getValue() ) );
\r
463 else if ( type == CLEANUP )
\r
465 element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
\r
466 element.removeAttribute( 'src' );
\r
469 validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
\r
475 label : editor.lang.common.browseServer,
\r
477 filebrowser : 'info:txtUrl'
\r
486 label : editor.lang.image.alt,
\r
489 onChange : function()
\r
491 updatePreview( this.getDialog() );
\r
493 setup : function( type, element )
\r
495 if ( type == IMAGE )
\r
496 this.setValue( element.getAttribute( 'alt' ) );
\r
498 commit : function( type, element )
\r
500 if ( type == IMAGE )
\r
502 if ( this.getValue() || this.isChanged() )
\r
503 element.setAttribute( 'alt', this.getValue() );
\r
505 else if ( type == PREVIEW )
\r
507 element.setAttribute( 'alt', this.getValue() );
\r
509 else if ( type == CLEANUP )
\r
511 element.removeAttribute( 'alt' );
\r
517 widths : [ '140px', '240px' ],
\r
527 widths : [ '70%', '30%' ],
\r
539 labelLayout : 'horizontal',
\r
540 label : editor.lang.image.width,
\r
541 onKeyUp : onSizeChange,
\r
542 validate: function()
\r
544 var aMatch = this.getValue().match( regexGetSizeOrEmpty );
\r
546 alert( editor.lang.common.validateNumberFailed );
\r
549 setup : setupDimension,
\r
550 commit : function( type, element )
\r
552 if ( type == IMAGE )
\r
554 var value = this.getValue();
\r
556 element.setAttribute( 'width', value );
\r
557 else if ( !value && this.isChanged() )
\r
558 element.removeAttribute( 'width' );
\r
560 else if ( type == PREVIEW )
\r
562 value = this.getValue();
\r
563 var aMatch = value.match( regexGetSize );
\r
566 var oImageOriginal = this.getDialog().originalElement;
\r
567 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
568 element.setStyle( 'width', oImageOriginal.$.width + 'px');
\r
571 element.setStyle( 'width', value + 'px');
\r
573 else if ( type == CLEANUP )
\r
575 element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work.
\r
576 element.removeAttribute( 'width' );
\r
577 element.removeStyle( 'width' );
\r
585 labelLayout : 'horizontal',
\r
586 label : editor.lang.image.height,
\r
587 onKeyUp : onSizeChange,
\r
588 validate: function()
\r
590 var aMatch = this.getValue().match( regexGetSizeOrEmpty );
\r
592 alert( editor.lang.common.validateNumberFailed );
\r
595 setup : setupDimension,
\r
596 commit : function( type, element )
\r
598 if ( type == IMAGE )
\r
600 var value = this.getValue();
\r
602 element.setAttribute( 'height', value );
\r
603 else if ( !value && this.isChanged() )
\r
604 element.removeAttribute( 'height' );
\r
606 else if ( type == PREVIEW )
\r
608 value = this.getValue();
\r
609 var aMatch = value.match( regexGetSize );
\r
612 var oImageOriginal = this.getDialog().originalElement;
\r
613 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
614 element.setStyle( 'height', oImageOriginal.$.height + 'px');
\r
617 element.setStyle( 'height', value + 'px');
\r
619 else if ( type == CLEANUP )
\r
621 element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work.
\r
622 element.removeAttribute( 'height' );
\r
623 element.removeStyle( 'height' );
\r
631 style : 'margin-top:10px;width:40px;height:40px;',
\r
632 onLoad : function()
\r
634 // Activate Reset button
\r
635 var resetButton = CKEDITOR.document.getById( 'btnResetSize' ),
\r
636 ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
\r
639 resetButton.on( 'click', function()
\r
642 }, this.getDialog() );
\r
643 resetButton.on( 'mouseover', function()
\r
645 this.addClass( 'cke_btn_over' );
\r
647 resetButton.on( 'mouseout', function()
\r
649 this.removeClass( 'cke_btn_over' );
\r
652 // Activate (Un)LockRatio button
\r
655 ratioButton.on( 'click', function()
\r
657 var locked = switchLockRatio( this ),
\r
658 oImageOriginal = this.originalElement,
\r
659 width = this.getValueOf( 'info', 'txtWidth' );
\r
661 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
\r
663 var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
\r
664 if ( !isNaN( height ) )
\r
666 this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
\r
667 updatePreview( this );
\r
670 }, this.getDialog() );
\r
671 ratioButton.on( 'mouseover', function()
\r
673 this.addClass( 'cke_btn_over' );
\r
675 ratioButton.on( 'mouseout', function()
\r
677 this.removeClass( 'cke_btn_over' );
\r
682 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
\r
683 '" class="cke_btn_locked" id="btnLockSizes"></a>' +
\r
684 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
\r
685 '" class="cke_btn_reset" id="btnResetSize"></a>'+
\r
699 labelLayout : 'horizontal',
\r
700 label : editor.lang.image.border,
\r
702 onKeyUp : function()
\r
704 updatePreview( this.getDialog() );
\r
706 validate: function()
\r
708 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
709 return func.apply( this );
\r
711 setup : function( type, element )
\r
713 if ( type == IMAGE )
\r
714 this.setValue( element.getAttribute( 'border' ) );
\r
716 commit : function( type, element )
\r
718 if ( type == IMAGE )
\r
720 if ( this.getValue() || this.isChanged() )
\r
721 element.setAttribute( 'border', this.getValue() );
\r
723 else if ( type == PREVIEW )
\r
725 var value = parseInt( this.getValue(), 10 );
\r
726 value = isNaN( value ) ? 0 : value;
\r
727 element.setAttribute( 'border', value );
\r
728 element.setStyle( 'border', value + 'px solid black' );
\r
730 else if ( type == CLEANUP )
\r
732 element.removeAttribute( 'border' );
\r
733 element.removeStyle( 'border' );
\r
741 labelLayout : 'horizontal',
\r
742 label : editor.lang.image.hSpace,
\r
744 onKeyUp : function()
\r
746 updatePreview( this.getDialog() );
\r
748 validate: function()
\r
750 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
751 return func.apply( this );
\r
753 setup : function( type, element )
\r
755 if ( type == IMAGE )
\r
757 var value = element.getAttribute( 'hspace' );
\r
758 if ( value != -1 ) // In IE empty = -1.
\r
759 this.setValue( value );
\r
762 commit : function( type, element )
\r
764 if ( type == IMAGE )
\r
766 if ( this.getValue() || this.isChanged() )
\r
767 element.setAttribute( 'hspace', this.getValue() );
\r
769 else if ( type == PREVIEW )
\r
771 var value = parseInt( this.getValue(), 10 );
\r
772 value = isNaN( value ) ? 0 : value;
\r
773 element.setAttribute( 'hspace', value );
\r
774 element.setStyle( 'margin-left', value + 'px' );
\r
775 element.setStyle( 'margin-right', value + 'px' );
\r
777 else if ( type == CLEANUP )
\r
779 element.removeAttribute( 'hspace' );
\r
780 element.removeStyle( 'margin-left' );
\r
781 element.removeStyle( 'margin-right' );
\r
789 labelLayout : 'horizontal',
\r
790 label : editor.lang.image.vSpace,
\r
792 onKeyUp : function()
\r
794 updatePreview( this.getDialog() );
\r
796 validate: function()
\r
798 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
799 return func.apply( this );
\r
801 setup : function( type, element )
\r
803 if ( type == IMAGE )
\r
804 this.setValue( element.getAttribute( 'vspace' ) );
\r
806 commit : function( type, element )
\r
808 if ( type == IMAGE )
\r
810 if ( this.getValue() || this.isChanged() )
\r
811 element.setAttribute( 'vspace', this.getValue() );
\r
813 else if ( type == PREVIEW )
\r
815 var value = parseInt( this.getValue(), 10 );
\r
816 value = isNaN( value ) ? 0 : value;
\r
817 element.setAttribute( 'vspace', this.getValue() );
\r
818 element.setStyle( 'margin-top', value + 'px' );
\r
819 element.setStyle( 'margin-bottom', value + 'px' );
\r
821 else if ( type == CLEANUP )
\r
823 element.removeAttribute( 'vspace' );
\r
824 element.removeStyle( 'margin-top' );
\r
825 element.removeStyle( 'margin-bottom' );
\r
832 labelLayout : 'horizontal',
\r
833 widths : [ '35%','65%' ],
\r
834 style : 'width:90px',
\r
835 label : editor.lang.image.align,
\r
839 [ editor.lang.common.notSet , ''],
\r
840 [ editor.lang.image.alignLeft , 'left'],
\r
841 [ editor.lang.image.alignAbsBottom , 'absBottom'],
\r
842 [ editor.lang.image.alignAbsMiddle , 'absMiddle'],
\r
843 [ editor.lang.image.alignBaseline , 'baseline'],
\r
844 [ editor.lang.image.alignBottom , 'bottom'],
\r
845 [ editor.lang.image.alignMiddle , 'middle'],
\r
846 [ editor.lang.image.alignRight , 'right'],
\r
847 [ editor.lang.image.alignTextTop , 'textTop'],
\r
848 [ editor.lang.image.alignTop , 'top']
\r
850 onChange : function()
\r
852 updatePreview( this.getDialog() );
\r
854 setup : function( type, element )
\r
856 if ( type == IMAGE )
\r
857 this.setValue( element.getAttribute( 'align' ) );
\r
859 commit : function( type, element )
\r
861 var value = this.getValue();
\r
862 if ( type == IMAGE )
\r
864 if ( value || this.isChanged() )
\r
865 element.setAttribute( 'align', value );
\r
867 else if ( type == PREVIEW )
\r
869 element.setAttribute( 'align', this.getValue() );
\r
871 if ( value == 'absMiddle' || value == 'middle' )
\r
872 element.setStyle( 'vertical-align', 'middle' );
\r
873 else if ( value == 'top' || value == 'textTop' )
\r
874 element.setStyle( 'vertical-align', 'top' );
\r
876 element.removeStyle( 'vertical-align' );
\r
878 if ( value == 'right' || value == 'left' )
\r
879 element.setStyle( 'styleFloat', value );
\r
881 element.removeStyle( 'styleFloat' );
\r
884 else if ( type == CLEANUP )
\r
886 element.removeAttribute( 'align' );
\r
901 style : 'width:95%;',
\r
902 html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+
\r
903 '<div id="ImagePreviewLoader" style="display:none"><div class="loading"> </div></div>'+
\r
904 '<div id="ImagePreviewBox">'+
\r
905 '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+
\r
906 '<img id="previewImage" src="" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
\r
907 'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
\r
908 '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
919 label : editor.lang.link.title,
\r
926 label : editor.lang.image.url,
\r
927 style : 'width: 100%',
\r
929 setup : function( type, element )
\r
931 if ( type == LINK )
\r
933 var href = element.getAttribute( '_cke_saved_href' );
\r
935 href = element.getAttribute( 'href' );
\r
936 this.setValue( href );
\r
939 commit : function( type, element )
\r
941 if ( type == LINK )
\r
943 if ( this.getValue() || this.isChanged() )
\r
945 element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );
\r
946 element.setAttribute( 'href', 'javascript:void(0)/*' +
\r
947 CKEDITOR.tools.getNextNumber() + '*/' );
\r
949 if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
\r
950 this.getDialog().addLink = true;
\r
958 filebrowser : 'Link:txtUrl',
\r
959 style : 'float:right',
\r
961 label : editor.lang.common.browseServer
\r
966 label : editor.lang.link.target,
\r
970 [ editor.lang.link.targetNotSet , ''],
\r
971 [ editor.lang.link.targetNew , '_blank'],
\r
972 [ editor.lang.link.targetTop , '_top'],
\r
973 [ editor.lang.link.targetSelf , '_self'],
\r
974 [ editor.lang.link.targetParent , '_parent']
\r
976 setup : function( type, element )
\r
978 if ( type == LINK )
\r
979 this.setValue( element.getAttribute( 'target' ) );
\r
981 commit : function( type, element )
\r
983 if ( type == LINK )
\r
985 if ( this.getValue() || this.isChanged() )
\r
986 element.setAttribute( 'target', this.getValue() );
\r
995 filebrowser : 'uploadButton',
\r
996 label : editor.lang.image.upload,
\r
1002 label : editor.lang.image.btnUpload,
\r
1003 style: 'height:40px',
\r
1007 type : 'fileButton',
\r
1008 id : 'uploadButton',
\r
1009 filebrowser : 'info:txtUrl',
\r
1010 label : editor.lang.image.btnUpload,
\r
1011 'for' : [ 'Upload', 'upload' ]
\r
1017 label : editor.lang.common.advancedTab,
\r
1022 widths : [ '50%', '25%', '25%' ],
\r
1028 label : editor.lang.common.id,
\r
1029 setup : function( type, element )
\r
1031 if ( type == IMAGE )
\r
1032 this.setValue( element.getAttribute( 'id' ) );
\r
1034 commit : function( type, element )
\r
1036 if ( type == IMAGE )
\r
1038 if ( this.getValue() || this.isChanged() )
\r
1039 element.setAttribute( 'id', this.getValue() );
\r
1044 id : 'cmbLangDir',
\r
1046 style : 'width : 100px;',
\r
1047 label : editor.lang.common.langDir,
\r
1051 [ editor.lang.common.notSet, '' ],
\r
1052 [ editor.lang.common.langDirLtr, 'ltr' ],
\r
1053 [ editor.lang.common.langDirRtl, 'rtl' ]
\r
1055 setup : function( type, element )
\r
1057 if ( type == IMAGE )
\r
1058 this.setValue( element.getAttribute( 'dir' ) );
\r
1060 commit : function( type, element )
\r
1062 if ( type == IMAGE )
\r
1064 if ( this.getValue() || this.isChanged() )
\r
1065 element.setAttribute( 'dir', this.getValue() );
\r
1071 id : 'txtLangCode',
\r
1072 label : editor.lang.common.langCode,
\r
1074 setup : function( type, element )
\r
1076 if ( type == IMAGE )
\r
1077 this.setValue( element.getAttribute( 'lang' ) );
\r
1079 commit : function( type, element )
\r
1081 if ( type == IMAGE )
\r
1083 if ( this.getValue() || this.isChanged() )
\r
1084 element.setAttribute( 'lang', this.getValue() );
\r
1092 id : 'txtGenLongDescr',
\r
1093 label : editor.lang.common.longDescr,
\r
1094 setup : function( type, element )
\r
1096 if ( type == IMAGE )
\r
1097 this.setValue( element.getAttribute( 'longDesc' ) );
\r
1099 commit : function( type, element )
\r
1101 if ( type == IMAGE )
\r
1103 if ( this.getValue() || this.isChanged() )
\r
1104 element.setAttribute( 'longDesc', this.getValue() );
\r
1110 widths : [ '50%', '50%' ],
\r
1115 id : 'txtGenClass',
\r
1116 label : editor.lang.common.cssClass,
\r
1118 setup : function( type, element )
\r
1120 if ( type == IMAGE )
\r
1121 this.setValue( element.getAttribute( 'class' ) );
\r
1123 commit : function( type, element )
\r
1125 if ( type == IMAGE )
\r
1127 if ( this.getValue() || this.isChanged() )
\r
1128 element.setAttribute( 'class', this.getValue() );
\r
1134 id : 'txtGenTitle',
\r
1135 label : editor.lang.common.advisoryTitle,
\r
1137 onChange : function()
\r
1139 updatePreview( this.getDialog() );
\r
1141 setup : function( type, element )
\r
1143 if ( type == IMAGE )
\r
1144 this.setValue( element.getAttribute( 'title' ) );
\r
1146 commit : function( type, element )
\r
1148 if ( type == IMAGE )
\r
1150 if ( this.getValue() || this.isChanged() )
\r
1151 element.setAttribute( 'title', this.getValue() );
\r
1153 else if ( type == PREVIEW )
\r
1155 element.setAttribute( 'title', this.getValue() );
\r
1157 else if ( type == CLEANUP )
\r
1159 element.removeAttribute( 'title' );
\r
1167 id : 'txtdlgGenStyle',
\r
1168 label : editor.lang.common.cssStyle,
\r
1170 setup : function( type, element )
\r
1172 if ( type == IMAGE )
\r
1174 var genStyle = element.getAttribute( 'style' );
\r
1175 if ( !genStyle && element.$.style.cssText )
\r
1176 genStyle = element.$.style.cssText;
\r
1177 this.setValue( genStyle );
\r
1179 var height = element.$.style.height,
\r
1180 width = element.$.style.width,
\r
1181 aMatchH = ( height ? height : '' ).match( regexGetSize ),
\r
1182 aMatchW = ( width ? width : '').match( regexGetSize );
\r
1184 this.attributesInStyle =
\r
1186 height : !!aMatchH,
\r
1191 commit : function( type, element )
\r
1193 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
\r
1195 element.setAttribute( 'style', this.getValue() );
\r
1197 // Set STYLE dimensions.
\r
1198 var height = element.getAttribute( 'height' ),
\r
1199 width = element.getAttribute( 'width' );
\r
1201 if ( this.attributesInStyle && this.attributesInStyle.height )
\r
1205 if ( height.match( regexGetSize )[2] == '%' ) // % is allowed
\r
1206 element.setStyle( 'height', height + '%' );
\r
1208 element.setStyle( 'height', height + 'px' );
\r
1211 element.removeStyle( 'height' );
\r
1213 if ( this.attributesInStyle && this.attributesInStyle.width )
\r
1217 if ( width.match( regexGetSize )[2] == '%' ) // % is allowed
\r
1218 element.setStyle( 'width', width + '%' );
\r
1220 element.setStyle( 'width', width + 'px' );
\r
1223 element.removeStyle( 'width' );
\r
1234 CKEDITOR.dialog.add( 'image', function( editor )
\r
1236 return imageDialog( editor, 'image' );
\r
1239 CKEDITOR.dialog.add( 'imagebutton', function( editor )
\r
1241 return imageDialog( editor, 'imagebutton' );
\r