_source/plugins/showblocks/plugin.js

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