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