1 /*
  2 Copyright (c) 2003-2012, 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 			'background-position: top %3;'+
 28 			'border: 1px dotted gray;'+
 29 			'padding-top: 8px;'+
 30 			'padding-%3: 8px;'+
 31 		'}'+
 32 
 33 		'.%2 p'+
 34 		'{'+
 35 			'%1p.png);'+
 36 		'}'+
 37 
 38 		'.%2 div'+
 39 		'{'+
 40 			'%1div.png);'+
 41 		'}'+
 42 
 43 		'.%2 pre'+
 44 		'{'+
 45 			'%1pre.png);'+
 46 		'}'+
 47 
 48 		'.%2 address'+
 49 		'{'+
 50 			'%1address.png);'+
 51 		'}'+
 52 
 53 		'.%2 blockquote'+
 54 		'{'+
 55 			'%1blockquote.png);'+
 56 		'}'+
 57 
 58 		'.%2 h1'+
 59 		'{'+
 60 			'%1h1.png);'+
 61 		'}'+
 62 
 63 		'.%2 h2'+
 64 		'{'+
 65 			'%1h2.png);'+
 66 		'}'+
 67 
 68 		'.%2 h3'+
 69 		'{'+
 70 			'%1h3.png);'+
 71 		'}'+
 72 
 73 		'.%2 h4'+
 74 		'{'+
 75 			'%1h4.png);'+
 76 		'}'+
 77 
 78 		'.%2 h5'+
 79 		'{'+
 80 			'%1h5.png);'+
 81 		'}'+
 82 
 83 		'.%2 h6'+
 84 		'{'+
 85 			'%1h6.png);'+
 86 		'}';
 87 
 88 	var cssTemplateRegex = /%1/g, cssClassRegex = /%2/g, backgroundPositionRegex = /%3/g;
 89 
 90 	var commandDefinition =
 91 	{
 92 		readOnly : 1,
 93 		preserveState : true,
 94 		editorFocus : false,
 95 
 96 		exec : function ( editor )
 97 		{
 98 			this.toggleState();
 99 			this.refresh( editor );
100 		},
101 
102 		refresh : function( editor )
103 		{
104 			if ( editor.document )
105 			{
106 				var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';
107 				editor.document.getBody()[ funcName ]( 'cke_show_blocks' );
108 			}
109 		}
110 	};
111 
112 	CKEDITOR.plugins.add( 'showblocks',
113 	{
114 		requires : [ 'wysiwygarea' ],
115 
116 		init : function( editor )
117 		{
118 			var command = editor.addCommand( 'showblocks', commandDefinition );
119 			command.canUndo = false;
120 
121 			if ( editor.config.startupOutlineBlocks )
122 				command.setState( CKEDITOR.TRISTATE_ON );
123 
124 			editor.addCss( cssTemplate
125 				.replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' )
126 				.replace( cssClassRegex, 'cke_show_blocks ' )
127 				.replace( backgroundPositionRegex, editor.lang.dir == 'rtl' ? 'right' : 'left' ) );
128 
129 			editor.ui.addButton( 'ShowBlocks',
130 				{
131 					label : editor.lang.showBlocks,
132 					command : 'showblocks'
133 				});
134 
135 			// Refresh the command on setData.
136 			editor.on( 'mode', function()
137 				{
138 					if ( command.state != CKEDITOR.TRISTATE_DISABLED )
139 						command.refresh( editor );
140 				});
141 
142 			// Refresh the command on setData.
143 			editor.on( 'contentDom', function()
144 				{
145 					if ( command.state != CKEDITOR.TRISTATE_DISABLED )
146 						command.refresh( editor );
147 				});
148 		}
149 	});
150 } )();
151 
152 /**
153  * Whether to automaticaly enable the "show block" command when the editor
154  * loads. (StartupShowBlocks in FCKeditor)
155  * @name CKEDITOR.config.startupOutlineBlocks
156  * @type Boolean
157  * @default false
158  * @example
159  * config.startupOutlineBlocks = true;
160  */
161