_source/plugins/showblocks/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2009, 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 \r
  93                 exec : function ( editor )\r
  94                 {\r
  95                         this.toggleState();\r
  96                         this.refresh( editor );\r
  97                 },\r
  98 \r
  99                 refresh : function( editor )\r
 100                 {\r
 101                         var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';\r
 102                         editor.document.getBody()[ funcName ]( 'cke_show_blocks' );\r
 103                 }\r
 104         };\r
 105 \r
 106         CKEDITOR.plugins.add( 'showblocks',\r
 107         {\r
 108                 requires : [ 'wysiwygarea' ],\r
 109 \r
 110                 init : function( editor )\r
 111                 {\r
 112                         var command = editor.addCommand( 'showblocks', commandDefinition );\r
 113                         command.canUndo = false;\r
 114 \r
 115                         if ( editor.config.startupOutlineBlocks )\r
 116                                 command.setState( CKEDITOR.TRISTATE_ON );\r
 117 \r
 118                         editor.addCss( cssTemplate\r
 119                                 .replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' )\r
 120                                 .replace( cssClassRegex, 'cke_show_blocks ' ) );\r
 121 \r
 122                         editor.ui.addButton( 'ShowBlocks',\r
 123                                 {\r
 124                                         label : editor.lang.showBlocks,\r
 125                                         command : 'showblocks'\r
 126                                 });\r
 127 \r
 128                         // Refresh the command on setData.\r
 129                         editor.on( 'mode', function()\r
 130                                 {\r
 131                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
 132                                                 command.refresh( editor );\r
 133                                 });\r
 134 \r
 135                         // Refresh the command on setData.\r
 136                         editor.on( 'contentDom', function()\r
 137                                 {\r
 138                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
 139                                                 command.refresh( editor );\r
 140                                 });\r
 141                 }\r
 142         });\r
 143 } )();\r
 144 \r
 145 /**\r
 146  * Whether to automaticaly enable the "show block" command when the editor\r
 147  * loads.\r
 148  * @type Boolean\r
 149  * @default false\r
 150  * @example\r
 151  * config.startupOutlineBlocks = true;\r
 152  */\r
 153 CKEDITOR.config.startupOutlineBlocks = false;\r