_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                         'background-position: top %3;'+\r
  28                         'border: 1px dotted gray;'+\r
  29                         'padding-top: 8px;'+\r
  30                         'padding-%3: 8px;'+\r
  31                 '}'+\r
  32 \r
  33                 '.%2 p'+\r
  34                 '{'+\r
  35                         '%1p.png);'+\r
  36                 '}'+\r
  37 \r
  38                 '.%2 div'+\r
  39                 '{'+\r
  40                         '%1div.png);'+\r
  41                 '}'+\r
  42 \r
  43                 '.%2 pre'+\r
  44                 '{'+\r
  45                         '%1pre.png);'+\r
  46                 '}'+\r
  47 \r
  48                 '.%2 address'+\r
  49                 '{'+\r
  50                         '%1address.png);'+\r
  51                 '}'+\r
  52 \r
  53                 '.%2 blockquote'+\r
  54                 '{'+\r
  55                         '%1blockquote.png);'+\r
  56                 '}'+\r
  57 \r
  58                 '.%2 h1'+\r
  59                 '{'+\r
  60                         '%1h1.png);'+\r
  61                 '}'+\r
  62 \r
  63                 '.%2 h2'+\r
  64                 '{'+\r
  65                         '%1h2.png);'+\r
  66                 '}'+\r
  67 \r
  68                 '.%2 h3'+\r
  69                 '{'+\r
  70                         '%1h3.png);'+\r
  71                 '}'+\r
  72 \r
  73                 '.%2 h4'+\r
  74                 '{'+\r
  75                         '%1h4.png);'+\r
  76                 '}'+\r
  77 \r
  78                 '.%2 h5'+\r
  79                 '{'+\r
  80                         '%1h5.png);'+\r
  81                 '}'+\r
  82 \r
  83                 '.%2 h6'+\r
  84                 '{'+\r
  85                         '%1h6.png);'+\r
  86                 '}';\r
  87 \r
  88         var cssTemplateRegex = /%1/g, cssClassRegex = /%2/g, backgroundPositionRegex = /%3/g;\r
  89 \r
  90         var commandDefinition =\r
  91         {\r
  92                 preserveState : true,\r
  93                 editorFocus : false,\r
  94 \r
  95                 exec : function ( editor )\r
  96                 {\r
  97                         this.toggleState();\r
  98                         this.refresh( editor );\r
  99                 },\r
 100 \r
 101                 refresh : function( editor )\r
 102                 {\r
 103                         var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';\r
 104                         editor.document.getBody()[ funcName ]( 'cke_show_blocks' );\r
 105                 }\r
 106         };\r
 107 \r
 108         CKEDITOR.plugins.add( 'showblocks',\r
 109         {\r
 110                 requires : [ 'wysiwygarea' ],\r
 111 \r
 112                 init : function( editor )\r
 113                 {\r
 114                         var command = editor.addCommand( 'showblocks', commandDefinition );\r
 115                         command.canUndo = false;\r
 116 \r
 117                         if ( editor.config.startupOutlineBlocks )\r
 118                                 command.setState( CKEDITOR.TRISTATE_ON );\r
 119 \r
 120                         editor.addCss( cssTemplate\r
 121                                 .replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' )\r
 122                                 .replace( cssClassRegex, 'cke_show_blocks ' )\r
 123                                 .replace( backgroundPositionRegex, editor.lang.dir == 'rtl' ? 'right' : 'left' ) );\r
 124 \r
 125                         editor.ui.addButton( 'ShowBlocks',\r
 126                                 {\r
 127                                         label : editor.lang.showBlocks,\r
 128                                         command : 'showblocks'\r
 129                                 });\r
 130 \r
 131                         // Refresh the command on setData.\r
 132                         editor.on( 'mode', function()\r
 133                                 {\r
 134                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
 135                                                 command.refresh( editor );\r
 136                                 });\r
 137 \r
 138                         // Refresh the command on setData.\r
 139                         editor.on( 'contentDom', function()\r
 140                                 {\r
 141                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
 142                                                 command.refresh( editor );\r
 143                                 });\r
 144                 }\r
 145         });\r
 146 } )();\r
 147 \r
 148 /**\r
 149  * Whether to automaticaly enable the "show block" command when the editor\r
 150  * loads.\r
 151  * @type Boolean\r
 152  * @default false\r
 153  * @example\r
 154  * config.startupOutlineBlocks = true;\r
 155  */\r