On prépare de quoi se concentrer sur les images incorporées.
[ckeditor.git] / skins / ckeditor / _source / plugins / font / plugin.js
1 /*
2 Copyright (c) 2003-2011, 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 };