[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, 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          editorFocus : false,
  93  
  94          exec : function ( editor )
  95          {
  96              this.toggleState();
  97              this.refresh( editor );
  98          },
  99  
 100          refresh : function( editor )
 101          {
 102              var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';
 103              editor.document.getBody()[ funcName ]( 'cke_show_blocks' );
 104          }
 105      };
 106  
 107      CKEDITOR.plugins.add( 'showblocks',
 108      {
 109          requires : [ 'wysiwygarea' ],
 110  
 111          init : function( editor )
 112          {
 113              var command = editor.addCommand( 'showblocks', commandDefinition );
 114              command.canUndo = false;
 115  
 116              if ( editor.config.startupOutlineBlocks )
 117                  command.setState( CKEDITOR.TRISTATE_ON );
 118  
 119              editor.addCss( cssTemplate
 120                  .replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' )
 121                  .replace( cssClassRegex, 'cke_show_blocks ' ) );
 122  
 123              editor.ui.addButton( 'ShowBlocks',
 124                  {
 125                      label : editor.lang.showBlocks,
 126                      command : 'showblocks'
 127                  });
 128  
 129              // Refresh the command on setData.

 130              editor.on( 'mode', function()
 131                  {
 132                      if ( command.state != CKEDITOR.TRISTATE_DISABLED )
 133                          command.refresh( editor );
 134                  });
 135  
 136              // Refresh the command on setData.

 137              editor.on( 'contentDom', function()
 138                  {
 139                      if ( command.state != CKEDITOR.TRISTATE_DISABLED )
 140                          command.refresh( editor );
 141                  });
 142          }
 143      });
 144  } )();
 145  
 146  /**

 147   * Whether to automaticaly enable the "show block" command when the editor

 148   * loads.

 149   * @type Boolean

 150   * @default false

 151   * @example

 152   * config.startupOutlineBlocks = true;

 153   */
 154  CKEDITOR.config.startupOutlineBlocks = false;