2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
8 function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition )
\r
10 var config = editor.config;
\r
12 // Gets the list of fonts from the settings.
\r
13 var names = entries.split( ';' ),
\r
16 // Create style objects for all fonts.
\r
18 for ( var i = 0 ; i < names.length ; i++ )
\r
21 var parts = names[ i ].split( '/' );
\r
23 var name = names[ i ] = parts[ 0 ];
\r
24 vars[ styleType ] = values[ i ] = parts[ 1 ] || name;
\r
26 styles[ name ] = new CKEDITOR.style( styleDefinition, vars );
\r
29 editor.ui.addRichCombo( comboName,
\r
32 title : lang.panelTitle,
\r
33 voiceLabel : lang.voiceLabel,
\r
34 className : 'cke_' + ( styleType == 'size' ? 'fontSize' : 'font' ),
\r
35 multiSelect : false,
\r
39 css : editor.skin.editor.css.concat( config.contentsCss ),
\r
40 voiceLabel : lang.panelVoiceLabel
\r
45 this.startGroup( lang.panelTitle );
\r
47 for ( var i = 0 ; i < names.length ; i++ )
\r
49 var name = names[ i ];
\r
51 // Add the tag entry to the panel list.
\r
52 this.add( name, '<span style="font-' + styleType + ':' + values[ i ] + '">' + name + '</span>', name );
\r
56 onClick : function( value )
\r
59 editor.fire( 'saveSnapshot' );
\r
61 var style = styles[ value ];
\r
63 if ( this.getValue() == value )
\r
64 style.remove( editor.document );
\r
66 style.apply( editor.document );
\r
68 editor.fire( 'saveSnapshot' );
\r
71 onRender : function()
\r
73 editor.on( 'selectionChange', function( ev )
\r
75 var currentValue = this.getValue();
\r
77 var elementPath = ev.data.path,
\r
78 elements = elementPath.elements;
\r
80 // For each element into the elements path.
\r
81 for ( var i = 0, element ; i < elements.length ; i++ )
\r
83 element = elements[i];
\r
85 // Check if the element is removable by any of
\r
87 for ( var value in styles )
\r
89 if ( styles[ value ].checkElementRemovable( element, true ) )
\r
91 if ( value != currentValue )
\r
92 this.setValue( value );
\r
98 // If no styles match, just empty it.
\r
99 this.setValue( '', defaultLabel );
\r
106 CKEDITOR.plugins.add( 'font',
\r
108 requires : [ 'richcombo', 'styles' ],
\r
110 init : function( editor )
\r
112 var config = editor.config;
\r
114 addCombo( editor, 'Font', 'family', editor.lang.font, config.font_names, config.font_defaultLabel, config.font_style );
\r
115 addCombo( editor, 'FontSize', 'size', editor.lang.fontSize, config.fontSize_sizes, config.fontSize_defaultLabel, config.fontSize_style );
\r
121 * The list of fonts names to be displayed in the Font combo in the toolbar.
\r
122 * Entries are separated by semi-colons (;), while it's possible to have more
\r
123 * than one font for each entry, in the HTML way (separated by comma).
\r
125 * A display name may be optionally defined by prefixing the entries with the
\r
126 * name and the slash character. For example, "Arial/Arial, Helvetica, sans-serif"
\r
127 * will be displayed as "Arial" in the list, but will be outputted as
\r
128 * "Arial, Helvetica, sans-serif".
\r
131 * config.font_names =
\r
132 * 'Arial/Arial, Helvetica, sans-serif;' +
\r
133 * 'Times New Roman/Times New Roman, Times, serif;' +
\r
136 * config.font_names = 'Arial;Times New Roman;Verdana';
\r
138 CKEDITOR.config.font_names =
\r
139 'Arial/Arial, Helvetica, sans-serif;' +
\r
140 'Comic Sans MS/Comic Sans MS, cursive;' +
\r
141 'Courier New/Courier New, Courier, monospace;' +
\r
142 'Georgia/Georgia, serif;' +
\r
143 'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
\r
144 'Tahoma/Tahoma, Geneva, sans-serif;' +
\r
145 'Times New Roman/Times New Roman, Times, serif;' +
\r
146 'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
\r
147 'Verdana/Verdana, Geneva, sans-serif';
\r
150 * The text to be displayed in the Font combo is none of the available values
\r
151 * matches the current cursor position or text selection.
\r
154 * // If the default site font is Arial, we may making it more explicit to the end user.
\r
155 * config.font_defaultLabel = 'Arial';
\r
157 CKEDITOR.config.font_defaultLabel = '';
\r
160 * The style definition to be used to apply the font in the text.
\r
163 * // This is actually the default value for it.
\r
164 * config.font_style =
\r
166 * element : 'span',
\r
167 * styles : { 'font-family' : '#(family)' },
\r
168 * overrides : [ { element : 'font', attributes : { 'face' : null } } ]
\r
171 CKEDITOR.config.font_style =
\r
174 styles : { 'font-family' : '#(family)' },
\r
175 overrides : [ { element : 'font', attributes : { 'face' : null } } ]
\r
179 * The list of fonts size to be displayed in the Font Size combo in the
\r
180 * toolbar. Entries are separated by semi-colons (;).
\r
182 * Any kind of "CSS like" size can be used, like "12px", "2.3em", "130%",
\r
183 * "larger" or "x-small".
\r
185 * A display name may be optionally defined by prefixing the entries with the
\r
186 * name and the slash character. For example, "Bigger Font/14px" will be
\r
187 * displayed as "Bigger Font" in the list, but will be outputted as "14px".
\r
189 * @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'
\r
191 * config.fontSize_sizes = '16/16px;24/24px;48/48px;';
\r
193 * config.fontSize_sizes = '12px;2.3em;130%;larger;x-small';
\r
195 * config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';
\r
197 CKEDITOR.config.fontSize_sizes =
\r
198 '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';
\r
201 * The text to be displayed in the Font Size combo is none of the available
\r
202 * values matches the current cursor position or text selection.
\r
205 * // If the default site font size is 12px, we may making it more explicit to the end user.
\r
206 * config.fontSize_defaultLabel = '12px';
\r
208 CKEDITOR.config.fontSize_defaultLabel = '';
\r
211 * The style definition to be used to apply the font size in the text.
\r
214 * // This is actually the default value for it.
\r
215 * config.fontSize_style =
\r
217 * element : 'span',
\r
218 * styles : { 'font-size' : '#(size)' },
\r
219 * overrides : [ { element : 'font', attributes : { 'size' : null } } ]
\r
222 CKEDITOR.config.fontSize_style =
\r
225 styles : { 'font-size' : '#(size)' },
\r
226 overrides : [ { element : 'font', attributes : { 'size' : null } } ]
\r