From c0a42b87f2ef0803727636a1909633b2eca436ef Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 7 Jan 2014 14:49:13 +0100 Subject: [PATCH 1/7] Disabled showblocks styles for widget wrapper. --- plugins/showblocks/plugin.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/plugins/showblocks/plugin.js b/plugins/showblocks/plugin.js index b7c309dfb99..bff686767c5 100755 --- a/plugins/showblocks/plugin.js +++ b/plugins/showblocks/plugin.js @@ -132,6 +132,19 @@ } CKEDITOR.addCss( cssTemplate.replace( /%1/g, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' ).replace( /%2/g, 'cke_show_blocks ' ) + cssWithDir( 'ltr' ) + cssWithDir( 'rtl' ) ); + + // Disable showblocks styles for widget wrapper (#10884). + CKEDITOR.addCss( '.cke_show_blocks div.cke_widget_wrapper {' + + 'border:none;' + + 'padding-top:0;' + + 'background-image:none;' + + '}' + + '.cke_show_blocks.cke_contents_rtl div.cke_widget_wrapper{' + + 'padding-right:0;' + + '}' + + '.cke_show_blocks.cke_contents_ltr div.cke_widget_wrapper{' + + 'padding-left:0;' + + '}' ); }, init: function( editor ) { if ( editor.blockless ) From 6de03dddfd1c1f824e45780bc36731f16e393c32 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 7 Jan 2014 15:36:14 +0100 Subject: [PATCH 2/7] Shortened Showblocks plugin with generated CSS. --- plugins/showblocks/plugin.js | 124 ++++++++++------------------------- 1 file changed, 33 insertions(+), 91 deletions(-) diff --git a/plugins/showblocks/plugin.js b/plugins/showblocks/plugin.js index bff686767c5..6093fd7caf7 100755 --- a/plugins/showblocks/plugin.js +++ b/plugins/showblocks/plugin.js @@ -38,100 +38,42 @@ icons: 'showblocks,showblocks-rtl', // %REMOVE_LINE_CORE% hidpi: true, // %REMOVE_LINE_CORE% onLoad: function() { - var cssTemplate = '.%2 p,' + - '.%2 div,' + - '.%2 pre,' + - '.%2 address,' + - '.%2 blockquote,' + - '.%2 h1,' + - '.%2 h2,' + - '.%2 h3,' + - '.%2 h4,' + - '.%2 h5,' + - '.%2 h6' + - '{' + - 'background-repeat: no-repeat;' + - 'border: 1px dotted gray;' + - 'padding-top: 8px;' + - '}' + - - '.%2 p' + - '{' + - '%1p.png);' + - '}' + - - '.%2 div' + - '{' + - '%1div.png);' + - '}' + - - '.%2 pre' + - '{' + - '%1pre.png);' + - '}' + - - '.%2 address' + - '{' + - '%1address.png);' + - '}' + - - '.%2 blockquote' + - '{' + - '%1blockquote.png);' + - '}' + - - '.%2 h1' + - '{' + - '%1h1.png);' + - '}' + - - '.%2 h2' + - '{' + - '%1h2.png);' + - '}' + - - '.%2 h3' + - '{' + - '%1h3.png);' + - '}' + - - '.%2 h4' + - '{' + - '%1h4.png);' + - '}' + - - '.%2 h5' + - '{' + - '%1h5.png);' + - '}' + - - '.%2 h6' + - '{' + - '%1h6.png);' + + var tags = [ 'p', 'div', 'pre', 'address', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], + cssStd = cssImg = cssLtr = cssRtl = '', + path = CKEDITOR.getUrl( this.path ), + tag, trailing; + + while ( ( tag = tags.pop() ) ) { + trailing = tags.length ? ',' : ''; + + cssStd += '.cke_show_blocks ' + tag + trailing; + cssLtr += '.cke_show_blocks.cke_contents_ltr ' + tag + trailing; + cssRtl += '.cke_show_blocks.cke_contents_rtl ' + tag + trailing; + cssImg += '.cke_show_blocks ' + tag + '{' + + 'background-image:url(' + path + 'images/block_' + tag + '.png )' + '}'; - - // Styles with contents direction awareness. - function cssWithDir( dir ) { - var template = '.%1.%2 p,' + - '.%1.%2 div,' + - '.%1.%2 pre,' + - '.%1.%2 address,' + - '.%1.%2 blockquote,' + - '.%1.%2 h1,' + - '.%1.%2 h2,' + - '.%1.%2 h3,' + - '.%1.%2 h4,' + - '.%1.%2 h5,' + - '.%1.%2 h6' + - '{' + - 'background-position: top %3;' + - 'padding-%3: 8px;' + - '}'; - - return template.replace( /%1/g, 'cke_show_blocks' ).replace( /%2/g, 'cke_contents_' + dir ).replace( /%3/g, dir == 'rtl' ? 'right' : 'left' ); } - CKEDITOR.addCss( cssTemplate.replace( /%1/g, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' ).replace( /%2/g, 'cke_show_blocks ' ) + cssWithDir( 'ltr' ) + cssWithDir( 'rtl' ) ); + // .cke_show_blocks p { ... } + cssStd += '{' + + 'background-repeat:no-repeat;' + + 'border:1px dotted gray;' + + 'padding-top:8px;' + + '}'; + + // .cke_show_blocks.cke_contents_ltr p { ... } + cssLtr += '{' + + 'background-position:top left;' + + 'padding-left:8px;' + + '}'; + + // .cke_show_blocks.cke_contents_rtl p { ... } + cssRtl += '{' + + 'background-position:top right;' + + 'padding-right:8px;' + + '}'; + + CKEDITOR.addCss( cssStd.concat( cssImg, cssLtr, cssRtl ) ); // Disable showblocks styles for widget wrapper (#10884). CKEDITOR.addCss( '.cke_show_blocks div.cke_widget_wrapper {' + From 50e03bc71d40343840c22ea6109737dc4a4dbb72 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 9 Jan 2014 13:24:14 +0100 Subject: [PATCH 3/7] Limit Showblocks styles to editable elements only. --- plugins/showblocks/plugin.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/showblocks/plugin.js b/plugins/showblocks/plugin.js index 6093fd7caf7..0b3fe03ee00 100755 --- a/plugins/showblocks/plugin.js +++ b/plugins/showblocks/plugin.js @@ -75,16 +75,16 @@ CKEDITOR.addCss( cssStd.concat( cssImg, cssLtr, cssRtl ) ); - // Disable showblocks styles for widget wrapper (#10884). - CKEDITOR.addCss( '.cke_show_blocks div.cke_widget_wrapper {' + + // Disable showblocks styles for non-editables (#10884). + CKEDITOR.addCss( '.cke_show_blocks [contenteditable=false]{' + 'border:none;' + 'padding-top:0;' + 'background-image:none;' + '}' + - '.cke_show_blocks.cke_contents_rtl div.cke_widget_wrapper{' + + '.cke_show_blocks.cke_contents_rtl [contenteditable=false]{' + 'padding-right:0;' + '}' + - '.cke_show_blocks.cke_contents_ltr div.cke_widget_wrapper{' + + '.cke_show_blocks.cke_contents_ltr [contenteditable=false]{' + 'padding-left:0;' + '}' ); }, From 4f2907d35f89cff07a6dda688bf8434b9a3eed25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Reinmar=20Koszuli=C5=84ski?= Date: Fri, 10 Jan 2014 14:18:22 +0100 Subject: [PATCH 4/7] Prevent showblocks application using :not(), what saves us from using CSS reset. --- plugins/showblocks/plugin.js | 42 ++++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/plugins/showblocks/plugin.js b/plugins/showblocks/plugin.js index 0b3fe03ee00..3914c9fb958 100755 --- a/plugins/showblocks/plugin.js +++ b/plugins/showblocks/plugin.js @@ -41,15 +41,20 @@ var tags = [ 'p', 'div', 'pre', 'address', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], cssStd = cssImg = cssLtr = cssRtl = '', path = CKEDITOR.getUrl( this.path ), + // #10884 don't apply showblocks styles to non-editable elements and chosen ones. + // IE8 does not support :not() pseudoclass, so we need to reset showblocks rather + // than 'prevent' its application. We do that by additional rules. + supportsNotPseudoclass = !( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ), + notDisabled = supportsNotPseudoclass ? ':not([contenteditable=false]):not(.cke_show_blocks_off)' : '', tag, trailing; while ( ( tag = tags.pop() ) ) { trailing = tags.length ? ',' : ''; - cssStd += '.cke_show_blocks ' + tag + trailing; - cssLtr += '.cke_show_blocks.cke_contents_ltr ' + tag + trailing; - cssRtl += '.cke_show_blocks.cke_contents_rtl ' + tag + trailing; - cssImg += '.cke_show_blocks ' + tag + '{' + + cssStd += '.cke_show_blocks ' + tag + notDisabled + trailing; + cssLtr += '.cke_show_blocks.cke_contents_ltr ' + tag + notDisabled + trailing; + cssRtl += '.cke_show_blocks.cke_contents_rtl ' + tag + notDisabled + trailing; + cssImg += '.cke_show_blocks ' + tag + notDisabled + '{' + 'background-image:url(' + path + 'images/block_' + tag + '.png )' + '}'; } @@ -75,18 +80,23 @@ CKEDITOR.addCss( cssStd.concat( cssImg, cssLtr, cssRtl ) ); - // Disable showblocks styles for non-editables (#10884). - CKEDITOR.addCss( '.cke_show_blocks [contenteditable=false]{' + - 'border:none;' + - 'padding-top:0;' + - 'background-image:none;' + - '}' + - '.cke_show_blocks.cke_contents_rtl [contenteditable=false]{' + - 'padding-right:0;' + - '}' + - '.cke_show_blocks.cke_contents_ltr [contenteditable=false]{' + - 'padding-left:0;' + - '}' ); + // [IE8] Reset showblocks styles for non-editables and chosen elements, because + // it could not be done using :not() pseudoclass (#10884). + if ( !supportsNotPseudoclass ) { + CKEDITOR.addCss( + '.cke_show_blocks [contenteditable=false],.cke_show_blocks .cke_show_blocks_off{' + + 'border:none;' + + 'padding-top:0;' + + 'background-image:none;' + + '}' + + '.cke_show_blocks.cke_contents_rtl [contenteditable=false],.cke_show_blocks.cke_contents_rtl .cke_show_blocks_off{' + + 'padding-right:0;' + + '}' + + '.cke_show_blocks.cke_contents_ltr [contenteditable=false],.cke_show_blocks.cke_contents_ltr .cke_show_blocks_off{' + + 'padding-left:0;' + + '}' + ); + } }, init: function( editor ) { if ( editor.blockless ) From eea809105c19893de3d2dbd9e29878862cd3a7a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Reinmar=20Koszuli=C5=84ski?= Date: Fri, 10 Jan 2014 14:28:49 +0100 Subject: [PATCH 5/7] Saved few bytes by CSS compression. --- plugins/showblocks/plugin.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/plugins/showblocks/plugin.js b/plugins/showblocks/plugin.js index 3914c9fb958..de0f0320de1 100755 --- a/plugins/showblocks/plugin.js +++ b/plugins/showblocks/plugin.js @@ -55,7 +55,7 @@ cssLtr += '.cke_show_blocks.cke_contents_ltr ' + tag + notDisabled + trailing; cssRtl += '.cke_show_blocks.cke_contents_rtl ' + tag + notDisabled + trailing; cssImg += '.cke_show_blocks ' + tag + notDisabled + '{' + - 'background-image:url(' + path + 'images/block_' + tag + '.png )' + + 'background-image:url(' + path + 'images/block_' + tag + '.png)' + '}'; } @@ -63,19 +63,19 @@ cssStd += '{' + 'background-repeat:no-repeat;' + 'border:1px dotted gray;' + - 'padding-top:8px;' + + 'padding-top:8px' + '}'; // .cke_show_blocks.cke_contents_ltr p { ... } cssLtr += '{' + 'background-position:top left;' + - 'padding-left:8px;' + + 'padding-left:8px' + '}'; // .cke_show_blocks.cke_contents_rtl p { ... } cssRtl += '{' + 'background-position:top right;' + - 'padding-right:8px;' + + 'padding-right:8px' + '}'; CKEDITOR.addCss( cssStd.concat( cssImg, cssLtr, cssRtl ) ); @@ -87,13 +87,13 @@ '.cke_show_blocks [contenteditable=false],.cke_show_blocks .cke_show_blocks_off{' + 'border:none;' + 'padding-top:0;' + - 'background-image:none;' + + 'background-image:none' + '}' + '.cke_show_blocks.cke_contents_rtl [contenteditable=false],.cke_show_blocks.cke_contents_rtl .cke_show_blocks_off{' + - 'padding-right:0;' + + 'padding-right:0' + '}' + '.cke_show_blocks.cke_contents_ltr [contenteditable=false],.cke_show_blocks.cke_contents_ltr .cke_show_blocks_off{' + - 'padding-left:0;' + + 'padding-left:0' + '}' ); } From 711b563173f7351d40460fd6240eb840f239ed53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Reinmar=20Koszuli=C5=84ski?= Date: Fri, 10 Jan 2014 14:33:15 +0100 Subject: [PATCH 6/7] Strict mode will tell you the truth. --- plugins/showblocks/plugin.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/plugins/showblocks/plugin.js b/plugins/showblocks/plugin.js index de0f0320de1..75e0d936bce 100755 --- a/plugins/showblocks/plugin.js +++ b/plugins/showblocks/plugin.js @@ -10,6 +10,8 @@ */ ( function() { + 'use strict'; + var commandDefinition = { readOnly: 1, preserveState: true, @@ -39,7 +41,7 @@ hidpi: true, // %REMOVE_LINE_CORE% onLoad: function() { var tags = [ 'p', 'div', 'pre', 'address', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], - cssStd = cssImg = cssLtr = cssRtl = '', + cssStd, cssImg, cssLtr, cssRtl, path = CKEDITOR.getUrl( this.path ), // #10884 don't apply showblocks styles to non-editable elements and chosen ones. // IE8 does not support :not() pseudoclass, so we need to reset showblocks rather @@ -48,6 +50,8 @@ notDisabled = supportsNotPseudoclass ? ':not([contenteditable=false]):not(.cke_show_blocks_off)' : '', tag, trailing; + cssStd = cssImg = cssLtr = cssRtl = ''; + while ( ( tag = tags.pop() ) ) { trailing = tags.length ? ',' : ''; @@ -122,9 +126,6 @@ // Refresh the command on focus/blur in inline. if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE ) { - function onFocusBlur() { - command.refresh( editor ); - } editor.on( 'focus', onFocusBlur ); editor.on( 'blur', onFocusBlur ); } @@ -134,6 +135,10 @@ if ( command.state != CKEDITOR.TRISTATE_DISABLED ) command.refresh( editor ); } ); + + function onFocusBlur() { + command.refresh( editor ); + } } } ); } )(); From dec269f1ed46eb3df5e5bebca3b3fa45006b6ed6 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 10 Jan 2014 17:46:18 +0100 Subject: [PATCH 7/7] Changelog entry. --- CHANGES.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index ad117be715b..02be2eeeee3 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -24,7 +24,7 @@ CKEditor 4 Changelog * [#11140](http://dev.ckeditor.com/ticket/11140): [IE11] Fixed: Anchors are not draggable. * [#11379](http://dev.ckeditor.com/ticket/11379): Changed default contents' `line-height` to unitless values to avoid huge text overlapping (like in [#9696](http://dev.ckeditor.com/ticket/9696)). * [#10787](http://dev.ckeditor.com/ticket/10787): [Firefox] Fixed: Broken replacement of text while pasting into div-based editor. - +* [#10884](http://dev.ckeditor.com/ticket/10884): Widgets integration with [Showblocks](http://ckeditor.com/addon/showblocks) plugin. ## CKEditor 4.3.1