_source/plugins/showblocks/plugin.js

   1 /*
   2 Copyright (c) 2003-2011, 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  */