      1 /*
      2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
      3 For licensing, see LICENSE.html or http://ckeditor.com/license
      4 */
      5
      6 /**
      7  * @fileOverview The "showblocks" plugin. Enable it will make all block level
      8  *               elements being decorated with a border and the element name
      9  *               displayed on the left-right corner.
     10  */
     11
     12 (function()
     13 {
     14 	var cssTemplate = '.%2 p,'+
     15 		'.%2 div,'+
     16 		'.%2 pre,'+
     17 		'.%2 address,'+
     18 		'.%2 blockquote,'+
     19 		'.%2 h1,'+
     20 		'.%2 h2,'+
     21 		'.%2 h3,'+
     22 		'.%2 h4,'+
     23 		'.%2 h5,'+
     24 		'.%2 h6'+
     25 		'{'+
     26 			'background-repeat: no-repeat;'+
     27 			'border: 1px dotted gray;'+
     28 			'padding-top: 8px;'+
     29 			'padding-left: 8px;'+
     30 		'}'+
     31
     32 		'.%2 p'+
     33 		'{'+
     34 			'%1p.png);'+
     35 		'}'+
     36
     37 		'.%2 div'+
     38 		'{'+
     39 			'%1div.png);'+
     40 		'}'+
     41
     42 		'.%2 pre'+
     43 		'{'+
     44 			'%1pre.png);'+
     45 		'}'+
     46
     47 		'.%2 address'+
     48 		'{'+
     49 			'%1address.png);'+
     50 		'}'+
     51
     52 		'.%2 blockquote'+
     53 		'{'+
     54 			'%1blockquote.png);'+
     55 		'}'+
     56
     57 		'.%2 h1'+
     58 		'{'+
     59 			'%1h1.png);'+
     60 		'}'+
     61
     62 		'.%2 h2'+
     63 		'{'+
     64 			'%1h2.png);'+
     65 		'}'+
     66
     67 		'.%2 h3'+
     68 		'{'+
     69 			'%1h3.png);'+
     70 		'}'+
     71
     72 		'.%2 h4'+
     73 		'{'+
     74 			'%1h4.png);'+
     75 		'}'+
     76
     77 		'.%2 h5'+
     78 		'{'+
     79 			'%1h5.png);'+
     80 		'}'+
     81
     82 		'.%2 h6'+
     83 		'{'+
     84 			'%1h6.png);'+
     85 		'}';
     86
     87 	var cssTemplateRegex = /%1/g, cssClassRegex = /%2/g;
     88
     89 	var commandDefinition =
     90 	{
     91 		preserveState : true,
     92
     93 		exec : function ( editor )
     94 		{
     95 			this.toggleState();
     96 			this.refresh( editor );
     97 		},
     98
     99 		refresh : function( editor )
    100 		{
    101 			var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';
    102 			editor.document.getBody()[ funcName ]( 'cke_show_blocks' );
    103 		}
    104 	};
    105
    106 	CKEDITOR.plugins.add( 'showblocks',
    107 	{
    108 		requires : [ 'wysiwygarea' ],
    109
    110 		init : function( editor )
    111 		{
    112 			var command = editor.addCommand( 'showblocks', commandDefinition );
    113 			command.canUndo = false;
    114
    115 			if ( editor.config.startupOutlineBlocks )
    116 				command.setState( CKEDITOR.TRISTATE_ON );
    117
    118 			editor.addCss( cssTemplate
    119 				.replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' )
    120 				.replace( cssClassRegex, 'cke_show_blocks ' ) );
    121
    122 			editor.ui.addButton( 'ShowBlocks',
    123 				{
    124 					label : editor.lang.showBlocks,
    125 					command : 'showblocks'
    126 				});
    127
    128 			// Refresh the command on setData.
    129 			editor.on( 'mode', function()
    130 				{
    131 					if ( command.state != CKEDITOR.TRISTATE_DISABLED )
    132 						command.refresh( editor );
    133 				});
    134
    135 			// Refresh the command on setData.
    136 			editor.on( 'contentDom', function()
    137 				{
    138 					if ( command.state != CKEDITOR.TRISTATE_DISABLED )
    139 						command.refresh( editor );
    140 				});
    141 		}
    142 	});
    143 } )();
    144
    145 CKEDITOR.config.startupOutlineBlocks = false;
    146