vanilla ckeditor-3.5

[ckeditor.git] / _source / plugins / colorbutton / plugin.js

diff --git a/_source/plugins/colorbutton/plugin.js b/_source/plugins/colorbutton/plugin.js
index 0452230..0fb8c05 100644 (file)
--- a/_source/plugins/colorbutton/plugin.js
+++ b/_source/plugins/colorbutton/plugin.js
@@ -22,6 +22,7 @@ CKEDITOR.plugins.add( 'colorbutton',
 \r
                function addButton( name, type, title )\r
                {\r
+                       var colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox';\r
                        editor.ui.add( name, CKEDITOR.UI_PANELBUTTON,\r
                                {\r
                                        label : title,\r
@@ -39,10 +40,12 @@ CKEDITOR.plugins.add( 'colorbutton',
                                        {\r
                                                block.autoSize = true;\r
                                                block.element.addClass( 'cke_colorblock' );\r
-                                               block.element.setHtml( renderColors( panel, type ) );\r
+                                               block.element.setHtml( renderColors( panel, type, colorBoxId ) );\r
                                                // The block should not have scrollbars (#5933, #6056)\r
                                                block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );\r
 \r
+                                               CKEDITOR.ui.fire( 'ready', this );\r
+\r
                                                var keys = block.keys;\r
                                                var rtl = editor.lang.dir == 'rtl';\r
                                                keys[ rtl ? 37 : 39 ]   = 'next';                                       // ARROW-RIGHT\r
@@ -52,12 +55,37 @@ CKEDITOR.plugins.add( 'colorbutton',
                                                keys[ 38 ]      = 'prev';                                       // ARROW-UP\r
                                                keys[ CKEDITOR.SHIFT + 9 ]      = 'prev';       // SHIFT + TAB\r
                                                keys[ 32 ]      = 'click';                                      // SPACE\r
+                                       },\r
+\r
+                                       // The automatic colorbox should represent the real color (#6010)\r
+                                       onOpen : function()\r
+                                       {\r
+                                               var selection = editor.getSelection(),\r
+                                                       block = selection && selection.getStartElement(),\r
+                                                       path = new CKEDITOR.dom.elementPath( block ),\r
+                                                       color;\r
+\r
+                                               // Find the closest block element.\r
+                                               block = path.block || path.blockLimit;\r
+\r
+                                               // The background color might be transparent. In that case, look up the color in the DOM tree.\r
+                                               do\r
+                                               {\r
+                                                       color = block && block.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) || 'transparent';\r
+                                               }\r
+                                               while ( type == 'back' && color == 'transparent' && ( block = block.getParent() ) );\r
+\r
+                                               // The box should never be transparent.\r
+                                               if ( !color || color == 'transparent' )\r
+                                                       color = '#ffffff';\r
+\r
+                                               this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', color );\r
                                        }\r
                                });\r
                }\r
 \r
 \r
-               function renderColors( panel, type )\r
+               function renderColors( panel, type, colorBoxId )\r
                {\r
                        var output = [],\r
                                colors = config.colorButton_colors.split( ',' ),\r
@@ -100,10 +128,18 @@ CKEDITOR.plugins.add( 'colorbutton',
                                                var colorStyle = config['colorButton_' + type + 'Style'];\r
 \r
                                                colorStyle.childRule = type == 'back' ?\r
-                                                       // It's better to apply background color as the innermost style. (#3599)\r
-                                                       function(){ return false; } :\r
-                                                       // Fore color style must be applied inside links instead of around it.\r
-                                                       function( element ){ return element.getName() != 'a'; };\r
+                                                       function( element )\r
+                                                       {\r
+                                                               // It's better to apply background color as the innermost style. (#3599)\r
+                                                               // Except for "unstylable elements". (#6103)\r
+                                                               return isUnstylable( element );\r
+                                                       }\r
+                                                       :\r
+                                                       function( element )\r
+                                                       {\r
+                                                               // Fore color style must be applied inside links instead of around it.\r
+                                                               return element.getName() != 'a' || isUnstylable( element );\r
+                                                       };\r
 \r
                                                new CKEDITOR.style( colorStyle, { color : color } ).apply( editor.document );\r
                                        }\r
@@ -121,7 +157,7 @@ CKEDITOR.plugins.add( 'colorbutton',
                                        '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +\r
                                                '<tr>' +\r
                                                        '<td>' +\r
-                                                               '<span class="cke_colorbox" style="background-color:#000"></span>' +\r
+                                                               '<span class="cke_colorbox" id="', colorBoxId, '"></span>' +\r
                                                        '</td>' +\r
                                                        '<td colspan=7 align=center>',\r
                                                                lang.auto,\r
@@ -181,6 +217,11 @@ CKEDITOR.plugins.add( 'colorbutton',
 \r
                        return output.join( '' );\r
                }\r
+\r
+               function isUnstylable( ele )\r
+               {\r
+                       return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-cke-nostyle' );\r
+               }\r
        }\r
 });\r
 \r