_source/plugins/showblocks/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 /**\r
   7  * @fileOverview The "showblocks" plugin. Enable it will make all block level\r
   8  *               elements being decorated with a border and the element name\r
   9  *               displayed on the left-right corner.\r
  10  */\r
  11 \r
  12 (function()\r
  13 {\r
  14         var cssTemplate = '.%2 p,'+\r
  15                 '.%2 div,'+\r
  16                 '.%2 pre,'+\r
  17                 '.%2 address,'+\r
  18                 '.%2 blockquote,'+\r
  19                 '.%2 h1,'+\r
  20                 '.%2 h2,'+\r
  21                 '.%2 h3,'+\r
  22                 '.%2 h4,'+\r
  23                 '.%2 h5,'+\r
  24                 '.%2 h6'+\r
  25                 '{'+\r
  26                         'background-repeat: no-repeat;'+\r
  27                         'border: 1px dotted gray;'+\r
  28                         'padding-top: 8px;'+\r
  29                         'padding-left: 8px;'+\r
  30                 '}'+\r
  31 \r
  32                 '.%2 p'+\r
  33                 '{'+\r
  34                         '%1p.png);'+\r
  35                 '}'+\r
  36 \r
  37                 '.%2 div'+\r
  38                 '{'+\r
  39                         '%1div.png);'+\r
  40                 '}'+\r
  41 \r
  42                 '.%2 pre'+\r
  43                 '{'+\r
  44                         '%1pre.png);'+\r
  45                 '}'+\r
  46 \r
  47                 '.%2 address'+\r
  48                 '{'+\r
  49                         '%1address.png);'+\r
  50                 '}'+\r
  51 \r
  52                 '.%2 blockquote'+\r
  53                 '{'+\r
  54                         '%1blockquote.png);'+\r
  55                 '}'+\r
  56 \r
  57                 '.%2 h1'+\r
  58                 '{'+\r
  59                         '%1h1.png);'+\r
  60                 '}'+\r
  61 \r
  62                 '.%2 h2'+\r
  63                 '{'+\r
  64                         '%1h2.png);'+\r
  65                 '}'+\r
  66 \r
  67                 '.%2 h3'+\r
  68                 '{'+\r
  69                         '%1h3.png);'+\r
  70                 '}'+\r
  71 \r
  72                 '.%2 h4'+\r
  73                 '{'+\r
  74                         '%1h4.png);'+\r
  75                 '}'+\r
  76 \r
  77                 '.%2 h5'+\r
  78                 '{'+\r
  79                         '%1h5.png);'+\r
  80                 '}'+\r
  81 \r
  82                 '.%2 h6'+\r
  83                 '{'+\r
  84                         '%1h6.png);'+\r
  85                 '}';\r
  86 \r
  87         var cssTemplateRegex = /%1/g, cssClassRegex = /%2/g;\r
  88 \r
  89         var commandDefinition =\r
  90         {\r
  91                 preserveState : true,\r
  92                 editorFocus : false,\r
  93 \r
  94                 exec : function ( editor )\r
  95                 {\r
  96                         this.toggleState();\r
  97                         this.refresh( editor );\r
  98                 },\r
  99 \r
 100                 refresh : function( editor )\r
 101                 {\r
 102                         var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';\r
 103                         editor.document.getBody()[ funcName ]( 'cke_show_blocks' );\r
 104                 }\r
 105         };\r
 106 \r
 107         CKEDITOR.plugins.add( 'showblocks',\r
 108         {\r
 109                 requires : [ 'wysiwygarea' ],\r
 110 \r
 111                 init : function( editor )\r
 112                 {\r
 113                         var command = editor.addCommand( 'showblocks', commandDefinition );\r
 114                         command.canUndo = false;\r
 115 \r
 116                         if ( editor.config.startupOutlineBlocks )\r
 117                                 command.setState( CKEDITOR.TRISTATE_ON );\r
 118 \r
 119                         editor.addCss( cssTemplate\r
 120                                 .replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' )\r
 121                                 .replace( cssClassRegex, 'cke_show_blocks ' ) );\r
 122 \r
 123                         editor.ui.addButton( 'ShowBlocks',\r
 124                                 {\r
 125                                         label : editor.lang.showBlocks,\r
 126                                         command : 'showblocks'\r
 127                                 });\r
 128 \r
 129                         // Refresh the command on setData.\r
 130                         editor.on( 'mode', function()\r
 131                                 {\r
 132                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
 133                                                 command.refresh( editor );\r
 134                                 });\r
 135 \r
 136                         // Refresh the command on setData.\r
 137                         editor.on( 'contentDom', function()\r
 138                                 {\r
 139                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
 140                                                 command.refresh( editor );\r
 141                                 });\r
 142                 }\r
 143         });\r
 144 } )();\r
 145 \r
 146 /**\r
 147  * Whether to automaticaly enable the "show block" command when the editor\r
 148  * loads.\r
 149  * @type Boolean\r
 150  * @default false\r
 151  * @example\r
 152  * config.startupOutlineBlocks = true;\r
 153  */\r
 154 CKEDITOR.config.startupOutlineBlocks = false;\r