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
20 var parts = names[ i ];
\r
24 parts = parts.split( '/' );
\r
27 name = names[ i ] = parts[ 0 ];
\r
29 vars[ styleType ] = values[ i ] = parts[ 1 ] || name;
\r
31 styles[ name ] = new CKEDITOR.style( styleDefinition, vars );
\r
32 styles[ name ]._.definition.name = name;
\r
35 names.splice( i--, 1 );
\r
38 editor.ui.addRichCombo( comboName,
\r
41 title : lang.panelTitle,
\r
42 className : 'cke_' + ( styleType == 'size' ? 'fontSize' : 'font' ),
\r
45 css : editor.skin.editor.css.concat( config.contentsCss ),
\r
46 multiSelect : false,
\r
47 attributes : { 'aria-label' : lang.panelTitle }
\r
52 this.startGroup( lang.panelTitle );
\r
54 for ( var i = 0 ; i < names.length ; i++ )
\r
56 var name = names[ i ];
\r
58 // Add the tag entry to the panel list.
\r
59 this.add( name, styles[ name ].buildPreview(), name );
\r
63 onClick : function( value )
\r
66 editor.fire( 'saveSnapshot' );
\r
68 var style = styles[ value ];
\r
70 if ( this.getValue() == value )
\r
71 style.remove( editor.document );
\r
73 style.apply( editor.document );
\r
75 editor.fire( 'saveSnapshot' );
\r
78 onRender : function()
\r
80 editor.on( 'selectionChange', function( ev )
\r
82 var currentValue = this.getValue();
\r
84 var elementPath = ev.data.path,
\r
85 elements = elementPath.elements;
\r
87 // For each element into the elements path.
\r
88 for ( var i = 0, element ; i < elements.length ; i++ )
\r
90 element = elements[i];
\r
92 // Check if the element is removable by any of
\r
94 for ( var value in styles )
\r
96 if ( styles[ value ].checkElementRemovable( element, true ) )
\r
98 if ( value != currentValue )
\r
99 this.setValue( value );
\r
105 // If no styles match, just empty it.
\r
106 this.setValue( '', defaultLabel );
\r
113 CKEDITOR.plugins.add( 'font',
\r
115 requires : [ 'richcombo', 'styles' ],
\r
117 init : function( editor )
\r
119 var config = editor.config;
\r
121 addCombo( editor, 'Font', 'family', editor.lang.font, config.font_names, config.font_defaultLabel, config.font_style );
\r
122 addCombo( editor, 'FontSize', 'size', editor.lang.fontSize, config.fontSize_sizes, config.fontSize_defaultLabel, config.fontSize_style );
\r
128 * The list of fonts names to be displayed in the Font combo in the toolbar.
\r
129 * Entries are separated by semi-colons (;), while it's possible to have more
\r
130 * than one font for each entry, in the HTML way (separated by comma).
\r
132 * A display name may be optionally defined by prefixing the entries with the
\r
133 * name and the slash character. For example, "Arial/Arial, Helvetica, sans-serif"
\r
134 * will be displayed as "Arial" in the list, but will be outputted as
\r
135 * "Arial, Helvetica, sans-serif".
\r
138 * config.font_names =
\r
139 * 'Arial/Arial, Helvetica, sans-serif;' +
\r
140 * 'Times New Roman/Times New Roman, Times, serif;' +
\r
143 * config.font_names = 'Arial;Times New Roman;Verdana';
\r
145 CKEDITOR.config.font_names =
\r
146 'Arial/Arial, Helvetica, sans-serif;' +
\r
147 'Comic Sans MS/Comic Sans MS, cursive;' +
\r
148 'Courier New/Courier New, Courier, monospace;' +
\r
149 'Georgia/Georgia, serif;' +
\r
150 'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
\r
151 'Tahoma/Tahoma, Geneva, sans-serif;' +
\r
152 'Times New Roman/Times New Roman, Times, serif;' +
\r
153 'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
\r
154 'Verdana/Verdana, Geneva, sans-serif';
\r
157 * The text to be displayed in the Font combo is none of the available values
\r
158 * matches the current cursor position or text selection.
\r
161 * // If the default site font is Arial, we may making it more explicit to the end user.
\r
162 * config.font_defaultLabel = 'Arial';
\r
164 CKEDITOR.config.font_defaultLabel = '';
\r
167 * The style definition to be used to apply the font in the text.
\r
170 * // This is actually the default value for it.
\r
171 * config.font_style =
\r
173 * element : 'span',
\r
174 * styles : { 'font-family' : '#(family)' },
\r
175 * overrides : [ { element : 'font', attributes : { 'face' : null } } ]
\r
178 CKEDITOR.config.font_style =
\r
181 styles : { 'font-family' : '#(family)' },
\r
182 overrides : [ { element : 'font', attributes : { 'face' : null } } ]
\r
186 * The list of fonts size to be displayed in the Font Size combo in the
\r
187 * toolbar. Entries are separated by semi-colons (;).
\r
189 * Any kind of "CSS like" size can be used, like "12px", "2.3em", "130%",
\r
190 * "larger" or "x-small".
\r
192 * A display name may be optionally defined by prefixing the entries with the
\r
193 * name and the slash character. For example, "Bigger Font/14px" will be
\r
194 * displayed as "Bigger Font" in the list, but will be outputted as "14px".
\r
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'
\r
198 * config.fontSize_sizes = '16/16px;24/24px;48/48px;';
\r
200 * config.fontSize_sizes = '12px;2.3em;130%;larger;x-small';
\r
202 * config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';
\r
204 CKEDITOR.config.fontSize_sizes =
\r
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';
\r
208 * The text to be displayed in the Font Size combo is none of the available
\r
209 * values matches the current cursor position or text selection.
\r
212 * // If the default site font size is 12px, we may making it more explicit to the end user.
\r
213 * config.fontSize_defaultLabel = '12px';
\r
215 CKEDITOR.config.fontSize_defaultLabel = '';
\r
218 * The style definition to be used to apply the font size in the text.
\r
221 * // This is actually the default value for it.
\r
222 * config.fontSize_style =
\r
224 * element : 'span',
\r
225 * styles : { 'font-size' : '#(size)' },
\r
226 * overrides : [ { element : 'font', attributes : { 'size' : null } } ]
\r
229 CKEDITOR.config.fontSize_style =
\r
232 styles : { 'font-size' : '#(size)' },
\r
233 overrides : [ { element : 'font', attributes : { 'size' : null } } ]
\r