Ticket #2869: 2869_4.patch

_source/lang/en.js

@@ -429 +429 @@
                 insertOption: 'Replace actual contents',
                 selectPromptMsg: 'Please select the template to open in the editor',
                 emptyListMsg : '(No templates defined)'
-        }
+        },
+
+        showBlocks : 'Show Blocks'
 };

_source/plugins/toolbar/plugin.js

@@ -219 +219 @@
                 'SelectAll', 'RemoveFormat', '-',
                 'Link', 'Unlink', 'Anchor', '-',
                 'Image', '-',
-                'Table', 'Smiley', 'HorizontalRule', 'SpecialChar', 'PageBreak'
+                'Table', 'Smiley', 'HorizontalRule', 'SpecialChar', 'PageBreak', '-',
+                'ShowBlocks'
         ]
 ];

_source/plugins/showblocks/plugin.js

@@ +1 @@
+/*
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+/**
+ * @fileOverview The "showblocks" plugin. Enable it will make all block level
+ *               elements being decorated with a border and the element name
+ *               displayed on the left-right corner.
+ */
+
+(function()
+{
+        var cssTemplate = 
+        [
+                '.cke_show_blocks p,',
+                '.cke_show_blocks div,',
+                '.cke_show_blocks pre,',
+                '.cke_show_blocks address,',
+                '.cke_show_blocks blockquote,',
+                '.cke_show_blocks h1,',
+                '.cke_show_blocks h2,',
+                '.cke_show_blocks h3,',
+                '.cke_show_blocks h4,',
+                '.cke_show_blocks h5,',
+                '.cke_show_blocks h6',
+                '{',
+                        'background-repeat: no-repeat;',
+                        'border: 1px dotted gray;',
+                        'padding-top: 8px;',
+                        'padding-left: 8px;',
+                '}',
+
+                '.cke_show_blocks p',
+                '{',
+                        'background-image: url(%1images/block_p.png);',
+                '}',
+
+                '.cke_show_blocks div',
+                '{',
+                        'background-image: url(%1images/block_div.png);',
+                '}',
+
+                '.cke_show_blocks pre',
+                '{',
+                        'background-image: url(%1images/block_pre.png);',
+                '}',
+
+                '.cke_show_blocks address',
+                '{',
+                        'background-image: url(%1images/block_address.png);',
+                '}',
+
+                '.cke_show_blocks blockquote',
+                '{',
+                        'background-image: url(%1images/block_blockquote.png);',
+                '}',
+
+                '.cke_show_blocks h1',
+                '{',
+                        'background-image: url(%1images/block_h1.png);',
+                '}',
+
+                '.cke_show_blocks h2',
+                '{',
+                        'background-image: url(%1images/block_h2.png);',
+                '}',
+
+                '.cke_show_blocks h3',
+                '{',
+                        'background-image: url(%1images/block_h3.png);',
+                '}',
+
+                '.cke_show_blocks h4',
+                '{',
+                        'background-image: url(%1images/block_h4.png);',
+                '}',
+
+                '.cke_show_blocks h5',
+                '{',
+                        'background-image: url(%1images/block_h5.png);',
+                '}',
+
+                '.cke_show_blocks h6',
+                '{',
+                        'background-image: url(%1images/block_h6.png);',
+                '}'
+        ].join( '\n' );
+
+        var cssTemplateRegex = /%1/g;
+
+        CKEDITOR.plugins.add( 'showblocks',
+        {
+                requires : [ 'wysiwygarea' ],
+
+                init : function( editor )
+                {
+                        editor.addCommand( 'showblocks' ,
+                        {
+                                exec : function ( editor )
+                                {
+                                        if ( this.state != CKEDITOR.TRISTATE_DISABLED )
+                                        {
+                                                var funcName = this.state == CKEDITOR.TRISTATE_ON ? 'removeClass' : 'addClass';
+                                                editor.document.getBody()[funcName]( 'cke_show_blocks' );
+                                                this.toggleState();
+                                                editor._.showBlocks = ( this.state == CKEDITOR.TRISTATE_ON );
+                                        }
+                                }
+                        });
+
+                        editor.addCss( cssTemplate.replace( cssTemplateRegex, CKEDITOR.getUrl( this.path ) ) );
+
+                        // Set a flag in the editor object for remembering the show block state on
+                        // mode switches.
+                        editor._.showBlocks = editor.config.startupOutlineBlocks;
+
+                        editor.ui.addButton( 'ShowBlocks',
+                                {
+                                        label : editor.lang.showBlocks,
+                                        command : 'showblocks'
+                                } );
+                        
+                        editor.on( 'contentDom', function()
+                        {
+                                // Restore show blocks state after mode switches.
+                                this.getCommand( 'showblocks' ).setState( CKEDITOR.TRISTATE_OFF );
+                                if ( this._.showBlocks )
+                                        this.getCommand( 'showblocks' ).exec();
+                        } );
+                }
+        });
+} )();
+
+CKEDITOR.config.startupOutlineBlocks = false;

_source/skins/default/toolbar.css

@@ -310 +310 @@
 {
         background-position: 0 -816px;
 }
+.cke_skin_default a.cke_button_showblocks .cke_icon
+{
+        background-position: 0 -1136px;
+}
 
 .cke_skin_default a.cke_button_select .cke_icon
 {

_source/core/config.js

@@ -147 +147 @@
          * config.plugins = 'basicstyles,button,htmldataprocessor,toolbar,wysiwygarea';
          */
 
-        plugins : 'basicstyles,blockquote,button,clipboard,elementspath,find,horizontalrule,htmldataprocessor,image,indent,justify,keystrokes,link,list,newpage,pagebreak,pastefromword,pastetext,preview,print,removeformat,smiley,sourcearea,table,specialchar,tab,templates,toolbar,undo,wysiwygarea',
+        plugins : 'basicstyles,blockquote,button,clipboard,elementspath,find,horizontalrule,htmldataprocessor,image,indent,justify,keystrokes,link,list,newpage,pagebreak,pastefromword,pastetext,preview,print,removeformat,smiley,showblocks,sourcearea,table,specialchar,tab,templates,toolbar,undo,wysiwygarea',
 
         /**
          * The theme to be used to build the UI.

_source/core/command.js

@@ -37 +37 @@
                 this.fire( 'state' );
 
                 return true;
+        },
+
+        toggleState : function()
+        {
+                if ( this.state == CKEDITOR.TRISTATE_OFF )
+                        this.setState( CKEDITOR.TRISTATE_ON );
+                else if ( this.state == CKEDITOR.TRISTATE_ON )
+                        this.setState( CKEDITOR.TRISTATE_OFF );
         }
 }