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
264 // Edit existing Image.
\r
265 if ( this.imageEditMode )
\r
267 var imgTagName = this.imageEditMode;
\r
269 // Image dialog and Input element.
\r
270 if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
\r
272 // Replace INPUT-> IMG
\r
273 imgTagName = 'img';
\r
274 this.imageElement = editor.document.createElement( 'img' );
\r
275 this.imageElement.setAttribute( 'alt', '' );
\r
276 editor.insertElement( this.imageElement );
\r
278 // ImageButton dialog and Image element.
\r
279 else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
\r
281 // Replace IMG -> INPUT
\r
282 imgTagName = 'input';
\r
283 this.imageElement = editor.document.createElement( 'input' );
\r
284 this.imageElement.setAttributes(
\r
290 editor.insertElement( this.imageElement );
\r
293 else // Create a new image.
\r
295 // Image dialog -> create IMG element.
\r
296 if ( dialogType == 'image' )
\r
297 this.imageElement = editor.document.createElement( 'img' );
\r
300 this.imageElement = editor.document.createElement( 'input' );
\r
301 this.imageElement.setAttribute ( 'type' ,'image' );
\r
303 this.imageElement.setAttribute( 'alt', '' );
\r
306 // Create a new link.
\r
307 if ( !this.linkEditMode )
\r
308 this.linkElement = editor.document.createElement( 'a' );
\r
311 this.commitContent( IMAGE, this.imageElement );
\r
312 this.commitContent( LINK, this.linkElement );
\r
314 // Insert a new Image.
\r
315 if ( !this.imageEditMode )
\r
317 if ( this.addLink )
\r
319 //Insert a new Link.
\r
320 if ( !this.linkEditMode )
\r
322 editor.insertElement(this.linkElement);
\r
323 this.linkElement.append(this.imageElement, false);
\r
325 else //Link already exists, image not.
\r
326 editor.insertElement(this.imageElement );
\r
329 editor.insertElement( this.imageElement );
\r
331 else // Image already exists.
\r
333 //Add a new link element.
\r
334 if ( !this.linkEditMode && this.addLink )
\r
336 editor.insertElement( this.linkElement );
\r
337 this.imageElement.appendTo( this.linkElement );
\r
339 //Remove Link, Image exists.
\r
340 else if ( this.linkEditMode && !this.addLink )
\r
342 editor.getSelection().selectElement( this.linkElement );
\r
343 editor.insertElement( this.imageElement );
\r
347 onLoad : function()
\r
349 if ( dialogType != 'image' )
\r
350 this.hidePage( 'Link' ); //Hide Link tab.
\r
351 var doc = this._.element.getDocument();
\r
352 this.addFocusable( doc.getById( 'btnResetSize' ), 5 );
\r
353 this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );
\r
355 onHide : function()
\r
357 if ( this.preview )
\r
358 this.commitContent( CLEANUP, this.preview );
\r
360 if ( this.originalElement )
\r
362 this.originalElement.removeListener( 'load', onImgLoadEvent );
\r
363 this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
\r
364 this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
\r
365 this.originalElement.remove();
\r
366 this.originalElement = false; // Dialog is closed.
\r
372 label : editor.lang.image.infoTab,
\r
383 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '</span>'
\r
387 widths : [ '280px', '110px' ],
\r
395 onChange : function()
\r
397 var dialog = this.getDialog(),
\r
398 newUrl = this.getValue();
\r
400 //Update original image
\r
401 if ( newUrl.length > 0 ) //Prevent from load before onShow
\r
403 dialog = this.getDialog();
\r
404 var original = dialog.originalElement;
\r
406 original.setCustomData( 'isReady', 'false' );
\r
408 var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );
\r
410 loader.setStyle( 'display', '' );
\r
412 original.on( 'load', onImgLoadEvent, dialog );
\r
413 original.on( 'error', onImgLoadErrorEvent, dialog );
\r
414 original.on( 'abort', onImgLoadErrorEvent, dialog );
\r
415 original.setAttribute( 'src', newUrl );
\r
416 dialog.preview.setAttribute( 'src', newUrl );
\r
418 updatePreview( dialog );
\r
421 setup : function( type, element )
\r
423 if ( type == IMAGE )
\r
425 var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' );
\r
428 this.getDialog().dontResetSize = true;
\r
430 // In IE7 the dialog is being rendered improperly when loading
\r
431 // an image with a long URL. So we need to delay it a bit. (#4122)
\r
432 setTimeout( function()
\r
434 field.setValue( url ); // And call this.onChange()
\r
439 commit : function( type, element )
\r
441 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
\r
443 element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );
\r
444 element.setAttribute( 'src', decodeURI( this.getValue() ) );
\r
446 else if ( type == CLEANUP )
\r
448 element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
\r
449 element.removeAttribute( 'src' );
\r
457 label : editor.lang.common.browseServer,
\r
459 filebrowser : 'info:txtUrl'
\r
468 label : editor.lang.image.alt,
\r
471 onChange : function()
\r
473 updatePreview( this.getDialog() );
\r
475 setup : function( type, element )
\r
477 if ( type == IMAGE )
\r
478 this.setValue( element.getAttribute( 'alt' ) );
\r
480 commit : function( type, element )
\r
482 if ( type == IMAGE )
\r
484 if ( this.getValue() || this.isChanged() )
\r
485 element.setAttribute( 'alt', this.getValue() );
\r
487 else if ( type == PREVIEW )
\r
489 element.setAttribute( 'alt', this.getValue() );
\r
491 else if ( type == CLEANUP )
\r
493 element.removeAttribute( 'alt' );
\r
499 widths : [ '140px', '240px' ],
\r
509 widths : [ '70%', '30%' ],
\r
521 labelLayout : 'horizontal',
\r
522 label : editor.lang.image.width,
\r
523 onKeyUp : onSizeChange,
\r
524 validate: function()
\r
526 var aMatch = this.getValue().match( regexGetSizeOrEmpty );
\r
528 alert( editor.lang.common.validateNumberFailed );
\r
531 setup : setupDimension,
\r
532 commit : function( type, element )
\r
534 if ( type == IMAGE )
\r
536 var value = this.getValue();
\r
538 element.setAttribute( 'width', value );
\r
539 else if ( !value && this.isChanged() )
\r
540 element.removeAttribute( 'width' );
\r
542 else if ( type == PREVIEW )
\r
544 value = this.getValue();
\r
545 var aMatch = value.match( regexGetSize );
\r
548 var oImageOriginal = this.getDialog().originalElement;
\r
549 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
550 element.setStyle( 'width', oImageOriginal.$.width + 'px');
\r
553 element.setStyle( 'width', value + 'px');
\r
555 else if ( type == CLEANUP )
\r
557 element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work.
\r
558 element.removeAttribute( 'width' );
\r
559 element.removeStyle( 'width' );
\r
567 labelLayout : 'horizontal',
\r
568 label : editor.lang.image.height,
\r
569 onKeyUp : onSizeChange,
\r
570 validate: function()
\r
572 var aMatch = this.getValue().match( regexGetSizeOrEmpty );
\r
574 alert( editor.lang.common.validateNumberFailed );
\r
577 setup : setupDimension,
\r
578 commit : function( type, element )
\r
580 if ( type == IMAGE )
\r
582 var value = this.getValue();
\r
584 element.setAttribute( 'height', value );
\r
585 else if ( !value && this.isChanged() )
\r
586 element.removeAttribute( 'height' );
\r
588 else if ( type == PREVIEW )
\r
590 value = this.getValue();
\r
591 var aMatch = value.match( regexGetSize );
\r
594 var oImageOriginal = this.getDialog().originalElement;
\r
595 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
\r
596 element.setStyle( 'height', oImageOriginal.$.height + 'px');
\r
599 element.setStyle( 'height', value + 'px');
\r
601 else if ( type == CLEANUP )
\r
603 element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work.
\r
604 element.removeAttribute( 'height' );
\r
605 element.removeStyle( 'height' );
\r
613 style : 'margin-top:10px;width:40px;height:40px;',
\r
614 onLoad : function()
\r
616 // Activate Reset button
\r
617 var resetButton = CKEDITOR.document.getById( 'btnResetSize' ),
\r
618 ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
\r
621 resetButton.on( 'click', function()
\r
624 }, this.getDialog() );
\r
625 resetButton.on( 'mouseover', function()
\r
627 this.addClass( 'cke_btn_over' );
\r
629 resetButton.on( 'mouseout', function()
\r
631 this.removeClass( 'cke_btn_over' );
\r
634 // Activate (Un)LockRatio button
\r
637 ratioButton.on( 'click', function()
\r
639 var locked = switchLockRatio( this ),
\r
640 oImageOriginal = this.originalElement,
\r
641 width = this.getValueOf( 'info', 'txtWidth' );
\r
643 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
\r
645 var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
\r
646 if ( !isNaN( height ) )
\r
648 this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
\r
649 updatePreview( this );
\r
652 }, this.getDialog() );
\r
653 ratioButton.on( 'mouseover', function()
\r
655 this.addClass( 'cke_btn_over' );
\r
657 ratioButton.on( 'mouseout', function()
\r
659 this.removeClass( 'cke_btn_over' );
\r
664 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
\r
665 '" class="cke_btn_locked" id="btnLockSizes"></a>' +
\r
666 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
\r
667 '" class="cke_btn_reset" id="btnResetSize"></a>'+
\r
681 labelLayout : 'horizontal',
\r
682 label : editor.lang.image.border,
\r
684 onKeyUp : function()
\r
686 updatePreview( this.getDialog() );
\r
688 validate: function()
\r
690 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
691 return func.apply( this );
\r
693 setup : function( type, element )
\r
695 if ( type == IMAGE )
\r
696 this.setValue( element.getAttribute( 'border' ) );
\r
698 commit : function( type, element )
\r
700 if ( type == IMAGE )
\r
702 if ( this.getValue() || this.isChanged() )
\r
703 element.setAttribute( 'border', this.getValue() );
\r
705 else if ( type == PREVIEW )
\r
707 var value = parseInt( this.getValue(), 10 );
\r
708 value = isNaN( value ) ? 0 : value;
\r
709 element.setAttribute( 'border', value );
\r
710 element.setStyle( 'border', value + 'px solid black' );
\r
712 else if ( type == CLEANUP )
\r
714 element.removeAttribute( 'border' );
\r
715 element.removeStyle( 'border' );
\r
723 labelLayout : 'horizontal',
\r
724 label : editor.lang.image.hSpace,
\r
726 onKeyUp : function()
\r
728 updatePreview( this.getDialog() );
\r
730 validate: function()
\r
732 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
733 return func.apply( this );
\r
735 setup : function( type, element )
\r
737 if ( type == IMAGE )
\r
739 var value = element.getAttribute( 'hspace' );
\r
740 if ( value != -1 ) // In IE empty = -1.
\r
741 this.setValue( value );
\r
744 commit : function( type, element )
\r
746 if ( type == IMAGE )
\r
748 if ( this.getValue() || this.isChanged() )
\r
749 element.setAttribute( 'hspace', this.getValue() );
\r
751 else if ( type == PREVIEW )
\r
753 var value = parseInt( this.getValue(), 10 );
\r
754 value = isNaN( value ) ? 0 : value;
\r
755 element.setAttribute( 'hspace', value );
\r
756 element.setStyle( 'margin-left', value + 'px' );
\r
757 element.setStyle( 'margin-right', value + 'px' );
\r
759 else if ( type == CLEANUP )
\r
761 element.removeAttribute( 'hspace' );
\r
762 element.removeStyle( 'margin-left' );
\r
763 element.removeStyle( 'margin-right' );
\r
771 labelLayout : 'horizontal',
\r
772 label : editor.lang.image.vSpace,
\r
774 onKeyUp : function()
\r
776 updatePreview( this.getDialog() );
\r
778 validate: function()
\r
780 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
781 return func.apply( this );
\r
783 setup : function( type, element )
\r
785 if ( type == IMAGE )
\r
786 this.setValue( element.getAttribute( 'vspace' ) );
\r
788 commit : function( type, element )
\r
790 if ( type == IMAGE )
\r
792 if ( this.getValue() || this.isChanged() )
\r
793 element.setAttribute( 'vspace', this.getValue() );
\r
795 else if ( type == PREVIEW )
\r
797 var value = parseInt( this.getValue(), 10 );
\r
798 value = isNaN( value ) ? 0 : value;
\r
799 element.setAttribute( 'vspace', this.getValue() );
\r
800 element.setStyle( 'margin-top', value + 'px' );
\r
801 element.setStyle( 'margin-bottom', value + 'px' );
\r
803 else if ( type == CLEANUP )
\r
805 element.removeAttribute( 'vspace' );
\r
806 element.removeStyle( 'margin-top' );
\r
807 element.removeStyle( 'margin-bottom' );
\r
814 labelLayout : 'horizontal',
\r
815 widths : [ '35%','65%' ],
\r
816 style : 'width:90px',
\r
817 label : editor.lang.image.align,
\r
821 [ editor.lang.common.notSet , ''],
\r
822 [ editor.lang.image.alignLeft , 'left'],
\r
823 [ editor.lang.image.alignAbsBottom , 'absBottom'],
\r
824 [ editor.lang.image.alignAbsMiddle , 'absMiddle'],
\r
825 [ editor.lang.image.alignBaseline , 'baseline'],
\r
826 [ editor.lang.image.alignBottom , 'bottom'],
\r
827 [ editor.lang.image.alignMiddle , 'middle'],
\r
828 [ editor.lang.image.alignRight , 'right'],
\r
829 [ editor.lang.image.alignTextTop , 'textTop'],
\r
830 [ editor.lang.image.alignTop , 'top']
\r
832 onChange : function()
\r
834 updatePreview( this.getDialog() );
\r
836 setup : function( type, element )
\r
838 if ( type == IMAGE )
\r
839 this.setValue( element.getAttribute( 'align' ) );
\r
841 commit : function( type, element )
\r
843 var value = this.getValue();
\r
844 if ( type == IMAGE )
\r
846 if ( value || this.isChanged() )
\r
847 element.setAttribute( 'align', value );
\r
849 else if ( type == PREVIEW )
\r
851 element.setAttribute( 'align', this.getValue() );
\r
853 if ( value == 'absMiddle' || value == 'middle' )
\r
854 element.setStyle( 'vertical-align', 'middle' );
\r
855 else if ( value == 'top' || value == 'textTop' )
\r
856 element.setStyle( 'vertical-align', 'top' );
\r
858 element.removeStyle( 'vertical-align' );
\r
860 if ( value == 'right' || value == 'left' )
\r
861 element.setStyle( 'styleFloat', value );
\r
863 element.removeStyle( 'styleFloat' );
\r
866 else if ( type == CLEANUP )
\r
868 element.removeAttribute( 'align' );
\r
883 style : 'width:95%;',
\r
884 html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+
\r
885 '<div id="ImagePreviewLoader" style="display:none"><div class="loading"> </div></div>'+
\r
886 '<div id="ImagePreviewBox">'+
\r
887 '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+
\r
888 '<img id="previewImage" src="" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
\r
889 'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
\r
890 '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
901 label : editor.lang.link.title,
\r
908 label : editor.lang.image.url,
\r
909 style : 'width: 100%',
\r
911 setup : function( type, element )
\r
913 if ( type == LINK )
\r
915 var href = element.getAttribute( '_cke_saved_href' );
\r
917 href = element.getAttribute( 'href' );
\r
918 this.setValue( href );
\r
921 commit : function( type, element )
\r
923 if ( type == LINK )
\r
925 if ( this.getValue() || this.isChanged() )
\r
927 element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );
\r
928 element.setAttribute( 'href', 'javascript:void(0)/*' +
\r
929 CKEDITOR.tools.getNextNumber() + '*/' );
\r
931 if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
\r
932 this.getDialog().addLink = true;
\r
940 filebrowser : 'Link:txtUrl',
\r
941 style : 'float:right',
\r
943 label : editor.lang.common.browseServer
\r
948 label : editor.lang.link.target,
\r
952 [ editor.lang.link.targetNotSet , ''],
\r
953 [ editor.lang.link.targetNew , '_blank'],
\r
954 [ editor.lang.link.targetTop , '_top'],
\r
955 [ editor.lang.link.targetSelf , '_self'],
\r
956 [ editor.lang.link.targetParent , '_parent']
\r
958 setup : function( type, element )
\r
960 if ( type == LINK )
\r
961 this.setValue( element.getAttribute( 'target' ) );
\r
963 commit : function( type, element )
\r
965 if ( type == LINK )
\r
967 if ( this.getValue() || this.isChanged() )
\r
968 element.setAttribute( 'target', this.getValue() );
\r
977 filebrowser : 'uploadButton',
\r
978 label : editor.lang.image.upload,
\r
984 label : editor.lang.image.btnUpload,
\r
985 style: 'height:40px',
\r
989 type : 'fileButton',
\r
990 id : 'uploadButton',
\r
991 filebrowser : 'info:txtUrl',
\r
992 label : editor.lang.image.btnUpload,
\r
993 'for' : [ 'Upload', 'upload' ]
\r
999 label : editor.lang.common.advancedTab,
\r
1004 widths : [ '50%', '25%', '25%' ],
\r
1010 label : editor.lang.common.id,
\r
1011 setup : function( type, element )
\r
1013 if ( type == IMAGE )
\r
1014 this.setValue( element.getAttribute( 'id' ) );
\r
1016 commit : function( type, element )
\r
1018 if ( type == IMAGE )
\r
1020 if ( this.getValue() || this.isChanged() )
\r
1021 element.setAttribute( 'id', this.getValue() );
\r
1026 id : 'cmbLangDir',
\r
1028 style : 'width : 100px;',
\r
1029 label : editor.lang.common.langDir,
\r
1033 [ editor.lang.common.notSet, '' ],
\r
1034 [ editor.lang.common.langDirLtr, 'ltr' ],
\r
1035 [ editor.lang.common.langDirRtl, 'rtl' ]
\r
1037 setup : function( type, element )
\r
1039 if ( type == IMAGE )
\r
1040 this.setValue( element.getAttribute( 'dir' ) );
\r
1042 commit : function( type, element )
\r
1044 if ( type == IMAGE )
\r
1046 if ( this.getValue() || this.isChanged() )
\r
1047 element.setAttribute( 'dir', this.getValue() );
\r
1053 id : 'txtLangCode',
\r
1054 label : editor.lang.common.langCode,
\r
1056 setup : function( type, element )
\r
1058 if ( type == IMAGE )
\r
1059 this.setValue( element.getAttribute( 'lang' ) );
\r
1061 commit : function( type, element )
\r
1063 if ( type == IMAGE )
\r
1065 if ( this.getValue() || this.isChanged() )
\r
1066 element.setAttribute( 'lang', this.getValue() );
\r
1074 id : 'txtGenLongDescr',
\r
1075 label : editor.lang.common.longDescr,
\r
1076 setup : function( type, element )
\r
1078 if ( type == IMAGE )
\r
1079 this.setValue( element.getAttribute( 'longDesc' ) );
\r
1081 commit : function( type, element )
\r
1083 if ( type == IMAGE )
\r
1085 if ( this.getValue() || this.isChanged() )
\r
1086 element.setAttribute( 'longDesc', this.getValue() );
\r
1092 widths : [ '50%', '50%' ],
\r
1097 id : 'txtGenClass',
\r
1098 label : editor.lang.common.cssClass,
\r
1100 setup : function( type, element )
\r
1102 if ( type == IMAGE )
\r
1103 this.setValue( element.getAttribute( 'class' ) );
\r
1105 commit : function( type, element )
\r
1107 if ( type == IMAGE )
\r
1109 if ( this.getValue() || this.isChanged() )
\r
1110 element.setAttribute( 'class', this.getValue() );
\r
1116 id : 'txtGenTitle',
\r
1117 label : editor.lang.common.advisoryTitle,
\r
1119 onChange : function()
\r
1121 updatePreview( this.getDialog() );
\r
1123 setup : function( type, element )
\r
1125 if ( type == IMAGE )
\r
1126 this.setValue( element.getAttribute( 'title' ) );
\r
1128 commit : function( type, element )
\r
1130 if ( type == IMAGE )
\r
1132 if ( this.getValue() || this.isChanged() )
\r
1133 element.setAttribute( 'title', this.getValue() );
\r
1135 else if ( type == PREVIEW )
\r
1137 element.setAttribute( 'title', this.getValue() );
\r
1139 else if ( type == CLEANUP )
\r
1141 element.removeAttribute( 'title' );
\r
1149 id : 'txtdlgGenStyle',
\r
1150 label : editor.lang.common.cssStyle,
\r
1152 setup : function( type, element )
\r
1154 if ( type == IMAGE )
\r
1156 var genStyle = element.getAttribute( 'style' );
\r
1157 if ( !genStyle && element.$.style.cssText )
\r
1158 genStyle = element.$.style.cssText;
\r
1159 this.setValue( genStyle );
\r
1161 var height = element.$.style.height,
\r
1162 width = element.$.style.width,
\r
1163 aMatchH = ( height ? height : '' ).match( regexGetSize ),
\r
1164 aMatchW = ( width ? width : '').match( regexGetSize );
\r
1166 this.attributesInStyle =
\r
1168 height : !!aMatchH,
\r
1173 commit : function( type, element )
\r
1175 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
\r
1177 element.setAttribute( 'style', this.getValue() );
\r
1179 // Set STYLE dimensions.
\r
1180 var height = element.getAttribute( 'height' ),
\r
1181 width = element.getAttribute( 'width' );
\r
1183 if ( this.attributesInStyle && this.attributesInStyle.height )
\r
1187 if ( height.match( regexGetSize )[2] == '%' ) // % is allowed
\r
1188 element.setStyle( 'height', height + '%' );
\r
1190 element.setStyle( 'height', height + 'px' );
\r
1193 element.removeStyle( 'height' );
\r
1195 if ( this.attributesInStyle && this.attributesInStyle.width )
\r
1199 if ( width.match( regexGetSize )[2] == '%' ) // % is allowed
\r
1200 element.setStyle( 'width', width + '%' );
\r
1202 element.setStyle( 'width', width + 'px' );
\r
1205 element.removeStyle( 'width' );
\r
1216 CKEDITOR.dialog.add( 'image', function( editor )
\r
1218 return imageDialog( editor, 'image' );
\r
1221 CKEDITOR.dialog.add( 'imagebutton', function( editor )
\r
1223 return imageDialog( editor, 'imagebutton' );
\r