sources/plugins/basicstyles/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 CKEDITOR.plugins.add( 'basicstyles', {
   7         // jscs:disable maximumLineLength
   8         lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,es-mx,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,oc,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%
   9         // jscs:enable maximumLineLength
  10         icons: 'bold,italic,underline,strike,subscript,superscript', // %REMOVE_LINE_CORE%
  11         hidpi: true, // %REMOVE_LINE_CORE%
  12         init: function( editor ) {
  13                 var order = 0;
  14                 // All buttons use the same code to register. So, to avoid
  15                 // duplications, let's use this tool function.
  16                 var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton ) {
  17                                 // Disable the command if no definition is configured.
  18                                 if ( !styleDefiniton )
  19                                         return;
  20
  21                                 var style = new CKEDITOR.style( styleDefiniton ),
  22                                         forms = contentForms[ commandName ];
  23
  24                                 // Put the style as the most important form.
  25                                 forms.unshift( style );
  26
  27                                 // Listen to contextual style activation.
  28                                 editor.attachStyleStateChange( style, function( state ) {
  29                                         !editor.readOnly && editor.getCommand( commandName ).setState( state );
  30                                 } );
  31
  32                                 // Create the command that can be used to apply the style.
  33                                 editor.addCommand( commandName, new CKEDITOR.styleCommand( style, {
  34                                         contentForms: forms
  35                                 } ) );
  36
  37                                 // Register the button, if the button plugin is loaded.
  38                                 if ( editor.ui.addButton ) {
  39                                         editor.ui.addButton( buttonName, {
  40                                                 label: buttonLabel,
  41                                                 command: commandName,
  42                                                 toolbar: 'basicstyles,' + ( order += 10 )
  43                                         } );
  44                                 }
  45                         };
  46
  47                 var contentForms = {
  48                                 bold: [
  49                                         'strong',
  50                                         'b',
  51                                         [ 'span', function( el ) {
  52                                                 var fw = el.styles[ 'font-weight' ];
  53                                                 return fw == 'bold' || +fw >= 700;
  54                                         } ]
  55                                 ],
  56
  57                                 italic: [
  58                                         'em',
  59                                         'i',
  60                                         [ 'span', function( el ) {
  61                                                 return el.styles[ 'font-style' ] == 'italic';
  62                                         } ]
  63                                 ],
  64
  65                                 underline: [
  66                                         'u',
  67                                         [ 'span', function( el ) {
  68                                                 return el.styles[ 'text-decoration' ] == 'underline';
  69                                         } ]
  70                                 ],
  71
  72                                 strike: [
  73                                         's',
  74                                         'strike',
  75                                         [ 'span', function( el ) {
  76                                                 return el.styles[ 'text-decoration' ] == 'line-through';
  77                                         } ]
  78                                 ],
  79
  80                                 subscript: [
  81                                         'sub'
  82                                 ],
  83
  84                                 superscript: [
  85                                         'sup'
  86                                 ]
  87                         },
  88                         config = editor.config,
  89                         lang = editor.lang.basicstyles;
  90
  91                 addButtonCommand( 'Bold', lang.bold, 'bold', config.coreStyles_bold );
  92                 addButtonCommand( 'Italic', lang.italic, 'italic', config.coreStyles_italic );
  93                 addButtonCommand( 'Underline', lang.underline, 'underline', config.coreStyles_underline );
  94                 addButtonCommand( 'Strike', lang.strike, 'strike', config.coreStyles_strike );
  95                 addButtonCommand( 'Subscript', lang.subscript, 'subscript', config.coreStyles_subscript );
  96                 addButtonCommand( 'Superscript', lang.superscript, 'superscript', config.coreStyles_superscript );
  97
  98                 editor.setKeystroke( [
  99                         [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],
 100                         [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
 101                         [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ]
 102                 ] );
 103         }
 104 } );
 105
 106 // Basic Inline Styles.
 107
 108 /**
 109  * The style definition that applies the **bold** style to the text.
 110  *
 111  * Read more in the [documentation](#!/guide/dev_basicstyles)
 112  * and see the [SDK sample](http://sdk.ckeditor.com/samples/basicstyles.html).
 113  *
 114  *              config.coreStyles_bold = { element: 'b', overrides: 'strong' };
 115  *
 116  *              config.coreStyles_bold = {
 117  *                      element: 'span',
 118  *                      attributes: { 'class': 'Bold' }
 119  *              };
 120  *
 121  * @cfg
 122  * @member CKEDITOR.config
 123  */
 124 CKEDITOR.config.coreStyles_bold = { element: 'strong', overrides: 'b' };
 125
 126 /**
 127  * The style definition that applies the *italics* style to the text.
 128  *
 129  * Read more in the [documentation](#!/guide/dev_basicstyles)
 130  * and see the [SDK sample](http://sdk.ckeditor.com/samples/basicstyles.html).
 131  *
 132  *              config.coreStyles_italic = { element: 'i', overrides: 'em' };
 133  *
 134  *              CKEDITOR.config.coreStyles_italic = {
 135  *                      element: 'span',
 136  *                      attributes: { 'class': 'Italic' }
 137  *              };
 138  *
 139  * @cfg
 140  * @member CKEDITOR.config
 141  */
 142 CKEDITOR.config.coreStyles_italic = { element: 'em', overrides: 'i' };
 143
 144 /**
 145  * The style definition that applies the <u>underline</u> style to the text.
 146  *
 147  * Read more in the [documentation](#!/guide/dev_basicstyles)
 148  * and see the [SDK sample](http://sdk.ckeditor.com/samples/basicstyles.html).
 149  *
 150  *              CKEDITOR.config.coreStyles_underline = {
 151  *                      element: 'span',
 152  *                      attributes: { 'class': 'Underline' }
 153  *              };
 154  *
 155  * @cfg
 156  * @member CKEDITOR.config
 157  */
 158 CKEDITOR.config.coreStyles_underline = { element: 'u' };
 159
 160 /**
 161  * The style definition that applies the <strike>strikethrough</strike> style to the text.
 162  *
 163  * Read more in the [documentation](#!/guide/dev_basicstyles)
 164  * and see the [SDK sample](http://sdk.ckeditor.com/samples/basicstyles.html).
 165  *
 166  *              CKEDITOR.config.coreStyles_strike = {
 167  *                      element: 'span',
 168  *                      attributes: { 'class': 'Strikethrough' },
 169  *                      overrides: 'strike'
 170  *              };
 171  *
 172  * @cfg
 173  * @member CKEDITOR.config
 174  */
 175 CKEDITOR.config.coreStyles_strike = { element: 's', overrides: 'strike' };
 176
 177 /**
 178  * The style definition that applies the subscript style to the text.
 179  *
 180  * Read more in the [documentation](#!/guide/dev_basicstyles)
 181  * and see the [SDK sample](http://sdk.ckeditor.com/samples/basicstyles.html).
 182  *
 183  *              CKEDITOR.config.coreStyles_subscript = {
 184  *                      element: 'span',
 185  *                      attributes: { 'class': 'Subscript' },
 186  *                      overrides: 'sub'
 187  *              };
 188  *
 189  * @cfg
 190  * @member CKEDITOR.config
 191  */
 192 CKEDITOR.config.coreStyles_subscript = { element: 'sub' };
 193
 194 /**
 195  * The style definition that applies the superscript style to the text.
 196  *
 197  * Read more in the [documentation](#!/guide/dev_basicstyles)
 198  * and see the [SDK sample](http://sdk.ckeditor.com/samples/basicstyles.html).
 199  *
 200  *              CKEDITOR.config.coreStyles_superscript = {
 201  *                      element: 'span',
 202  *                      attributes: { 'class': 'Superscript' },
 203  *                      overrides: 'sup'
 204  *              };
 205  *
 206  * @cfg
 207  * @member CKEDITOR.config
 208  */
 209 CKEDITOR.config.coreStyles_superscript = { element: 'sup' };