sources/plugins/format/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 CKEDITOR.plugins.add( 'format', {
   7         requires: 'richcombo',
   8         // jscs:disable maximumLineLength
   9         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%
  10         // jscs:enable maximumLineLength
  11         init: function( editor ) {
  12                 if ( editor.blockless )
  13                         return;
  14
  15                 var config = editor.config,
  16                         lang = editor.lang.format;
  17
  18                 // Gets the list of tags from the settings.
  19                 var tags = config.format_tags.split( ';' );
  20
  21                 // Create style objects for all defined styles.
  22                 var styles = {},
  23                         stylesCount = 0,
  24                         allowedContent = [];
  25                 for ( var i = 0; i < tags.length; i++ ) {
  26                         var tag = tags[ i ];
  27                         var style = new CKEDITOR.style( config[ 'format_' + tag ] );
  28                         if ( !editor.filter.customConfig || editor.filter.check( style ) ) {
  29                                 stylesCount++;
  30                                 styles[ tag ] = style;
  31                                 styles[ tag ]._.enterMode = editor.config.enterMode;
  32                                 allowedContent.push( style );
  33                         }
  34                 }
  35
  36                 // Hide entire combo when all formats are rejected.
  37                 if ( stylesCount === 0 )
  38                         return;
  39
  40                 editor.ui.addRichCombo( 'Format', {
  41                         label: lang.label,
  42                         title: lang.panelTitle,
  43                         toolbar: 'styles,20',
  44                         allowedContent: allowedContent,
  45
  46                         panel: {
  47                                 css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
  48                                 multiSelect: false,
  49                                 attributes: { 'aria-label': lang.panelTitle }
  50                         },
  51
  52                         init: function() {
  53                                 this.startGroup( lang.panelTitle );
  54
  55                                 for ( var tag in styles ) {
  56                                         var label = lang[ 'tag_' + tag ];
  57
  58                                         // Add the tag entry to the panel list.
  59                                         this.add( tag, styles[ tag ].buildPreview( label ), label );
  60                                 }
  61                         },
  62
  63                         onClick: function( value ) {
  64                                 editor.focus();
  65                                 editor.fire( 'saveSnapshot' );
  66
  67                                 var style = styles[ value ],
  68                                         elementPath = editor.elementPath();
  69
  70                                 editor[ style.checkActive( elementPath, editor ) ? 'removeStyle' : 'applyStyle' ]( style );
  71
  72                                 // Save the undo snapshot after all changes are affected. (#4899)
  73                                 setTimeout( function() {
  74                                         editor.fire( 'saveSnapshot' );
  75                                 }, 0 );
  76                         },
  77
  78                         onRender: function() {
  79                                 editor.on( 'selectionChange', function( ev ) {
  80                                         var currentTag = this.getValue(),
  81                                                 elementPath = ev.data.path;
  82
  83                                         this.refresh();
  84
  85                                         for ( var tag in styles ) {
  86                                                 if ( styles[ tag ].checkActive( elementPath, editor ) ) {
  87                                                         if ( tag != currentTag )
  88                                                                 this.setValue( tag, editor.lang.format[ 'tag_' + tag ] );
  89                                                         return;
  90                                                 }
  91                                         }
  92
  93                                         // If no styles match, just empty it.
  94                                         this.setValue( '' );
  95
  96                                 }, this );
  97                         },
  98
  99                         onOpen: function() {
 100                                 this.showAll();
 101                                 for ( var name in styles ) {
 102                                         var style = styles[ name ];
 103
 104                                         // Check if that style is enabled in activeFilter.
 105                                         if ( !editor.activeFilter.check( style ) )
 106                                                 this.hideItem( name );
 107
 108                                 }
 109                         },
 110
 111                         refresh: function() {
 112                                 var elementPath = editor.elementPath();
 113
 114                                 if ( !elementPath )
 115                                                 return;
 116
 117                                 // Check if element path contains 'p' element.
 118                                 if ( !elementPath.isContextFor( 'p' ) ) {
 119                                         this.setState( CKEDITOR.TRISTATE_DISABLED );
 120                                         return;
 121                                 }
 122
 123                                 // Check if there is any available style.
 124                                 for ( var name in styles ) {
 125                                         if ( editor.activeFilter.check( styles[ name ] ) )
 126                                                 return;
 127                                 }
 128                                 this.setState( CKEDITOR.TRISTATE_DISABLED );
 129                         }
 130                 } );
 131         }
 132 } );
 133
 134 /**
 135  * A list of semicolon-separated style names (by default: tags) representing
 136  * the style definition for each entry to be displayed in the Format drop-down list
 137  * in the toolbar. Each entry must have a corresponding configuration in a
 138  * setting named `'format_(tagName)'`. For example, the `'p'` entry has its
 139  * definition taken from [config.format_p](#!/api/CKEDITOR.config-cfg-format_p).
 140  *
 141  * Read more in the [documentation](#!/guide/dev_format)
 142  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 143  *
 144  *              config.format_tags = 'p;h2;h3;pre';
 145  *
 146  * @cfg {String} [format_tags='p;h1;h2;h3;h4;h5;h6;pre;address;div']
 147  * @member CKEDITOR.config
 148  */
 149 CKEDITOR.config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
 150
 151 /**
 152  * The style definition to be used to apply the `Normal` format.
 153  *
 154  * Read more in the [documentation](#!/guide/dev_format)
 155  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 156  *
 157  *              config.format_p = { element: 'p', attributes: { 'class': 'normalPara' } };
 158  *
 159  * @cfg {Object} [format_p={ element: 'p' }]
 160  * @member CKEDITOR.config
 161  */
 162 CKEDITOR.config.format_p = { element: 'p' };
 163
 164 /**
 165  * The style definition to be used to apply the `Normal (DIV)` format.
 166  *
 167  * Read more in the [documentation](#!/guide/dev_format)
 168  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 169  *
 170  *              config.format_div = { element: 'div', attributes: { 'class': 'normalDiv' } };
 171  *
 172  * @cfg {Object} [format_div={ element: 'div' }]
 173  * @member CKEDITOR.config
 174  */
 175 CKEDITOR.config.format_div = { element: 'div' };
 176
 177 /**
 178  * The style definition to be used to apply the `Formatted` format.
 179  *
 180  * Read more in the [documentation](#!/guide/dev_format)
 181  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 182  *
 183  *              config.format_pre = { element: 'pre', attributes: { 'class': 'code' } };
 184  *
 185  * @cfg {Object} [format_pre={ element: 'pre' }]
 186  * @member CKEDITOR.config
 187  */
 188 CKEDITOR.config.format_pre = { element: 'pre' };
 189
 190 /**
 191  * The style definition to be used to apply the `Address` format.
 192  *
 193  * Read more in the [documentation](#!/guide/dev_format)
 194  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 195  *
 196  *              config.format_address = { element: 'address', attributes: { 'class': 'styledAddress' } };
 197  *
 198  * @cfg {Object} [format_address={ element: 'address' }]
 199  * @member CKEDITOR.config
 200  */
 201 CKEDITOR.config.format_address = { element: 'address' };
 202
 203 /**
 204  * The style definition to be used to apply the `Heading 1` format.
 205  *
 206  * Read more in the [documentation](#!/guide/dev_format)
 207  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 208  *
 209  *              config.format_h1 = { element: 'h1', attributes: { 'class': 'contentTitle1' } };
 210  *
 211  * @cfg {Object} [format_h1={ element: 'h1' }]
 212  * @member CKEDITOR.config
 213  */
 214 CKEDITOR.config.format_h1 = { element: 'h1' };
 215
 216 /**
 217  * The style definition to be used to apply the `Heading 2` format.
 218  *
 219  * Read more in the [documentation](#!/guide/dev_format)
 220  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 221  *
 222  *              config.format_h2 = { element: 'h2', attributes: { 'class': 'contentTitle2' } };
 223  *
 224  * @cfg {Object} [format_h2={ element: 'h2' }]
 225  * @member CKEDITOR.config
 226  */
 227 CKEDITOR.config.format_h2 = { element: 'h2' };
 228
 229 /**
 230  * The style definition to be used to apply the `Heading 3` format.
 231  *
 232  * Read more in the [documentation](#!/guide/dev_format)
 233  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 234  *
 235  *              config.format_h3 = { element: 'h3', attributes: { 'class': 'contentTitle3' } };
 236  *
 237  * @cfg {Object} [format_h3={ element: 'h3' }]
 238  * @member CKEDITOR.config
 239  */
 240 CKEDITOR.config.format_h3 = { element: 'h3' };
 241
 242 /**
 243  * The style definition to be used to apply the `Heading 4` format.
 244  *
 245  * Read more in the [documentation](#!/guide/dev_format)
 246  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 247  *
 248  *              config.format_h4 = { element: 'h4', attributes: { 'class': 'contentTitle4' } };
 249  *
 250  * @cfg {Object} [format_h4={ element: 'h4' }]
 251  * @member CKEDITOR.config
 252  */
 253 CKEDITOR.config.format_h4 = { element: 'h4' };
 254
 255 /**
 256  * The style definition to be used to apply the `Heading 5` format.
 257  *
 258  * Read more in the [documentation](#!/guide/dev_format)
 259  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 260  *
 261  *              config.format_h5 = { element: 'h5', attributes: { 'class': 'contentTitle5' } };
 262  *
 263  * @cfg {Object} [format_h5={ element: 'h5' }]
 264  * @member CKEDITOR.config
 265  */
 266 CKEDITOR.config.format_h5 = { element: 'h5' };
 267
 268 /**
 269  * The style definition to be used to apply the `Heading 6` format.
 270  *
 271  * Read more in the [documentation](#!/guide/dev_format)
 272  * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).
 273  *
 274  *              config.format_h6 = { element: 'h6', attributes: { 'class': 'contentTitle6' } };
 275  *
 276  * @cfg {Object} [format_h6={ element: 'h6' }]
 277  * @member CKEDITOR.config
 278  */
 279 CKEDITOR.config.format_h6 = { element: 'h6' };