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 | };
|
---|