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