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 exec : function ( editor ) 92 { 93 var isOn = ( this.state == CKEDITOR.TRISTATE_ON ); 94 var funcName = isOn ? 'removeClass' : 'addClass'; 95 editor.document.getBody()[funcName]( 'cke_show_blocks' ); 96 97 this.toggleState(); 98 editor._.showBlocks = !isOn; 99 } 100 }; 101 102 CKEDITOR.plugins.add( 'showblocks', 103 { 104 requires : [ 'wysiwygarea' ], 105 106 init : function( editor ) 107 { 108 var command = editor.addCommand( 'showblocks', commandDefinition ); 109 110 editor.addCss( cssTemplate 111 .replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' ) 112 .replace( cssClassRegex, 'cke_show_blocks ' ) ); 113 114 // Set a flag in the editor object for remembering the show block state on 115 // mode switches. 116 editor._.showBlocks = editor.config.startupOutlineBlocks; 117 118 editor.ui.addButton( 'ShowBlocks', 119 { 120 label : editor.lang.showBlocks, 121 command : 'showblocks' 122 } ); 123 124 editor.on( 'contentDom', function() 125 { 126 // Restore show blocks state after mode switches. 127 command.setState( CKEDITOR.TRISTATE_OFF ); 128 if ( this._.showBlocks ) 129 command.exec(); 130 } ); 131 } 132 }); 133 } )(); 134 135 CKEDITOR.config.startupOutlineBlocks = false; 136