sources/plugins/showblocks/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md 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         'use strict';
  14
  15         var commandDefinition = {
  16                 readOnly: 1,
  17                 preserveState: true,
  18                 editorFocus: false,
  19
  20                 exec: function( editor ) {
  21                         this.toggleState();
  22                         this.refresh( editor );
  23                 },
  24
  25                 refresh: function( editor ) {
  26                         if ( editor.document ) {
  27                                 // Show blocks turns inactive after editor loses focus when in inline.
  28                                 var showBlocks = ( this.state == CKEDITOR.TRISTATE_ON && ( editor.elementMode != CKEDITOR.ELEMENT_MODE_INLINE || editor.focusManager.hasFocus ) );
  29
  30                                 var funcName = showBlocks ? 'attachClass' : 'removeClass';
  31                                 editor.editable()[ funcName ]( 'cke_show_blocks' );
  32                         }
  33                 }
  34         };
  35
  36         CKEDITOR.plugins.add( 'showblocks', {
  37                 // jscs:disable maximumLineLength
  38                 lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
  39                 // jscs:enable maximumLineLength
  40                 icons: 'showblocks,showblocks-rtl', // %REMOVE_LINE_CORE%
  41                 hidpi: true, // %REMOVE_LINE_CORE%
  42                 onLoad: function() {
  43                         var tags = [ 'p', 'div', 'pre', 'address', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
  44                                 cssStd, cssImg, cssLtr, cssRtl,
  45                                 path = CKEDITOR.getUrl( this.path ),
  46                                 // #10884 don't apply showblocks styles to non-editable elements and chosen ones.
  47                                 // IE8 does not support :not() pseudoclass, so we need to reset showblocks rather
  48                                 // than 'prevent' its application. We do that by additional rules.
  49                                 supportsNotPseudoclass = !( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ),
  50                                 notDisabled = supportsNotPseudoclass ? ':not([contenteditable=false]):not(.cke_show_blocks_off)' : '',
  51                                 tag, trailing;
  52
  53                         cssStd = cssImg = cssLtr = cssRtl = '';
  54
  55                         while ( ( tag = tags.pop() ) ) {
  56                                 trailing = tags.length ? ',' : '';
  57
  58                                 cssStd += '.cke_show_blocks ' + tag + notDisabled + trailing;
  59                                 cssLtr += '.cke_show_blocks.cke_contents_ltr ' + tag + notDisabled + trailing;
  60                                 cssRtl += '.cke_show_blocks.cke_contents_rtl ' + tag + notDisabled + trailing;
  61                                 cssImg += '.cke_show_blocks ' + tag + notDisabled + '{' +
  62                                         'background-image:url(' + CKEDITOR.getUrl( path + 'images/block_' + tag + '.png' ) + ')' +
  63                                 '}';
  64                         }
  65
  66                         // .cke_show_blocks p { ... }
  67                         cssStd += '{' +
  68                                 'background-repeat:no-repeat;' +
  69                                 'border:1px dotted gray;' +
  70                                 'padding-top:8px' +
  71                         '}';
  72
  73                         // .cke_show_blocks.cke_contents_ltr p { ... }
  74                         cssLtr += '{' +
  75                                 'background-position:top left;' +
  76                                 'padding-left:8px' +
  77                         '}';
  78
  79                         // .cke_show_blocks.cke_contents_rtl p { ... }
  80                         cssRtl += '{' +
  81                                 'background-position:top right;' +
  82                                 'padding-right:8px' +
  83                         '}';
  84
  85                         CKEDITOR.addCss( cssStd.concat( cssImg, cssLtr, cssRtl ) );
  86
  87                         // [IE8] Reset showblocks styles for non-editables and chosen elements, because
  88                         // it could not be done using :not() pseudoclass (#10884).
  89                         if ( !supportsNotPseudoclass ) {
  90                                 CKEDITOR.addCss(
  91                                         '.cke_show_blocks [contenteditable=false],.cke_show_blocks .cke_show_blocks_off{' +
  92                                                 'border:none;' +
  93                                                 'padding-top:0;' +
  94                                                 'background-image:none' +
  95                                         '}' +
  96                                         '.cke_show_blocks.cke_contents_rtl [contenteditable=false],.cke_show_blocks.cke_contents_rtl .cke_show_blocks_off{' +
  97                                                 'padding-right:0' +
  98                                         '}' +
  99                                         '.cke_show_blocks.cke_contents_ltr [contenteditable=false],.cke_show_blocks.cke_contents_ltr .cke_show_blocks_off{' +
 100                                                 'padding-left:0' +
 101                                         '}'
 102                                 );
 103                         }
 104                 },
 105                 init: function( editor ) {
 106                         if ( editor.blockless )
 107                                 return;
 108
 109                         var command = editor.addCommand( 'showblocks', commandDefinition );
 110                         command.canUndo = false;
 111
 112                         if ( editor.config.startupOutlineBlocks )
 113                                 command.setState( CKEDITOR.TRISTATE_ON );
 114
 115                         editor.ui.addButton && editor.ui.addButton( 'ShowBlocks', {
 116                                 label: editor.lang.showblocks.toolbar,
 117                                 command: 'showblocks',
 118                                 toolbar: 'tools,20'
 119                         } );
 120
 121                         // Refresh the command on setData.
 122                         editor.on( 'mode', function() {
 123                                 if ( command.state != CKEDITOR.TRISTATE_DISABLED )
 124                                         command.refresh( editor );
 125                         } );
 126
 127                         // Refresh the command on focus/blur in inline.
 128                         if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE ) {
 129                                 editor.on( 'focus', onFocusBlur );
 130                                 editor.on( 'blur', onFocusBlur );
 131                         }
 132
 133                         // Refresh the command on setData.
 134                         editor.on( 'contentDom', function() {
 135                                 if ( command.state != CKEDITOR.TRISTATE_DISABLED )
 136                                         command.refresh( editor );
 137                         } );
 138
 139                         function onFocusBlur() {
 140                                 command.refresh( editor );
 141                         }
 142                 }
 143         } );
 144 } )();
 145
 146 /**
 147  * Whether to automaticaly enable the show block" command when the editor loads.
 148  *
 149  *              config.startupOutlineBlocks = true;
 150  *
 151  * @cfg {Boolean} [startupOutlineBlocks=false]
 152  * @member CKEDITOR.config
 153  */