Ticket #4246: 4246_3.patch
| File 4246_3.patch, 23.8 KB (added by , 14 years ago) |
|---|
-
_source/core/dom/element.js
428 428 return this.$.checked; 429 429 break; 430 430 431 case 'hspace': 432 return this.$.hspace; 433 431 434 case 'style': 432 435 // IE does not return inline styles via getAttribute(). See #2947. 433 436 return this.$.style.cssText; … … 988 991 */ 989 992 removeStyle : function( name ) 990 993 { 991 if ( this.$.style.removeAttribute ) 992 this.$.style.removeAttribute( CKEDITOR.tools.cssStyleToDomStyle( name ) ); 993 else 994 this.setStyle( name, '' ); 994 this.setStyle( name, '' ); 995 995 996 996 if ( !this.$.style.cssText ) 997 997 this.removeAttribute( 'style' ); -
_source/lang/en.js
385 385 vSpace : 'VSpace', 386 386 align : 'Align', 387 387 alignLeft : 'Left', 388 alignAbsBottom: 'Abs Bottom',389 alignAbsMiddle: 'Abs Middle',390 alignBaseline : 'Baseline',391 alignBottom : 'Bottom',392 alignMiddle : 'Middle',393 388 alignRight : 'Right', 394 alignTextTop : 'Text Top',395 alignTop : 'Top',396 389 preview : 'Preview', 397 390 alertUrl : 'Please type the image URL', 398 391 linkTab : 'Link', -
_source/plugins/image/dialogs/image.js
11 11 PREVIEW = 4, 12 12 CLEANUP = 8, 13 13 regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i, 14 regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i; 14 regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i, 15 pxLengthRegex = /^\d+px$/; 15 16 16 17 var onSizeChange = function() 17 18 { … … 61 62 return 0; 62 63 }; 63 64 65 // Avoid recursions. 66 var incommit; 67 // Commit the 68 function commitInternally( targetFields ) 69 { 70 if( incommit ) 71 return; 72 73 incommit = 1; 74 75 var dialog = this.getDialog(), 76 element = dialog.imageElement; 77 if( element ) 78 { 79 // Commit this field and broadcast to target fields. 80 this.commit( IMAGE, element ); 81 82 targetFields = [].concat( targetFields ); 83 var length = targetFields.length, 84 field; 85 for ( var i = 0; i < length; i++ ) 86 { 87 field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) ); 88 // May cause recursion. 89 field && field.setup( IMAGE, element ); 90 } 91 } 92 93 incommit = 0; 94 } 95 64 96 var switchLockRatio = function( dialog, value ) 65 97 { 66 98 var oImageOriginal = dialog.originalElement, … … 138 170 139 171 if ( size ) 140 172 value = checkDimension( size, value ); 141 value = checkDimension( element. $.style[ dimension ], value );173 value = checkDimension( element.getStyle( dimension ), value ); 142 174 143 175 this.setValue( value ); 144 176 }; … … 242 274 this.setupContent( LINK, link ); 243 275 } 244 276 245 if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' ) ) 246 this.imageEditMode = 'img'; 247 else if ( element && element.getName() == 'input' && element.getAttribute( 'type' ) && element.getAttribute( 'type' ) == 'image' ) 248 this.imageEditMode = 'input'; 249 250 if ( this.imageEditMode || this.imageElement ) 277 if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' ) 278 || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' ) 251 279 { 252 if ( !this.imageElement ) 253 this.imageElement = element; 280 this.imageEditMode = element.getName(); 281 this.imageElement = element; 282 } 254 283 284 if ( this.imageEditMode ) 285 { 286 // Use the original element as a buffer from since we don't want 287 // temporary changes to be committed, e.g. if the dialog is canceled. 288 this.cleanImageElement = this.imageElement; 289 this.imageElement = this.cleanImageElement.clone( true, true ); 290 255 291 // Fill out all fields. 256 292 this.setupContent( IMAGE, this.imageElement ); 257 293 258 294 // Refresh LockRatio button 259 295 switchLockRatio ( this, true ); 260 296 } 297 else 298 this.imageElement = editor.document.createElement( 'img' ); 261 299 262 300 // Dont show preview if no URL given. 263 301 if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) ) … … 296 334 ); 297 335 editor.insertElement( this.imageElement ); 298 336 } 299 } 337 else 338 { 339 // Restore the original element before all commits. 340 this.imageElement = this.cleanImageElement; 341 delete this.cleanImageElement; 342 } 343 } 300 344 else // Create a new image. 301 345 { 302 346 // Image dialog -> create IMG element. … … 318 362 this.commitContent( IMAGE, this.imageElement ); 319 363 this.commitContent( LINK, this.linkElement ); 320 364 365 // Remove empty style attribute. 366 if( !this.imageElement.getAttribute( 'style' ) ) 367 this.imageElement.removeAttribute( 'style' ); 368 321 369 // Insert a new Image. 322 370 if ( !this.imageEditMode ) 323 371 { … … 372 420 this.originalElement.remove(); 373 421 this.originalElement = false; // Dialog is closed. 374 422 } 423 424 delete this.imageElement; 375 425 }, 376 426 contents : [ 377 427 { … … 539 589 labelLayout : 'horizontal', 540 590 label : editor.lang.image.width, 541 591 onKeyUp : onSizeChange, 592 onChange : function() 593 { 594 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 595 }, 542 596 validate: function() 543 597 { 544 598 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); … … 547 601 return !!aMatch; 548 602 }, 549 603 setup : setupDimension, 550 commit : function( type, element )604 commit : function( type, element, internalCommit ) 551 605 { 606 var value = this.getValue(); 552 607 if ( type == IMAGE ) 553 608 { 554 var value = this.getValue();555 609 if ( value ) 556 element.setAttribute( 'width', value ); 557 else if ( !value && this.isChanged() ) 558 element.removeAttribute( 'width' ); 610 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); 611 else if ( !value && this.isChanged( ) ) 612 element.removeStyle( 'width' ); 613 614 !internalCommit && element.removeAttribute( 'width' ); 559 615 } 560 616 else if ( type == PREVIEW ) 561 617 { 562 value = this.getValue();563 618 var aMatch = value.match( regexGetSize ); 564 619 if ( !aMatch ) 565 620 { … … 572 627 } 573 628 else if ( type == CLEANUP ) 574 629 { 575 element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work.576 630 element.removeAttribute( 'width' ); 577 631 element.removeStyle( 'width' ); 578 632 } … … 585 639 labelLayout : 'horizontal', 586 640 label : editor.lang.image.height, 587 641 onKeyUp : onSizeChange, 642 onChange : function() 643 { 644 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 645 }, 588 646 validate: function() 589 647 { 590 648 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); … … 593 651 return !!aMatch; 594 652 }, 595 653 setup : setupDimension, 596 commit : function( type, element )654 commit : function( type, element, internalCommit ) 597 655 { 656 var value = this.getValue(); 598 657 if ( type == IMAGE ) 599 658 { 600 var value = this.getValue();601 659 if ( value ) 602 element.setAttribute( 'height', value ); 603 else if ( !value && this.isChanged() ) 660 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); 661 else if ( !value && this.isChanged( ) ) 662 element.removeStyle( 'height' ); 663 664 if( !internalCommit && type == IMAGE ) 604 665 element.removeAttribute( 'height' ); 605 666 } 606 667 else if ( type == PREVIEW ) 607 668 { 608 value = this.getValue();609 669 var aMatch = value.match( regexGetSize ); 610 670 if ( !aMatch ) 611 671 { 612 672 var oImageOriginal = this.getDialog().originalElement; 613 673 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 614 element.setStyle( 'height', oImageOriginal.$.height + 'px');674 element.setStyle( 'height', oImageOriginal.$.height + 'px' ); 615 675 } 616 676 else 617 element.setStyle( 'height', value + 'px' );677 element.setStyle( 'height', value + 'px' ); 618 678 } 619 679 else if ( type == CLEANUP ) 620 680 { 621 element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work.622 681 element.removeAttribute( 'height' ); 623 682 element.removeStyle( 'height' ); 624 683 } … … 703 762 { 704 763 updatePreview( this.getDialog() ); 705 764 }, 765 onChange : function() 766 { 767 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 768 }, 706 769 validate: function() 707 770 { 708 771 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 711 774 setup : function( type, element ) 712 775 { 713 776 if ( type == IMAGE ) 714 this.setValue( element.getAttribute( 'border' ) ); 777 { 778 var value, 779 borderStyle = element.getStyle( 'border-width' ); 780 781 borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ ); 782 value = borderStyle && parseInt( borderStyle[ 1 ] ); 783 !value && ( value = element.getAttribute( 'border' ) ); 784 785 this.setValue( value ); 786 } 715 787 }, 716 commit : function( type, element )788 commit : function( type, element, internalCommit ) 717 789 { 718 if ( type == IMAGE ) 790 var value = parseInt( this.getValue() ); 791 if ( type == IMAGE || type == PREVIEW ) 719 792 { 720 if ( this.getValue() || this.isChanged() ) 721 element.setAttribute( 'border', this.getValue() ); 722 } 723 else if ( type == PREVIEW ) 724 { 725 var value = parseInt( this.getValue(), 10 ); 726 value = isNaN( value ) ? 0 : value; 727 element.setAttribute( 'border', value ); 728 element.setStyle( 'border', value + 'px solid black' ); 729 } 793 if ( value ) 794 element.setStyle( 'border', CKEDITOR.tools.cssLength( value ) + ' solid' ); 795 else if ( !value && this.isChanged() ) 796 { 797 if( CKEDITOR.env.ie ) 798 { 799 element.removeStyle( 'border-width' ); 800 element.removeStyle( 'border-style' ); 801 element.removeStyle( 'border-color' ); 802 } 803 else 804 element.removeStyle( 'border' ); 805 } 806 807 if( !internalCommit && type == IMAGE ) 808 element.removeAttribute( 'border' ); 809 } 730 810 else if ( type == CLEANUP ) 731 811 { 732 812 element.removeAttribute( 'border' ); … … 745 825 { 746 826 updatePreview( this.getDialog() ); 747 827 }, 828 onChange : function() 829 { 830 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 831 }, 748 832 validate: function() 749 833 { 750 834 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 754 838 { 755 839 if ( type == IMAGE ) 756 840 { 757 var value = element.getAttribute( 'hspace' ); 758 if ( value != -1 ) // In IE empty = -1. 759 this.setValue( value ); 841 var value, 842 marginLeftPx, 843 marginRightPx, 844 marginLeftStyle = element.getStyle( 'margin-left' ), 845 marginRightStyle = element.getStyle( 'margin-right' ); 846 847 marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex ); 848 marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex ); 849 marginLeftPx = parseInt( marginLeftStyle ); 850 marginRightPx = parseInt( marginRightStyle ); 851 852 value = ( marginLeftPx == marginRightPx ) && marginLeftPx; 853 !value && ( value = element.getAttribute( 'hspace' ) ); 854 855 this.setValue( value ); 760 856 } 761 857 }, 762 commit : function( type, element )858 commit : function( type, element, internalCommit ) 763 859 { 764 if ( type == IMAGE ) 860 var value = parseInt( this.getValue() ); 861 if ( type == IMAGE || type == PREVIEW ) 765 862 { 766 if ( this.getValue() || this.isChanged() ) 767 element.setAttribute( 'hspace', this.getValue() ); 768 } 769 else if ( type == PREVIEW ) 770 { 771 var value = parseInt( this.getValue(), 10 ); 772 value = isNaN( value ) ? 0 : value; 773 element.setAttribute( 'hspace', value ); 774 element.setStyle( 'margin-left', value + 'px' ); 775 element.setStyle( 'margin-right', value + 'px' ); 776 } 863 if ( value ) 864 { 865 element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) ); 866 element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) ); 867 } 868 else if ( !value && this.isChanged( ) ) 869 { 870 element.removeStyle( 'margin-left' ); 871 element.removeStyle( 'margin-right' ); 872 } 873 874 if( !internalCommit && type == IMAGE ) 875 element.removeAttribute( 'hspace' ); 876 } 777 877 else if ( type == CLEANUP ) 778 878 { 779 879 element.removeAttribute( 'hspace' ); … … 793 893 { 794 894 updatePreview( this.getDialog() ); 795 895 }, 896 onChange : function() 897 { 898 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 899 }, 796 900 validate: function() 797 901 { 798 902 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 801 905 setup : function( type, element ) 802 906 { 803 907 if ( type == IMAGE ) 804 this.setValue( element.getAttribute( 'vspace' ) ); 908 { 909 var value, 910 marginTopPx, 911 marginBottomPx, 912 marginTopStyle = element.getStyle( 'margin-top' ), 913 marginBottomStyle = element.getStyle( 'margin-bottom' ); 914 915 marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex ); 916 marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex ); 917 marginTopPx = parseInt( marginTopStyle ); 918 marginBottomPx = parseInt( marginBottomStyle ); 919 920 value = ( marginTopPx == marginBottomPx ) && marginTopPx; 921 !value && ( value = element.getAttribute( 'vspace' ) ); 922 this.setValue( value ); 923 } 805 924 }, 806 commit : function( type, element )925 commit : function( type, element, internalCommit ) 807 926 { 808 if ( type == IMAGE ) 927 var value = parseInt( this.getValue() ); 928 if ( type == IMAGE || type == PREVIEW ) 809 929 { 810 if ( this.getValue() || this.isChanged() ) 811 element.setAttribute( 'vspace', this.getValue() ); 812 } 813 else if ( type == PREVIEW ) 814 { 815 var value = parseInt( this.getValue(), 10 ); 816 value = isNaN( value ) ? 0 : value; 817 element.setAttribute( 'vspace', this.getValue() ); 818 element.setStyle( 'margin-top', value + 'px' ); 819 element.setStyle( 'margin-bottom', value + 'px' ); 820 } 930 if ( value ) 931 { 932 element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) ); 933 element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) ); 934 } 935 else if ( !value && this.isChanged( ) ) 936 { 937 element.removeStyle( 'margin-top' ); 938 element.removeStyle( 'margin-bottom' ); 939 } 940 941 if( !internalCommit && type == IMAGE ) 942 element.removeAttribute( 'vspace' ); 943 } 821 944 else if ( type == CLEANUP ) 822 945 { 823 946 element.removeAttribute( 'vspace' ); … … 838 961 [ 839 962 [ editor.lang.common.notSet , ''], 840 963 [ editor.lang.image.alignLeft , 'left'], 841 [ editor.lang.image.alignAbsBottom , 'absBottom'],842 [ editor.lang.image.alignAbsMiddle , 'absMiddle'],843 [ editor.lang.image.alignBaseline , 'baseline'],844 [ editor.lang.image.alignBottom , 'bottom'],845 [ editor.lang.image.alignMiddle , 'middle'],846 964 [ editor.lang.image.alignRight , 'right'], 847 [ editor.lang.image.alignTextTop , 'textTop'], 848 [ editor.lang.image.alignTop , 'top'] 965 // Backward compatible with v2 on setup when specified as attribute value, 966 // while these values are no more available as select options. 967 // [ editor.lang.image.alignAbsBottom , 'absBottom'], 968 // [ editor.lang.image.alignAbsMiddle , 'absMiddle'], 969 // [ editor.lang.image.alignBaseline , 'baseline'], 970 // [ editor.lang.image.alignTextTop , 'text-top'], 971 // [ editor.lang.image.alignBottom , 'bottom'], 972 // [ editor.lang.image.alignMiddle , 'middle'], 973 // [ editor.lang.image.alignTop , 'top'] 849 974 ], 850 975 onChange : function() 851 976 { 852 977 updatePreview( this.getDialog() ); 978 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 853 979 }, 854 980 setup : function( type, element ) 855 981 { 856 982 if ( type == IMAGE ) 857 this.setValue( element.getAttribute( 'align' ) ); 858 }, 859 commit : function( type, element ) 860 { 861 var value = this.getValue(); 862 if ( type == IMAGE ) 863 { 864 if ( value || this.isChanged() ) 865 element.setAttribute( 'align', value ); 866 } 867 else if ( type == PREVIEW ) 868 { 869 element.setAttribute( 'align', this.getValue() ); 983 { 984 var value = element.getStyle( 'float' ); 985 switch( value ) 986 { 987 // Ignore those unrelated values. 988 case 'inherit': 989 case 'none': 990 value = ''; 991 } 870 992 871 if ( value == 'absMiddle' || value == 'middle' ) 872 element.setStyle( 'vertical-align', 'middle' ); 873 else if ( value == 'top' || value == 'textTop' ) 874 element.setStyle( 'vertical-align', 'top' ); 875 else 876 element.removeStyle( 'vertical-align' ); 877 878 if ( value == 'right' || value == 'left' ) 879 element.setStyle( 'styleFloat', value ); 880 else 881 element.removeStyle( 'styleFloat' ); 882 993 !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() ); 994 this.setValue( value ); 883 995 } 884 else if ( type == CLEANUP ) 885 { 886 element.removeAttribute( 'align' ); 887 } 888 } 889 } 996 }, 997 commit : function( type, element, internalCommit ) 998 { 999 var value = this.getValue(); 1000 if ( type == IMAGE || type == PREVIEW ) 1001 { 1002 if ( value ) 1003 element.setStyle( 'float', value ); 1004 else if ( !value && this.isChanged( ) ) 1005 element.removeStyle( 'float' ); 1006 1007 if( !internalCommit && type == IMAGE ) 1008 { 1009 value = ( element.getAttribute( 'align' ) || '' ).toLowerCase(); 1010 switch( value ) 1011 { 1012 // we should remove it only if it matches "left" or "right", 1013 // otherwise leave it intact. 1014 case 'left': 1015 case 'right': 1016 element.removeAttribute( 'align' ); 1017 } 1018 } 1019 } 1020 else if ( type == CLEANUP ) 1021 element.removeStyle( 'float' ); 1022 1023 } 1024 } 890 1025 ] 891 1026 } 892 1027 ] … … 1188 1323 }; 1189 1324 } 1190 1325 }, 1326 onChange : function () 1327 { 1328 commitInternally.call( this, 1329 [ 'info:cmbFloat', 'info:cmbAlign', 1330 'info:txtVSpace', 'info:txtHSpace', 1331 'info:txtBorder', 1332 'info:txtWidth', 'info:txtHeight' ] ); 1333 }, 1191 1334 commit : function( type, element ) 1192 1335 { 1193 1336 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) 1194 1337 { 1195 1338 element.setAttribute( 'style', this.getValue() ); 1196 1197 // Set STYLE dimensions. 1198 var height = element.getAttribute( 'height' ), 1199 width = element.getAttribute( 'width' ); 1200 1201 if ( this.attributesInStyle && this.attributesInStyle.height ) 1202 { 1203 if ( height ) 1204 { 1205 if ( height.match( regexGetSize )[2] == '%' ) // % is allowed 1206 element.setStyle( 'height', height + '%' ); 1207 else 1208 element.setStyle( 'height', height + 'px' ); 1209 } 1210 else 1211 element.removeStyle( 'height' ); 1212 } 1213 if ( this.attributesInStyle && this.attributesInStyle.width ) 1214 { 1215 if ( width ) 1216 { 1217 if ( width.match( regexGetSize )[2] == '%' ) // % is allowed 1218 element.setStyle( 'width', width + '%' ); 1219 else 1220 element.setStyle( 'width', width + 'px' ); 1221 } 1222 else 1223 element.removeStyle( 'width' ); 1224 } 1225 } 1226 } 1227 } 1339 } 1340 } 1341 } 1228 1342 ] 1229 1343 } 1230 1344 ]
