Ticket #4246: 4246_4.patch
| File 4246_4.patch, 23.5 KB (added by , 13 years ago) |
|---|
-
_source/core/dom/element.js
433 433 return attrValue ? 'checked' : null; 434 434 } 435 435 436 case 'hspace': 437 return this.$.hspace; 438 436 439 case 'style': 437 440 // IE does not return inline styles via getAttribute(). See #2947. 438 441 return this.$.style.cssText; … … 998 1001 */ 999 1002 removeStyle : function( name ) 1000 1003 { 1001 if ( this.$.style.removeAttribute ) 1002 this.$.style.removeAttribute( CKEDITOR.tools.cssStyleToDomStyle( name ) ); 1003 else 1004 this.setStyle( name, '' ); 1004 this.setStyle( name, '' ); 1005 1005 1006 1006 if ( !this.$.style.cssText ) 1007 1007 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 { … … 533 583 id : 'txtWidth', 534 584 labelLayout : 'horizontal', 535 585 label : editor.lang.image.width, 536 onKeyUp : onSizeChange, 586 onKeyUp : function() 587 { 588 onSizeChange.apply( this, arguments ); 589 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 590 }, 537 591 validate: function() 538 592 { 539 593 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); … … 542 596 return !!aMatch; 543 597 }, 544 598 setup : setupDimension, 545 commit : function( type, element )599 commit : function( type, element, internalCommit ) 546 600 { 601 var value = this.getValue(); 547 602 if ( type == IMAGE ) 548 603 { 549 var value = this.getValue();550 604 if ( value ) 551 element.setAttribute( 'width', value ); 552 else if ( !value && this.isChanged() ) 553 element.removeAttribute( 'width' ); 605 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); 606 else if ( !value && this.isChanged( ) ) 607 element.removeStyle( 'width' ); 608 609 !internalCommit && element.removeAttribute( 'width' ); 554 610 } 555 611 else if ( type == PREVIEW ) 556 612 { 557 value = this.getValue();558 613 var aMatch = value.match( regexGetSize ); 559 614 if ( !aMatch ) 560 615 { … … 567 622 } 568 623 else if ( type == CLEANUP ) 569 624 { 570 element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work.571 625 element.removeAttribute( 'width' ); 572 626 element.removeStyle( 'width' ); 573 627 } … … 579 633 width: '40px', 580 634 labelLayout : 'horizontal', 581 635 label : editor.lang.image.height, 582 onKeyUp : onSizeChange, 636 onKeyUp : function() 637 { 638 onSizeChange.apply( this, arguments ); 639 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 640 }, 583 641 validate: function() 584 642 { 585 643 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); … … 588 646 return !!aMatch; 589 647 }, 590 648 setup : setupDimension, 591 commit : function( type, element )649 commit : function( type, element, internalCommit ) 592 650 { 651 var value = this.getValue(); 593 652 if ( type == IMAGE ) 594 653 { 595 var value = this.getValue();596 654 if ( value ) 597 element.setAttribute( 'height', value ); 598 else if ( !value && this.isChanged() ) 655 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); 656 else if ( !value && this.isChanged( ) ) 657 element.removeStyle( 'height' ); 658 659 if( !internalCommit && type == IMAGE ) 599 660 element.removeAttribute( 'height' ); 600 661 } 601 662 else if ( type == PREVIEW ) 602 663 { 603 value = this.getValue();604 664 var aMatch = value.match( regexGetSize ); 605 665 if ( !aMatch ) 606 666 { 607 667 var oImageOriginal = this.getDialog().originalElement; 608 668 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 609 element.setStyle( 'height', oImageOriginal.$.height + 'px');669 element.setStyle( 'height', oImageOriginal.$.height + 'px' ); 610 670 } 611 671 else 612 element.setStyle( 'height', value + 'px' );672 element.setStyle( 'height', value + 'px' ); 613 673 } 614 674 else if ( type == CLEANUP ) 615 675 { 616 element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work.617 676 element.removeAttribute( 'height' ); 618 677 element.removeStyle( 'height' ); 619 678 } … … 697 756 onKeyUp : function() 698 757 { 699 758 updatePreview( this.getDialog() ); 759 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 700 760 }, 701 761 validate: function() 702 762 { … … 706 766 setup : function( type, element ) 707 767 { 708 768 if ( type == IMAGE ) 709 this.setValue( element.getAttribute( 'border' ) ); 769 { 770 var value, 771 borderStyle = element.getStyle( 'border-width' ); 772 773 borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ ); 774 value = borderStyle && parseInt( borderStyle[ 1 ] ); 775 !value && ( value = element.getAttribute( 'border' ) ); 776 777 this.setValue( value ); 778 } 710 779 }, 711 commit : function( type, element )780 commit : function( type, element, internalCommit ) 712 781 { 713 if ( type == IMAGE ) 782 var value = parseInt( this.getValue() ); 783 if ( type == IMAGE || type == PREVIEW ) 714 784 { 715 if ( this.getValue() || this.isChanged() ) 716 element.setAttribute( 'border', this.getValue() ); 717 } 718 else if ( type == PREVIEW ) 719 { 720 var value = parseInt( this.getValue(), 10 ); 721 value = isNaN( value ) ? 0 : value; 722 element.setAttribute( 'border', value ); 723 element.setStyle( 'border', value + 'px solid black' ); 724 } 785 if ( value ) 786 element.setStyle( 'border', CKEDITOR.tools.cssLength( value ) + ' solid' ); 787 else if ( !value && this.isChanged() ) 788 { 789 if( CKEDITOR.env.ie ) 790 { 791 element.removeStyle( 'border-width' ); 792 element.removeStyle( 'border-style' ); 793 element.removeStyle( 'border-color' ); 794 } 795 else 796 element.removeStyle( 'border' ); 797 } 798 799 if( !internalCommit && type == IMAGE ) 800 element.removeAttribute( 'border' ); 801 } 725 802 else if ( type == CLEANUP ) 726 803 { 727 804 element.removeAttribute( 'border' ); … … 739 816 onKeyUp : function() 740 817 { 741 818 updatePreview( this.getDialog() ); 819 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 742 820 }, 743 821 validate: function() 744 822 { … … 749 827 { 750 828 if ( type == IMAGE ) 751 829 { 752 var value = element.getAttribute( 'hspace' ); 753 if ( value != -1 ) // In IE empty = -1. 754 this.setValue( value ); 830 var value, 831 marginLeftPx, 832 marginRightPx, 833 marginLeftStyle = element.getStyle( 'margin-left' ), 834 marginRightStyle = element.getStyle( 'margin-right' ); 835 836 marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex ); 837 marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex ); 838 marginLeftPx = parseInt( marginLeftStyle ); 839 marginRightPx = parseInt( marginRightStyle ); 840 841 value = ( marginLeftPx == marginRightPx ) && marginLeftPx; 842 !value && ( value = element.getAttribute( 'hspace' ) ); 843 844 this.setValue( value ); 755 845 } 756 846 }, 757 commit : function( type, element )847 commit : function( type, element, internalCommit ) 758 848 { 759 if ( type == IMAGE ) 849 var value = parseInt( this.getValue() ); 850 if ( type == IMAGE || type == PREVIEW ) 760 851 { 761 if ( this.getValue() || this.isChanged() ) 762 element.setAttribute( 'hspace', this.getValue() ); 763 } 764 else if ( type == PREVIEW ) 765 { 766 var value = parseInt( this.getValue(), 10 ); 767 value = isNaN( value ) ? 0 : value; 768 element.setAttribute( 'hspace', value ); 769 element.setStyle( 'margin-left', value + 'px' ); 770 element.setStyle( 'margin-right', value + 'px' ); 771 } 852 if ( value ) 853 { 854 element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) ); 855 element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) ); 856 } 857 else if ( !value && this.isChanged( ) ) 858 { 859 element.removeStyle( 'margin-left' ); 860 element.removeStyle( 'margin-right' ); 861 } 862 863 if( !internalCommit && type == IMAGE ) 864 element.removeAttribute( 'hspace' ); 865 } 772 866 else if ( type == CLEANUP ) 773 867 { 774 868 element.removeAttribute( 'hspace' ); … … 787 881 onKeyUp : function() 788 882 { 789 883 updatePreview( this.getDialog() ); 884 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 790 885 }, 791 886 validate: function() 792 887 { … … 796 891 setup : function( type, element ) 797 892 { 798 893 if ( type == IMAGE ) 799 this.setValue( element.getAttribute( 'vspace' ) ); 894 { 895 var value, 896 marginTopPx, 897 marginBottomPx, 898 marginTopStyle = element.getStyle( 'margin-top' ), 899 marginBottomStyle = element.getStyle( 'margin-bottom' ); 900 901 marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex ); 902 marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex ); 903 marginTopPx = parseInt( marginTopStyle ); 904 marginBottomPx = parseInt( marginBottomStyle ); 905 906 value = ( marginTopPx == marginBottomPx ) && marginTopPx; 907 !value && ( value = element.getAttribute( 'vspace' ) ); 908 this.setValue( value ); 909 } 800 910 }, 801 commit : function( type, element )911 commit : function( type, element, internalCommit ) 802 912 { 803 if ( type == IMAGE ) 913 var value = parseInt( this.getValue() ); 914 if ( type == IMAGE || type == PREVIEW ) 804 915 { 805 if ( this.getValue() || this.isChanged() ) 806 element.setAttribute( 'vspace', this.getValue() ); 807 } 808 else if ( type == PREVIEW ) 809 { 810 var value = parseInt( this.getValue(), 10 ); 811 value = isNaN( value ) ? 0 : value; 812 element.setAttribute( 'vspace', this.getValue() ); 813 element.setStyle( 'margin-top', value + 'px' ); 814 element.setStyle( 'margin-bottom', value + 'px' ); 815 } 916 if ( value ) 917 { 918 element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) ); 919 element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) ); 920 } 921 else if ( !value && this.isChanged( ) ) 922 { 923 element.removeStyle( 'margin-top' ); 924 element.removeStyle( 'margin-bottom' ); 925 } 926 927 if( !internalCommit && type == IMAGE ) 928 element.removeAttribute( 'vspace' ); 929 } 816 930 else if ( type == CLEANUP ) 817 931 { 818 932 element.removeAttribute( 'vspace' ); … … 833 947 [ 834 948 [ editor.lang.common.notSet , ''], 835 949 [ editor.lang.image.alignLeft , 'left'], 836 [ editor.lang.image.alignAbsBottom , 'absBottom'],837 [ editor.lang.image.alignAbsMiddle , 'absMiddle'],838 [ editor.lang.image.alignBaseline , 'baseline'],839 [ editor.lang.image.alignBottom , 'bottom'],840 [ editor.lang.image.alignMiddle , 'middle'],841 950 [ editor.lang.image.alignRight , 'right'], 842 [ editor.lang.image.alignTextTop , 'textTop'], 843 [ editor.lang.image.alignTop , 'top'] 951 // Backward compatible with v2 on setup when specified as attribute value, 952 // while these values are no more available as select options. 953 // [ editor.lang.image.alignAbsBottom , 'absBottom'], 954 // [ editor.lang.image.alignAbsMiddle , 'absMiddle'], 955 // [ editor.lang.image.alignBaseline , 'baseline'], 956 // [ editor.lang.image.alignTextTop , 'text-top'], 957 // [ editor.lang.image.alignBottom , 'bottom'], 958 // [ editor.lang.image.alignMiddle , 'middle'], 959 // [ editor.lang.image.alignTop , 'top'] 844 960 ], 845 961 onChange : function() 846 962 { 847 963 updatePreview( this.getDialog() ); 964 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 848 965 }, 849 966 setup : function( type, element ) 850 967 { 851 968 if ( type == IMAGE ) 852 this.setValue( element.getAttribute( 'align' ) ); 853 }, 854 commit : function( type, element ) 855 { 856 var value = this.getValue(); 857 if ( type == IMAGE ) 858 { 859 if ( value || this.isChanged() ) 860 element.setAttribute( 'align', value ); 861 } 862 else if ( type == PREVIEW ) 863 { 864 element.setAttribute( 'align', this.getValue() ); 969 { 970 var value = element.getStyle( 'float' ); 971 switch( value ) 972 { 973 // Ignore those unrelated values. 974 case 'inherit': 975 case 'none': 976 value = ''; 977 } 865 978 866 if ( value == 'absMiddle' || value == 'middle' ) 867 element.setStyle( 'vertical-align', 'middle' ); 868 else if ( value == 'top' || value == 'textTop' ) 869 element.setStyle( 'vertical-align', 'top' ); 870 else 871 element.removeStyle( 'vertical-align' ); 872 873 if ( value == 'right' || value == 'left' ) 874 element.setStyle( 'styleFloat', value ); 875 else 876 element.removeStyle( 'styleFloat' ); 877 979 !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() ); 980 this.setValue( value ); 878 981 } 879 else if ( type == CLEANUP ) 880 { 881 element.removeAttribute( 'align' ); 882 } 883 } 884 } 982 }, 983 commit : function( type, element, internalCommit ) 984 { 985 var value = this.getValue(); 986 if ( type == IMAGE || type == PREVIEW ) 987 { 988 if ( value ) 989 element.setStyle( 'float', value ); 990 else if ( !value && this.isChanged( ) ) 991 element.removeStyle( 'float' ); 992 993 if( !internalCommit && type == IMAGE ) 994 { 995 value = ( element.getAttribute( 'align' ) || '' ).toLowerCase(); 996 switch( value ) 997 { 998 // we should remove it only if it matches "left" or "right", 999 // otherwise leave it intact. 1000 case 'left': 1001 case 'right': 1002 element.removeAttribute( 'align' ); 1003 } 1004 } 1005 } 1006 else if ( type == CLEANUP ) 1007 element.removeStyle( 'float' ); 1008 1009 } 1010 } 885 1011 ] 886 1012 } 887 1013 ] … … 1183 1309 }; 1184 1310 } 1185 1311 }, 1312 onKeyUp : function () 1313 { 1314 commitInternally.call( this, 1315 [ 'info:cmbFloat', 'info:cmbAlign', 1316 'info:txtVSpace', 'info:txtHSpace', 1317 'info:txtBorder', 1318 'info:txtWidth', 'info:txtHeight' ] ); 1319 }, 1186 1320 commit : function( type, element ) 1187 1321 { 1188 1322 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) 1189 1323 { 1190 1324 element.setAttribute( 'style', this.getValue() ); 1191 1192 // Set STYLE dimensions. 1193 var height = element.getAttribute( 'height' ), 1194 width = element.getAttribute( 'width' ); 1195 1196 if ( this.attributesInStyle && this.attributesInStyle.height ) 1197 { 1198 if ( height ) 1199 { 1200 if ( height.match( regexGetSize )[2] == '%' ) // % is allowed 1201 element.setStyle( 'height', height + '%' ); 1202 else 1203 element.setStyle( 'height', height + 'px' ); 1204 } 1205 else 1206 element.removeStyle( 'height' ); 1207 } 1208 if ( this.attributesInStyle && this.attributesInStyle.width ) 1209 { 1210 if ( width ) 1211 { 1212 if ( width.match( regexGetSize )[2] == '%' ) // % is allowed 1213 element.setStyle( 'width', width + '%' ); 1214 else 1215 element.setStyle( 'width', width + 'px' ); 1216 } 1217 else 1218 element.removeStyle( 'width' ); 1219 } 1220 } 1221 } 1222 } 1325 } 1326 } 1327 } 1223 1328 ] 1224 1329 } 1225 1330 ]
