diff options
author | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-01-26 13:57:20 +0100 |
---|---|---|
committer | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-01-26 13:57:20 +0100 |
commit | eaa9271590ab73b6eef3fa88bc74a9553eefd857 (patch) | |
tree | 0d1ad40aee85a74d60e24c5175ce43cf0f39e62d /sources/plugins/font/plugin.js | |
parent | cd64262b335d84c1dc18cd1b986712cf7befdefb (diff) | |
download | ludivine-ckeditor-component-eaa9271590ab73b6eef3fa88bc74a9553eefd857.tar.gz ludivine-ckeditor-component-eaa9271590ab73b6eef3fa88bc74a9553eefd857.tar.zst ludivine-ckeditor-component-eaa9271590ab73b6eef3fa88bc74a9553eefd857.zip |
Add audio, color and fonts4.6.2.3
Diffstat (limited to 'sources/plugins/font/plugin.js')
-rw-r--r-- | sources/plugins/font/plugin.js | 353 |
1 files changed, 353 insertions, 0 deletions
diff --git a/sources/plugins/font/plugin.js b/sources/plugins/font/plugin.js new file mode 100644 index 0000000..8794d89 --- /dev/null +++ b/sources/plugins/font/plugin.js | |||
@@ -0,0 +1,353 @@ | |||
1 | /** | ||
2 | * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. | ||
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license | ||
4 | */ | ||
5 | |||
6 | ( function() { | ||
7 | function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition, order ) { | ||
8 | var config = editor.config, | ||
9 | style = new CKEDITOR.style( styleDefinition ); | ||
10 | |||
11 | // Gets the list of fonts from the settings. | ||
12 | var names = entries.split( ';' ), | ||
13 | values = []; | ||
14 | |||
15 | // Create style objects for all fonts. | ||
16 | var styles = {}; | ||
17 | for ( var i = 0; i < names.length; i++ ) { | ||
18 | var parts = names[ i ]; | ||
19 | |||
20 | if ( parts ) { | ||
21 | parts = parts.split( '/' ); | ||
22 | |||
23 | var vars = {}, | ||
24 | name = names[ i ] = parts[ 0 ]; | ||
25 | |||
26 | vars[ styleType ] = values[ i ] = parts[ 1 ] || name; | ||
27 | |||
28 | styles[ name ] = new CKEDITOR.style( styleDefinition, vars ); | ||
29 | styles[ name ]._.definition.name = name; | ||
30 | } else { | ||
31 | names.splice( i--, 1 ); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | editor.ui.addRichCombo( comboName, { | ||
36 | label: lang.label, | ||
37 | title: lang.panelTitle, | ||
38 | toolbar: 'styles,' + order, | ||
39 | allowedContent: style, | ||
40 | requiredContent: style, | ||
41 | contentTransformations: [ | ||
42 | [ | ||
43 | { | ||
44 | element: 'font', | ||
45 | check: 'span', | ||
46 | left: function( element ) { | ||
47 | return !!element.attributes.size || | ||
48 | !!element.attributes.align || | ||
49 | !!element.attributes.face; | ||
50 | }, | ||
51 | right: function( element ) { | ||
52 | var sizes = [ | ||
53 | '', // Non-existent size "0" | ||
54 | 'x-small', | ||
55 | 'small', | ||
56 | 'medium', | ||
57 | 'large', | ||
58 | 'x-large', | ||
59 | 'xx-large', | ||
60 | '48px' // Closest value to what size="7" might mean. | ||
61 | ]; | ||
62 | |||
63 | element.name = 'span'; | ||
64 | |||
65 | if ( element.attributes.size ) { | ||
66 | element.styles[ 'font-size' ] = sizes[ element.attributes.size ]; | ||
67 | delete element.attributes.size; | ||
68 | } | ||
69 | |||
70 | if ( element.attributes.align ) { | ||
71 | element.styles[ 'text-align' ] = element.attributes.align; | ||
72 | delete element.attributes.align; | ||
73 | } | ||
74 | |||
75 | if ( element.attributes.face ) { | ||
76 | element.styles[ 'font-family' ] = element.attributes.face; | ||
77 | delete element.attributes.face; | ||
78 | } | ||
79 | } | ||
80 | } | ||
81 | ] | ||
82 | ], | ||
83 | panel: { | ||
84 | css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ), | ||
85 | multiSelect: false, | ||
86 | attributes: { 'aria-label': lang.panelTitle } | ||
87 | }, | ||
88 | |||
89 | init: function() { | ||
90 | this.startGroup( lang.panelTitle ); | ||
91 | |||
92 | for ( var i = 0; i < names.length; i++ ) { | ||
93 | var name = names[ i ]; | ||
94 | |||
95 | // Add the tag entry to the panel list. | ||
96 | this.add( name, styles[ name ].buildPreview(), name ); | ||
97 | } | ||
98 | }, | ||
99 | |||
100 | onClick: function( value ) { | ||
101 | editor.focus(); | ||
102 | editor.fire( 'saveSnapshot' ); | ||
103 | |||
104 | var previousValue = this.getValue(), | ||
105 | style = styles[ value ]; | ||
106 | |||
107 | // When applying one style over another, first remove the previous one (#12403). | ||
108 | // NOTE: This is only a temporary fix. It will be moved to the styles system (#12687). | ||
109 | if ( previousValue && value != previousValue ) { | ||
110 | var previousStyle = styles[ previousValue ], | ||
111 | range = editor.getSelection().getRanges()[ 0 ]; | ||
112 | |||
113 | // If the range is collapsed we can't simply use the editor.removeStyle method | ||
114 | // because it will remove the entire element and we want to split it instead. | ||
115 | if ( range.collapsed ) { | ||
116 | var path = editor.elementPath(), | ||
117 | // Find the style element. | ||
118 | matching = path.contains( function( el ) { | ||
119 | return previousStyle.checkElementRemovable( el ); | ||
120 | } ); | ||
121 | |||
122 | if ( matching ) { | ||
123 | var startBoundary = range.checkBoundaryOfElement( matching, CKEDITOR.START ), | ||
124 | endBoundary = range.checkBoundaryOfElement( matching, CKEDITOR.END ), | ||
125 | node, bm; | ||
126 | |||
127 | // If we are at both boundaries it means that the element is empty. | ||
128 | // Remove it but in a way that we won't lose other empty inline elements inside it. | ||
129 | // Example: <p>x<span style="font-size:48px"><em>[]</em></span>x</p> | ||
130 | // Result: <p>x<em>[]</em>x</p> | ||
131 | if ( startBoundary && endBoundary ) { | ||
132 | bm = range.createBookmark(); | ||
133 | // Replace the element with its children (TODO element.replaceWithChildren). | ||
134 | while ( ( node = matching.getFirst() ) ) { | ||
135 | node.insertBefore( matching ); | ||
136 | } | ||
137 | matching.remove(); | ||
138 | range.moveToBookmark( bm ); | ||
139 | |||
140 | // If we are at the boundary of the style element, move out and copy nested styles/elements. | ||
141 | } else if ( startBoundary || endBoundary ) { | ||
142 | range.moveToPosition( matching, startBoundary ? CKEDITOR.POSITION_BEFORE_START : CKEDITOR.POSITION_AFTER_END ); | ||
143 | cloneSubtreeIntoRange( range, path.elements.slice(), matching ); | ||
144 | } else { | ||
145 | // Split the element and clone the elements that were in the path | ||
146 | // (between the startContainer and the matching element) | ||
147 | // into the new place. | ||
148 | range.splitElement( matching ); | ||
149 | range.moveToPosition( matching, CKEDITOR.POSITION_AFTER_END ); | ||
150 | cloneSubtreeIntoRange( range, path.elements.slice(), matching ); | ||
151 | } | ||
152 | |||
153 | editor.getSelection().selectRanges( [ range ] ); | ||
154 | } | ||
155 | } else { | ||
156 | editor.removeStyle( previousStyle ); | ||
157 | } | ||
158 | } | ||
159 | |||
160 | editor[ previousValue == value ? 'removeStyle' : 'applyStyle' ]( style ); | ||
161 | |||
162 | editor.fire( 'saveSnapshot' ); | ||
163 | }, | ||
164 | |||
165 | onRender: function() { | ||
166 | editor.on( 'selectionChange', function( ev ) { | ||
167 | var currentValue = this.getValue(); | ||
168 | |||
169 | var elementPath = ev.data.path, | ||
170 | elements = elementPath.elements; | ||
171 | |||
172 | // For each element into the elements path. | ||
173 | for ( var i = 0, element; i < elements.length; i++ ) { | ||
174 | element = elements[ i ]; | ||
175 | |||
176 | // Check if the element is removable by any of | ||
177 | // the styles. | ||
178 | for ( var value in styles ) { | ||
179 | if ( styles[ value ].checkElementMatch( element, true, editor ) ) { | ||
180 | if ( value != currentValue ) | ||
181 | this.setValue( value ); | ||
182 | return; | ||
183 | } | ||
184 | } | ||
185 | } | ||
186 | |||
187 | // If no styles match, just empty it. | ||
188 | this.setValue( '', defaultLabel ); | ||
189 | }, this ); | ||
190 | }, | ||
191 | |||
192 | refresh: function() { | ||
193 | if ( !editor.activeFilter.check( style ) ) | ||
194 | this.setState( CKEDITOR.TRISTATE_DISABLED ); | ||
195 | } | ||
196 | } ); | ||
197 | } | ||
198 | |||
199 | // Clones the subtree between subtreeStart (exclusive) and the | ||
200 | // leaf (inclusive) and inserts it into the range. | ||
201 | // | ||
202 | // @param range | ||
203 | // @param {CKEDITOR.dom.element[]} elements Elements path in the standard order: leaf -> root. | ||
204 | // @param {CKEDITOR.dom.element/null} substreeStart The start of the subtree. | ||
205 | // If null, then the leaf belongs to the subtree. | ||
206 | function cloneSubtreeIntoRange( range, elements, subtreeStart ) { | ||
207 | var current = elements.pop(); | ||
208 | if ( !current ) { | ||
209 | return; | ||
210 | } | ||
211 | // Rewind the elements array up to the subtreeStart and then start the real cloning. | ||
212 | if ( subtreeStart ) { | ||
213 | return cloneSubtreeIntoRange( range, elements, current.equals( subtreeStart ) ? null : subtreeStart ); | ||
214 | } | ||
215 | |||
216 | var clone = current.clone(); | ||
217 | range.insertNode( clone ); | ||
218 | range.moveToPosition( clone, CKEDITOR.POSITION_AFTER_START ); | ||
219 | |||
220 | cloneSubtreeIntoRange( range, elements ); | ||
221 | } | ||
222 | |||
223 | CKEDITOR.plugins.add( 'font', { | ||
224 | requires: 'richcombo', | ||
225 | // jscs:disable maximumLineLength | ||
226 | lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE% | ||
227 | // jscs:enable maximumLineLength | ||
228 | init: function( editor ) { | ||
229 | var config = editor.config; | ||
230 | |||
231 | addCombo( editor, 'Font', 'family', editor.lang.font, config.font_names, config.font_defaultLabel, config.font_style, 30 ); | ||
232 | addCombo( editor, 'FontSize', 'size', editor.lang.font.fontSize, config.fontSize_sizes, config.fontSize_defaultLabel, config.fontSize_style, 40 ); | ||
233 | } | ||
234 | } ); | ||
235 | } )(); | ||
236 | |||
237 | /** | ||
238 | * The list of fonts names to be displayed in the Font combo in the toolbar. | ||
239 | * Entries are separated by semi-colons (`';'`), while it's possible to have more | ||
240 | * than one font for each entry, in the HTML way (separated by comma). | ||
241 | * | ||
242 | * A display name may be optionally defined by prefixing the entries with the | ||
243 | * name and the slash character. For example, `'Arial/Arial, Helvetica, sans-serif'` | ||
244 | * will be displayed as `'Arial'` in the list, but will be outputted as | ||
245 | * `'Arial, Helvetica, sans-serif'`. | ||
246 | * | ||
247 | * config.font_names = | ||
248 | * 'Arial/Arial, Helvetica, sans-serif;' + | ||
249 | * 'Times New Roman/Times New Roman, Times, serif;' + | ||
250 | * 'Verdana'; | ||
251 | * | ||
252 | * config.font_names = 'Arial;Times New Roman;Verdana'; | ||
253 | * | ||
254 | * @cfg {String} [font_names=see source] | ||
255 | * @member CKEDITOR.config | ||
256 | */ | ||
257 | CKEDITOR.config.font_names = 'Arial/Arial, Helvetica, sans-serif;' + | ||
258 | 'Comic Sans MS/Comic Sans MS, cursive;' + | ||
259 | 'Courier New/Courier New, Courier, monospace;' + | ||
260 | 'Georgia/Georgia, serif;' + | ||
261 | 'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' + | ||
262 | 'Tahoma/Tahoma, Geneva, sans-serif;' + | ||
263 | 'Times New Roman/Times New Roman, Times, serif;' + | ||
264 | 'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' + | ||
265 | 'Verdana/Verdana, Geneva, sans-serif'; | ||
266 | |||
267 | /** | ||
268 | * The text to be displayed in the Font combo is none of the available values | ||
269 | * matches the current cursor position or text selection. | ||
270 | * | ||
271 | * // If the default site font is Arial, we may making it more explicit to the end user. | ||
272 | * config.font_defaultLabel = 'Arial'; | ||
273 | * | ||
274 | * @cfg {String} [font_defaultLabel=''] | ||
275 | * @member CKEDITOR.config | ||
276 | */ | ||
277 | CKEDITOR.config.font_defaultLabel = ''; | ||
278 | |||
279 | /** | ||
280 | * The style definition to be used to apply the font in the text. | ||
281 | * | ||
282 | * // This is actually the default value for it. | ||
283 | * config.font_style = { | ||
284 | * element: 'span', | ||
285 | * styles: { 'font-family': '#(family)' }, | ||
286 | * overrides: [ { element: 'font', attributes: { 'face': null } } ] | ||
287 | * }; | ||
288 | * | ||
289 | * @cfg {Object} [font_style=see example] | ||
290 | * @member CKEDITOR.config | ||
291 | */ | ||
292 | CKEDITOR.config.font_style = { | ||
293 | element: 'span', | ||
294 | styles: { 'font-family': '#(family)' }, | ||
295 | overrides: [ { | ||
296 | element: 'font', attributes: { 'face': null } | ||
297 | } ] | ||
298 | }; | ||
299 | |||
300 | /** | ||
301 | * The list of fonts size to be displayed in the Font Size combo in the | ||
302 | * toolbar. Entries are separated by semi-colons (`';'`). | ||
303 | * | ||
304 | * Any kind of "CSS like" size can be used, like `'12px'`, `'2.3em'`, `'130%'`, | ||
305 | * `'larger'` or `'x-small'`. | ||
306 | * | ||
307 | * A display name may be optionally defined by prefixing the entries with the | ||
308 | * name and the slash character. For example, `'Bigger Font/14px'` will be | ||
309 | * displayed as `'Bigger Font'` in the list, but will be outputted as `'14px'`. | ||
310 | * | ||
311 | * config.fontSize_sizes = '16/16px;24/24px;48/48px;'; | ||
312 | * | ||
313 | * config.fontSize_sizes = '12px;2.3em;130%;larger;x-small'; | ||
314 | * | ||
315 | * config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small'; | ||
316 | * | ||
317 | * @cfg {String} [fontSize_sizes=see source] | ||
318 | * @member CKEDITOR.config | ||
319 | */ | ||
320 | CKEDITOR.config.fontSize_sizes = '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'; | ||
321 | |||
322 | /** | ||
323 | * The text to be displayed in the Font Size combo is none of the available | ||
324 | * values matches the current cursor position or text selection. | ||
325 | * | ||
326 | * // If the default site font size is 12px, we may making it more explicit to the end user. | ||
327 | * config.fontSize_defaultLabel = '12px'; | ||
328 | * | ||
329 | * @cfg {String} [fontSize_defaultLabel=''] | ||
330 | * @member CKEDITOR.config | ||
331 | */ | ||
332 | CKEDITOR.config.fontSize_defaultLabel = ''; | ||
333 | |||
334 | /** | ||
335 | * The style definition to be used to apply the font size in the text. | ||
336 | * | ||
337 | * // This is actually the default value for it. | ||
338 | * config.fontSize_style = { | ||
339 | * element: 'span', | ||
340 | * styles: { 'font-size': '#(size)' }, | ||
341 | * overrides: [ { element: 'font', attributes: { 'size': null } } ] | ||
342 | * }; | ||
343 | * | ||
344 | * @cfg {Object} [fontSize_style=see example] | ||
345 | * @member CKEDITOR.config | ||
346 | */ | ||
347 | CKEDITOR.config.fontSize_style = { | ||
348 | element: 'span', | ||
349 | styles: { 'font-size': '#(size)' }, | ||
350 | overrides: [ { | ||
351 | element: 'font', attributes: { 'size': null } | ||
352 | } ] | ||
353 | }; | ||