Ticket #4246: 4246_6.patch
File 4246_6.patch, 24.8 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 { 1004 this.setStyle( name, '' ); 1001 1005 if ( this.$.style.removeAttribute ) 1002 1006 this.$.style.removeAttribute( CKEDITOR.tools.cssStyleToDomStyle( name ) ); 1003 else1004 this.setStyle( name, '' );1005 1007 1006 1008 if ( !this.$.style.cssText ) 1007 1009 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 // Custom commit dialog logic, where we're intended to give inline style 66 // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute 67 // by other fields. 68 function commitContent() 69 { 70 var args = arguments; 71 var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' ); 72 inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args ); 73 74 this.foreach( function( widget ) 75 { 76 if ( widget.commit && widget.id != 'txtdlgGenStyle' ) 77 widget.commit.apply( widget, args ); 78 }); 79 }; 80 81 // Avoid recursions. 82 var incommit; 83 84 // Synchronous field values to other impacted fields is required, e.g. border 85 // size change should alter inline-style text as well. 86 function commitInternally( targetFields ) 87 { 88 if( incommit ) 89 return; 90 91 incommit = 1; 92 93 var dialog = this.getDialog(), 94 element = dialog.imageElement; 95 if( element ) 96 { 97 // Commit this field and broadcast to target fields. 98 this.commit( IMAGE, element ); 99 100 targetFields = [].concat( targetFields ); 101 var length = targetFields.length, 102 field; 103 for ( var i = 0; i < length; i++ ) 104 { 105 field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) ); 106 // May cause recursion. 107 field && field.setup( IMAGE, element ); 108 } 109 } 110 111 incommit = 0; 112 } 113 64 114 var switchLockRatio = function( dialog, value ) 65 115 { 66 116 var oImageOriginal = dialog.originalElement, … … 138 188 139 189 if ( size ) 140 190 value = checkDimension( size, value ); 141 value = checkDimension( element. $.style[ dimension ], value );191 value = checkDimension( element.getStyle( dimension ), value ); 142 192 143 193 this.setValue( value ); 144 194 }; … … 242 292 this.setupContent( LINK, link ); 243 293 } 244 294 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 ) 295 if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' ) 296 || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' ) 251 297 { 252 if ( !this.imageElement ) 253 this.imageElement = element; 298 this.imageEditMode = element.getName(); 299 this.imageElement = element; 300 } 254 301 302 if ( this.imageEditMode ) 303 { 304 // Use the original element as a buffer from since we don't want 305 // temporary changes to be committed, e.g. if the dialog is canceled. 306 this.cleanImageElement = this.imageElement; 307 this.imageElement = this.cleanImageElement.clone( true, true ); 308 255 309 // Fill out all fields. 256 310 this.setupContent( IMAGE, this.imageElement ); 257 311 258 312 // Refresh LockRatio button 259 313 switchLockRatio ( this, true ); 260 314 } 315 else 316 this.imageElement = editor.document.createElement( 'img' ); 261 317 262 318 // Dont show preview if no URL given. 263 319 if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) ) … … 296 352 ); 297 353 editor.insertElement( this.imageElement ); 298 354 } 299 } 355 else 356 { 357 // Restore the original element before all commits. 358 this.imageElement = this.cleanImageElement; 359 delete this.cleanImageElement; 360 } 361 } 300 362 else // Create a new image. 301 363 { 302 364 // Image dialog -> create IMG element. … … 318 380 this.commitContent( IMAGE, this.imageElement ); 319 381 this.commitContent( LINK, this.linkElement ); 320 382 383 // Remove empty style attribute. 384 if( !this.imageElement.getAttribute( 'style' ) ) 385 this.imageElement.removeAttribute( 'style' ); 386 321 387 // Insert a new Image. 322 388 if ( !this.imageEditMode ) 323 389 { … … 358 424 var doc = this._.element.getDocument(); 359 425 this.addFocusable( doc.getById( 'btnResetSize' ), 5 ); 360 426 this.addFocusable( doc.getById( 'btnLockSizes' ), 5 ); 427 428 this.commitContent = commitContent; 361 429 }, 362 430 onHide : function() 363 431 { … … 372 440 this.originalElement.remove(); 373 441 this.originalElement = false; // Dialog is closed. 374 442 } 443 444 delete this.imageElement; 375 445 }, 376 446 contents : [ 377 447 { … … 534 604 labelLayout : 'horizontal', 535 605 label : editor.lang.image.width, 536 606 onKeyUp : onSizeChange, 607 onChange : function() 608 { 609 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 610 }, 537 611 validate: function() 538 612 { 539 613 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); … … 542 616 return !!aMatch; 543 617 }, 544 618 setup : setupDimension, 545 commit : function( type, element )619 commit : function( type, element, internalCommit ) 546 620 { 621 var value = this.getValue(); 547 622 if ( type == IMAGE ) 548 623 { 549 var value = this.getValue();550 624 if ( value ) 551 element.setAttribute( 'width', value ); 552 else if ( !value && this.isChanged() ) 553 element.removeAttribute( 'width' ); 625 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); 626 else if ( !value && this.isChanged( ) ) 627 element.removeStyle( 'width' ); 628 629 !internalCommit && element.removeAttribute( 'width' ); 554 630 } 555 631 else if ( type == PREVIEW ) 556 632 { 557 value = this.getValue();558 633 var aMatch = value.match( regexGetSize ); 559 634 if ( !aMatch ) 560 635 { … … 567 642 } 568 643 else if ( type == CLEANUP ) 569 644 { 570 element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work.571 645 element.removeAttribute( 'width' ); 572 646 element.removeStyle( 'width' ); 573 647 } … … 580 654 labelLayout : 'horizontal', 581 655 label : editor.lang.image.height, 582 656 onKeyUp : onSizeChange, 657 onChange : function() 658 { 659 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 660 }, 583 661 validate: function() 584 662 { 585 663 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); … … 588 666 return !!aMatch; 589 667 }, 590 668 setup : setupDimension, 591 commit : function( type, element )669 commit : function( type, element, internalCommit ) 592 670 { 671 var value = this.getValue(); 593 672 if ( type == IMAGE ) 594 673 { 595 var value = this.getValue();596 674 if ( value ) 597 element.setAttribute( 'height', value ); 598 else if ( !value && this.isChanged() ) 675 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); 676 else if ( !value && this.isChanged( ) ) 677 element.removeStyle( 'height' ); 678 679 if( !internalCommit && type == IMAGE ) 599 680 element.removeAttribute( 'height' ); 600 681 } 601 682 else if ( type == PREVIEW ) 602 683 { 603 value = this.getValue();604 684 var aMatch = value.match( regexGetSize ); 605 685 if ( !aMatch ) 606 686 { 607 687 var oImageOriginal = this.getDialog().originalElement; 608 688 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 609 element.setStyle( 'height', oImageOriginal.$.height + 'px');689 element.setStyle( 'height', oImageOriginal.$.height + 'px' ); 610 690 } 611 691 else 612 element.setStyle( 'height', value + 'px' );692 element.setStyle( 'height', value + 'px' ); 613 693 } 614 694 else if ( type == CLEANUP ) 615 695 { 616 element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work.617 696 element.removeAttribute( 'height' ); 618 697 element.removeStyle( 'height' ); 619 698 } … … 698 777 { 699 778 updatePreview( this.getDialog() ); 700 779 }, 780 onChange : function() 781 { 782 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 783 }, 701 784 validate: function() 702 785 { 703 786 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 706 789 setup : function( type, element ) 707 790 { 708 791 if ( type == IMAGE ) 709 this.setValue( element.getAttribute( 'border' ) ); 792 { 793 var value, 794 borderStyle = element.getStyle( 'border-width' ); 795 796 borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ ); 797 value = borderStyle && parseInt( borderStyle[ 1 ] ); 798 !value && ( value = element.getAttribute( 'border' ) ); 799 800 this.setValue( value ); 801 } 710 802 }, 711 commit : function( type, element )803 commit : function( type, element, internalCommit ) 712 804 { 713 if ( type == IMAGE ) 805 var value = parseInt( this.getValue() ); 806 if ( type == IMAGE || type == PREVIEW ) 714 807 { 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 } 808 if ( value ) 809 element.setStyle( 'border', CKEDITOR.tools.cssLength( value ) + ' solid' ); 810 else if ( !value && this.isChanged() ) 811 { 812 if( CKEDITOR.env.ie ) 813 { 814 element.removeStyle( 'border-width' ); 815 element.removeStyle( 'border-style' ); 816 element.removeStyle( 'border-color' ); 817 } 818 else 819 element.removeStyle( 'border' ); 820 } 821 822 if( !internalCommit && type == IMAGE ) 823 element.removeAttribute( 'border' ); 824 } 725 825 else if ( type == CLEANUP ) 726 826 { 727 827 element.removeAttribute( 'border' ); … … 740 840 { 741 841 updatePreview( this.getDialog() ); 742 842 }, 843 onChange : function() 844 { 845 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 846 }, 743 847 validate: function() 744 848 { 745 849 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 749 853 { 750 854 if ( type == IMAGE ) 751 855 { 752 var value = element.getAttribute( 'hspace' ); 753 if ( value != -1 ) // In IE empty = -1. 754 this.setValue( value ); 856 var value, 857 marginLeftPx, 858 marginRightPx, 859 marginLeftStyle = element.getStyle( 'margin-left' ), 860 marginRightStyle = element.getStyle( 'margin-right' ); 861 862 marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex ); 863 marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex ); 864 marginLeftPx = parseInt( marginLeftStyle ); 865 marginRightPx = parseInt( marginRightStyle ); 866 867 value = ( marginLeftPx == marginRightPx ) && marginLeftPx; 868 !value && ( value = element.getAttribute( 'hspace' ) ); 869 870 this.setValue( value ); 755 871 } 756 872 }, 757 commit : function( type, element )873 commit : function( type, element, internalCommit ) 758 874 { 759 if ( type == IMAGE ) 875 var value = parseInt( this.getValue() ); 876 if ( type == IMAGE || type == PREVIEW ) 760 877 { 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 } 878 if ( value ) 879 { 880 element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) ); 881 element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) ); 882 } 883 else if ( !value && this.isChanged( ) ) 884 { 885 element.removeStyle( 'margin-left' ); 886 element.removeStyle( 'margin-right' ); 887 } 888 889 if( !internalCommit && type == IMAGE ) 890 element.removeAttribute( 'hspace' ); 891 } 772 892 else if ( type == CLEANUP ) 773 893 { 774 894 element.removeAttribute( 'hspace' ); … … 788 908 { 789 909 updatePreview( this.getDialog() ); 790 910 }, 911 onChange : function() 912 { 913 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 914 }, 791 915 validate: function() 792 916 { 793 917 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 796 920 setup : function( type, element ) 797 921 { 798 922 if ( type == IMAGE ) 799 this.setValue( element.getAttribute( 'vspace' ) ); 923 { 924 var value, 925 marginTopPx, 926 marginBottomPx, 927 marginTopStyle = element.getStyle( 'margin-top' ), 928 marginBottomStyle = element.getStyle( 'margin-bottom' ); 929 930 marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex ); 931 marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex ); 932 marginTopPx = parseInt( marginTopStyle ); 933 marginBottomPx = parseInt( marginBottomStyle ); 934 935 value = ( marginTopPx == marginBottomPx ) && marginTopPx; 936 !value && ( value = element.getAttribute( 'vspace' ) ); 937 this.setValue( value ); 938 } 800 939 }, 801 commit : function( type, element )940 commit : function( type, element, internalCommit ) 802 941 { 803 if ( type == IMAGE ) 942 var value = parseInt( this.getValue() ); 943 if ( type == IMAGE || type == PREVIEW ) 804 944 { 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 } 945 if ( value ) 946 { 947 element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) ); 948 element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) ); 949 } 950 else if ( !value && this.isChanged( ) ) 951 { 952 element.removeStyle( 'margin-top' ); 953 element.removeStyle( 'margin-bottom' ); 954 } 955 956 if( !internalCommit && type == IMAGE ) 957 element.removeAttribute( 'vspace' ); 958 } 816 959 else if ( type == CLEANUP ) 817 960 { 818 961 element.removeAttribute( 'vspace' ); … … 833 976 [ 834 977 [ editor.lang.common.notSet , ''], 835 978 [ 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 979 [ editor.lang.image.alignRight , 'right'], 842 [ editor.lang.image.alignTextTop , 'textTop'], 843 [ editor.lang.image.alignTop , 'top'] 980 // Backward compatible with v2 on setup when specified as attribute value, 981 // while these values are no more available as select options. 982 // [ editor.lang.image.alignAbsBottom , 'absBottom'], 983 // [ editor.lang.image.alignAbsMiddle , 'absMiddle'], 984 // [ editor.lang.image.alignBaseline , 'baseline'], 985 // [ editor.lang.image.alignTextTop , 'text-top'], 986 // [ editor.lang.image.alignBottom , 'bottom'], 987 // [ editor.lang.image.alignMiddle , 'middle'], 988 // [ editor.lang.image.alignTop , 'top'] 844 989 ], 845 990 onChange : function() 846 991 { 847 992 updatePreview( this.getDialog() ); 993 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 848 994 }, 849 995 setup : function( type, element ) 850 996 { 851 997 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() ); 998 { 999 var value = element.getStyle( 'float' ); 1000 switch( value ) 1001 { 1002 // Ignore those unrelated values. 1003 case 'inherit': 1004 case 'none': 1005 value = ''; 1006 } 865 1007 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 1008 !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() ); 1009 this.setValue( value ); 878 1010 } 879 else if ( type == CLEANUP ) 880 { 881 element.removeAttribute( 'align' ); 882 } 883 } 884 } 1011 }, 1012 commit : function( type, element, internalCommit ) 1013 { 1014 var value = this.getValue(); 1015 if ( type == IMAGE || type == PREVIEW ) 1016 { 1017 if ( value ) 1018 element.setStyle( 'float', value ); 1019 else if ( !value && this.isChanged( ) ) 1020 element.removeStyle( 'float' ); 1021 1022 if( !internalCommit && type == IMAGE ) 1023 { 1024 value = ( element.getAttribute( 'align' ) || '' ).toLowerCase(); 1025 switch( value ) 1026 { 1027 // we should remove it only if it matches "left" or "right", 1028 // otherwise leave it intact. 1029 case 'left': 1030 case 'right': 1031 element.removeAttribute( 'align' ); 1032 } 1033 } 1034 } 1035 else if ( type == CLEANUP ) 1036 element.removeStyle( 'float' ); 1037 1038 } 1039 } 885 1040 ] 886 1041 } 887 1042 ] … … 1183 1338 }; 1184 1339 } 1185 1340 }, 1341 onChange : function () 1342 { 1343 commitInternally.call( this, 1344 [ 'info:cmbFloat', 'info:cmbAlign', 1345 'info:txtVSpace', 'info:txtHSpace', 1346 'info:txtBorder', 1347 'info:txtWidth', 'info:txtHeight' ] ); 1348 updatePreview( this ); 1349 }, 1186 1350 commit : function( type, element ) 1187 1351 { 1188 1352 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) 1189 1353 { 1190 1354 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 } 1355 } 1356 } 1357 } 1223 1358 ] 1224 1359 } 1225 1360 ]