[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.

   3  For licensing, see LICENSE.html or http://ckeditor.com/license

   4  */
   5  
   6  (function()
   7  {
   8  	function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition )
   9      {
  10          var config = editor.config;
  11  
  12          // Gets the list of fonts from the settings.

  13          var names = entries.split( ';' ),
  14              values = [];
  15  
  16          // Create style objects for all fonts.

  17          var styles = {};
  18          for ( var i = 0 ; i < names.length ; i++ )
  19          {
  20              var parts = names[ i ];
  21  
  22              if ( parts )
  23              {
  24                  parts = parts.split( '/' );
  25  
  26                  var vars = {},
  27                      name = names[ i ] = parts[ 0 ];
  28  
  29                  vars[ styleType ] = values[ i ] = parts[ 1 ] || name;
  30  
  31                  styles[ name ] = new CKEDITOR.style( styleDefinition, vars );
  32                  styles[ name ]._.definition.name = name;
  33              }
  34              else
  35                  names.splice( i--, 1 );
  36          }
  37  
  38          editor.ui.addRichCombo( comboName,
  39              {
  40                  label : lang.label,
  41                  title : lang.panelTitle,
  42                  className : 'cke_' + ( styleType == 'size' ? 'fontSize' : 'font' ),
  43                  panel :
  44                  {
  45                      css : editor.skin.editor.css.concat( config.contentsCss ),
  46                      multiSelect : false,
  47                      attributes : { 'aria-label' : lang.panelTitle }
  48                  },
  49  
  50                  init : function()
  51                  {
  52                      this.startGroup( lang.panelTitle );
  53  
  54                      for ( var i = 0 ; i < names.length ; i++ )
  55                      {
  56                          var name = names[ i ];
  57  
  58                          // Add the tag entry to the panel list.

  59                          this.add( name, styles[ name ].buildPreview(), name );
  60                      }
  61                  },
  62  
  63                  onClick : function( value )
  64                  {
  65                      editor.focus();
  66                      editor.fire( 'saveSnapshot' );
  67  
  68                      var style = styles[ value ];
  69  
  70                      if ( this.getValue() == value )
  71                          style.remove( editor.document );
  72                      else
  73                          style.apply( editor.document );
  74  
  75                      editor.fire( 'saveSnapshot' );
  76                  },
  77  
  78                  onRender : function()
  79                  {
  80                      editor.on( 'selectionChange', function( ev )
  81                          {
  82                              var currentValue = this.getValue();
  83  
  84                              var elementPath = ev.data.path,
  85                                  elements = elementPath.elements;
  86  
  87                              // For each element into the elements path.

  88                              for ( var i = 0, element ; i < elements.length ; i++ )
  89                              {
  90                                  element = elements[i];
  91  
  92                                  // Check if the element is removable by any of

  93                                  // the styles.

  94                                  for ( var value in styles )
  95                                  {
  96                                      if ( styles[ value ].checkElementRemovable( element, true ) )
  97                                      {
  98                                          if ( value != currentValue )
  99                                              this.setValue( value );
 100                                          return;
 101                                      }
 102                                  }
 103                              }
 104  
 105                              // If no styles match, just empty it.

 106                              this.setValue( '', defaultLabel );
 107                          },
 108                          this);
 109                  }
 110              });
 111      }
 112  
 113      CKEDITOR.plugins.add( 'font',
 114      {
 115          requires : [ 'richcombo', 'styles' ],
 116  
 117          init : function( editor )
 118          {
 119              var config = editor.config;
 120  
 121              addCombo( editor, 'Font', 'family', editor.lang.font, config.font_names, config.font_defaultLabel, config.font_style );
 122              addCombo( editor, 'FontSize', 'size', editor.lang.fontSize, config.fontSize_sizes, config.fontSize_defaultLabel, config.fontSize_style );
 123          }
 124      });
 125  })();
 126  
 127  /**

 128   * The list of fonts names to be displayed in the Font combo in the toolbar.

 129   * Entries are separated by semi-colons (;), while it's possible to have more

 130   * than one font for each entry, in the HTML way (separated by comma).

 131   *

 132   * A display name may be optionally defined by prefixing the entries with the

 133   * name and the slash character. For example, "Arial/Arial, Helvetica, sans-serif"

 134   * will be displayed as "Arial" in the list, but will be outputted as

 135   * "Arial, Helvetica, sans-serif".

 136   * @type String

 137   * @example

 138   * config.font_names =

 139   *     'Arial/Arial, Helvetica, sans-serif;' +

 140   *     'Times New Roman/Times New Roman, Times, serif;' +

 141   *     'Verdana';

 142   * @example

 143   * config.font_names = 'Arial;Times New Roman;Verdana';

 144   */
 145  CKEDITOR.config.font_names =
 146      'Arial/Arial, Helvetica, sans-serif;' +
 147      'Comic Sans MS/Comic Sans MS, cursive;' +
 148      'Courier New/Courier New, Courier, monospace;' +
 149      'Georgia/Georgia, serif;' +
 150      'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
 151      'Tahoma/Tahoma, Geneva, sans-serif;' +
 152      'Times New Roman/Times New Roman, Times, serif;' +
 153      'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
 154      'Verdana/Verdana, Geneva, sans-serif';
 155  
 156  /**

 157   * The text to be displayed in the Font combo is none of the available values

 158   * matches the current cursor position or text selection.

 159   * @type String

 160   * @example

 161   * // If the default site font is Arial, we may making it more explicit to the end user.

 162   * config.font_defaultLabel = 'Arial';

 163   */
 164  CKEDITOR.config.font_defaultLabel = '';
 165  
 166  /**

 167   * The style definition to be used to apply the font in the text.

 168   * @type Object

 169   * @example

 170   * // This is actually the default value for it.

 171   * config.font_style =

 172   *     {

 173   *         element        : 'span',

 174   *         styles        : { 'font-family' : '#(family)' },

 175   *         overrides    : [ { element : 'font', attributes : { 'face' : null } } ]

 176   *     };

 177   */
 178  CKEDITOR.config.font_style =
 179      {
 180          element        : 'span',
 181          styles        : { 'font-family' : '#(family)' },
 182          overrides    : [ { element : 'font', attributes : { 'face' : null } } ]
 183      };
 184  
 185  /**

 186   * The list of fonts size to be displayed in the Font Size combo in the

 187   * toolbar. Entries are separated by semi-colons (;).

 188   *

 189   * Any kind of "CSS like" size can be used, like "12px", "2.3em", "130%",

 190   * "larger" or "x-small".

 191   *

 192   * A display name may be optionally defined by prefixing the entries with the

 193   * name and the slash character. For example, "Bigger Font/14px" will be

 194   * displayed as "Bigger Font" in the list, but will be outputted as "14px".

 195   * @type String

 196   * @default '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

 197   * @example

 198   * config.fontSize_sizes = '16/16px;24/24px;48/48px;';

 199   * @example

 200   * config.fontSize_sizes = '12px;2.3em;130%;larger;x-small';

 201   * @example

 202   * config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';

 203   */
 204  CKEDITOR.config.fontSize_sizes =
 205      '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px';
 206  
 207  /**

 208   * The text to be displayed in the Font Size combo is none of the available

 209   * values matches the current cursor position or text selection.

 210   * @type String

 211   * @example

 212   * // If the default site font size is 12px, we may making it more explicit to the end user.

 213   * config.fontSize_defaultLabel = '12px';

 214   */
 215  CKEDITOR.config.fontSize_defaultLabel = '';
 216  
 217  /**

 218   * The style definition to be used to apply the font size in the text.

 219   * @type Object

 220   * @example

 221   * // This is actually the default value for it.

 222   * config.fontSize_style =

 223   *     {

 224   *         element        : 'span',

 225   *         styles        : { 'font-size' : '#(size)' },

 226   *         overrides    : [ { element : 'font', attributes : { 'size' : null } } ]

 227   *     };

 228   */
 229  CKEDITOR.config.fontSize_style =
 230      {
 231          element        : 'span',
 232          styles        : { 'font-size' : '#(size)' },
 233          overrides    : [ { element : 'font', attributes : { 'size' : null } } ]
 234      };