1 | /*
|
---|
2 | Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
|
---|
3 | For licensing, see LICENSE.html or http://ckeditor.com/license
|
---|
4 | */
|
---|
5 |
|
---|
6 | /**
|
---|
7 | * @fileOverview The "filebrowser" plugin, it adds support for file uploads and
|
---|
8 | * browsing.
|
---|
9 | *
|
---|
10 | * When file is selected inside of the file browser or uploaded, its url is
|
---|
11 | * inserted automatically to a field, which is described in the 'filebrowser'
|
---|
12 | * attribute. To specify field that should be updated, pass the tab id and
|
---|
13 | * element id, separated with a colon.
|
---|
14 | *
|
---|
15 | * Example 1: (Browse)
|
---|
16 | *
|
---|
17 | * <pre>
|
---|
18 | * {
|
---|
19 | * type : 'button',
|
---|
20 | * id : 'browse',
|
---|
21 | * filebrowser : 'tabId:elementId',
|
---|
22 | * label : editor.lang.common.browseServer
|
---|
23 | * }
|
---|
24 | * </pre>
|
---|
25 | *
|
---|
26 | * If you set the 'filebrowser' attribute on any element other than
|
---|
27 | * 'fileButton', the 'Browse' action will be triggered.
|
---|
28 | *
|
---|
29 | * Example 2: (Quick Upload)
|
---|
30 | *
|
---|
31 | * <pre>
|
---|
32 | * {
|
---|
33 | * type : 'fileButton',
|
---|
34 | * id : 'uploadButton',
|
---|
35 | * filebrowser : 'tabId:elementId',
|
---|
36 | * label : editor.lang.common.uploadSubmit,
|
---|
37 | * 'for' : [ 'upload', 'upload' ]
|
---|
38 | * }
|
---|
39 | * </pre>
|
---|
40 | *
|
---|
41 | * If you set the 'filebrowser' attribute on a fileButton element, the
|
---|
42 | * 'QuickUpload' action will be executed.
|
---|
43 | *
|
---|
44 | * Filebrowser plugin also supports more advanced configuration (through
|
---|
45 | * javascript object).
|
---|
46 | *
|
---|
47 | * The following settings are supported:
|
---|
48 | *
|
---|
49 | * <pre>
|
---|
50 | * [action] - Browse or QuickUpload
|
---|
51 | * [target] - field to update, tabId:elementId
|
---|
52 | * [params] - additional arguments to be passed to the server connector (optional)
|
---|
53 | * [onSelect] - function to execute when file is selected/uploaded (optional)
|
---|
54 | * [url] - the URL to be called (optional)
|
---|
55 | * </pre>
|
---|
56 | *
|
---|
57 | * Example 3: (Quick Upload)
|
---|
58 | *
|
---|
59 | * <pre>
|
---|
60 | * {
|
---|
61 | * type : 'fileButton',
|
---|
62 | * label : editor.lang.common.uploadSubmit,
|
---|
63 | * id : 'buttonId',
|
---|
64 | * filebrowser :
|
---|
65 | * {
|
---|
66 | * action : 'QuickUpload', //required
|
---|
67 | * target : 'tab1:elementId', //required
|
---|
68 | * params : //optional
|
---|
69 | * {
|
---|
70 | * type : 'Files',
|
---|
71 | * currentFolder : '/folder/'
|
---|
72 | * },
|
---|
73 | * onSelect : function( fileUrl, errorMessage ) //optional
|
---|
74 | * {
|
---|
75 | * // Do not call the built-in selectFuntion
|
---|
76 | * // return false;
|
---|
77 | * }
|
---|
78 | * },
|
---|
79 | * 'for' : [ 'tab1', 'myFile' ]
|
---|
80 | * }
|
---|
81 | * </pre>
|
---|
82 | *
|
---|
83 | * Suppose we have a file element with id 'myFile', text field with id
|
---|
84 | * 'elementId' and a fileButton. If filebowser.url is not specified explicitly,
|
---|
85 | * form action will be set to 'filebrowser[DialogName]UploadUrl' or, if not
|
---|
86 | * specified, to 'filebrowserUploadUrl'. Additional parameters from 'params'
|
---|
87 | * object will be added to the query string. It is possible to create your own
|
---|
88 | * uploadHandler and cancel the built-in updateTargetElement command.
|
---|
89 | *
|
---|
90 | * Example 4: (Browse)
|
---|
91 | *
|
---|
92 | * <pre>
|
---|
93 | * {
|
---|
94 | * type : 'button',
|
---|
95 | * id : 'buttonId',
|
---|
96 | * label : editor.lang.common.browseServer,
|
---|
97 | * filebrowser :
|
---|
98 | * {
|
---|
99 | * action : 'Browse',
|
---|
100 | * url : '/ckfinder/ckfinder.html&type=Images',
|
---|
101 | * target : 'tab1:elementId'
|
---|
102 | * }
|
---|
103 | * }
|
---|
104 | * </pre>
|
---|
105 | *
|
---|
106 | * In this example, after pressing a button, file browser will be opened in a
|
---|
107 | * popup. If we don't specify filebrowser.url attribute,
|
---|
108 | * 'filebrowser[DialogName]BrowseUrl' or 'filebrowserBrowseUrl' will be used.
|
---|
109 | * After selecting a file in a file browser, an element with id 'elementId' will
|
---|
110 | * be updated. Just like in the third example, a custom 'onSelect' function may be
|
---|
111 | * defined.
|
---|
112 | */
|
---|
113 | ( function()
|
---|
114 | {
|
---|
115 | /**
|
---|
116 | * Adds (additional) arguments to given url.
|
---|
117 | *
|
---|
118 | * @param {String}
|
---|
119 | * url The url.
|
---|
120 | * @param {Object}
|
---|
121 | * params Additional parameters.
|
---|
122 | */
|
---|
123 | function addQueryString( url, params )
|
---|
124 | {
|
---|
125 | var queryString = [];
|
---|
126 |
|
---|
127 | if ( !params )
|
---|
128 | return url;
|
---|
129 | else
|
---|
130 | {
|
---|
131 | for ( var i in params )
|
---|
132 | if ( ! ( i in Object.prototype ) )
|
---|
133 | queryString.push( i + "=" + encodeURIComponent( params[ i ] ) );
|
---|
134 | }
|
---|
135 |
|
---|
136 | return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
|
---|
137 | }
|
---|
138 |
|
---|
139 | /**
|
---|
140 | * Make a string's first character uppercase.
|
---|
141 | *
|
---|
142 | * @param {String}
|
---|
143 | * str String.
|
---|
144 | */
|
---|
145 | function ucFirst( str )
|
---|
146 | {
|
---|
147 | str += '';
|
---|
148 | var f = str.charAt( 0 ).toUpperCase();
|
---|
149 | return f + str.substr( 1 );
|
---|
150 | }
|
---|
151 |
|
---|
152 | /**
|
---|
153 | * The onlick function assigned to the 'Browse Server' button. Opens the
|
---|
154 | * file browser and updates target field when file is selected.
|
---|
155 | *
|
---|
156 | * @param {CKEDITOR.event}
|
---|
157 | * evt The event object.
|
---|
158 | */
|
---|
159 | function browseServer( evt )
|
---|
160 | {
|
---|
161 | var dialog = this.getDialog();
|
---|
162 | var editor = dialog.getParentEditor();
|
---|
163 |
|
---|
164 | editor._.filebrowserSe = this;
|
---|
165 |
|
---|
166 | var width = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowWidth' ]
|
---|
167 | || editor.config.filebrowserWindowWidth || '80%';
|
---|
168 | var height = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowHeight' ]
|
---|
169 | || editor.config.filebrowserWindowHeight || '70%';
|
---|
170 |
|
---|
171 | var params = this.filebrowser.params || {};
|
---|
172 | params.CKEditor = editor.name;
|
---|
173 | params.CKEditorFuncNum = editor._.filebrowserFn;
|
---|
174 | if ( !params.langCode )
|
---|
175 | params.langCode = editor.langCode;
|
---|
176 |
|
---|
177 | var url = addQueryString( this.filebrowser.url, params );
|
---|
178 | editor.popup( url, width, height );
|
---|
179 | }
|
---|
180 |
|
---|
181 | /**
|
---|
182 | * The onlick function assigned to the 'Upload' button. Makes the final
|
---|
183 | * decision whether form is really submitted and updates target field when
|
---|
184 | * file is uploaded.
|
---|
185 | *
|
---|
186 | * @param {CKEDITOR.event}
|
---|
187 | * evt The event object.
|
---|
188 | */
|
---|
189 | function uploadFile( evt )
|
---|
190 | {
|
---|
191 | var dialog = this.getDialog();
|
---|
192 | var editor = dialog.getParentEditor();
|
---|
193 |
|
---|
194 | editor._.filebrowserSe = this;
|
---|
195 |
|
---|
196 | // If user didn't select the file, stop the upload.
|
---|
197 | if ( !dialog.getContentElement( this[ 'for' ][ 0 ], this[ 'for' ][ 1 ] ).getInputElement().$.value )
|
---|
198 | return false;
|
---|
199 |
|
---|
200 | if ( !dialog.getContentElement( this[ 'for' ][ 0 ], this[ 'for' ][ 1 ] ).getAction() )
|
---|
201 | return false;
|
---|
202 |
|
---|
203 | return true;
|
---|
204 | }
|
---|
205 |
|
---|
206 | /**
|
---|
207 | * Setups the file element.
|
---|
208 | *
|
---|
209 | * @param {CKEDITOR.ui.dialog.file}
|
---|
210 | * fileInput The file element used during file upload.
|
---|
211 | * @param {Object}
|
---|
212 | * filebrowser Object containing filebrowser settings assigned to
|
---|
213 | * the fileButton associated with this file element.
|
---|
214 | */
|
---|
215 | function setupFileElement( editor, fileInput, filebrowser )
|
---|
216 | {
|
---|
217 | var params = filebrowser.params || {};
|
---|
218 | params.CKEditor = editor.name;
|
---|
219 | params.CKEditorFuncNum = editor._.filebrowserFn;
|
---|
220 | if ( !params.langCode )
|
---|
221 | params.langCode = editor.langCode;
|
---|
222 |
|
---|
223 | fileInput.action = addQueryString( filebrowser.url, params );
|
---|
224 | fileInput.filebrowser = filebrowser;
|
---|
225 | }
|
---|
226 |
|
---|
227 | /**
|
---|
228 | * Traverse through the content definition and attach filebrowser to
|
---|
229 | * elements with 'filebrowser' attribute.
|
---|
230 | *
|
---|
231 | * @param String
|
---|
232 | * dialogName Dialog name.
|
---|
233 | * @param {CKEDITOR.dialog.dialogDefinitionObject}
|
---|
234 | * definition Dialog definition.
|
---|
235 | * @param {Array}
|
---|
236 | * elements Array of {@link CKEDITOR.dialog.contentDefinition}
|
---|
237 | * objects.
|
---|
238 | */
|
---|
239 | function attachFileBrowser( editor, dialogName, definition, elements )
|
---|
240 | {
|
---|
241 | var element, fileInput;
|
---|
242 |
|
---|
243 | for ( var i in elements )
|
---|
244 | if ( ! ( i in Object.prototype ) )
|
---|
245 | {
|
---|
246 | element = elements[ i ];
|
---|
247 |
|
---|
248 | if ( element.type == 'hbox' || element.type == 'vbox' )
|
---|
249 | attachFileBrowser( editor, dialogName, definition, element.children );
|
---|
250 |
|
---|
251 | if ( !element.filebrowser )
|
---|
252 | continue;
|
---|
253 |
|
---|
254 | if ( typeof element.filebrowser == 'string' )
|
---|
255 | {
|
---|
256 | var fb =
|
---|
257 | {
|
---|
258 | action : ( element.type == 'fileButton' ) ? 'QuickUpload' : 'Browse',
|
---|
259 | target : element.filebrowser
|
---|
260 | };
|
---|
261 | element.filebrowser = fb;
|
---|
262 | }
|
---|
263 |
|
---|
264 | if ( element.filebrowser.action == 'Browse' )
|
---|
265 | {
|
---|
266 | var url = element.filebrowser.url || editor.config[ 'filebrowser' + ucFirst( dialogName ) + 'BrowseUrl' ]
|
---|
267 | || editor.config.filebrowserBrowseUrl;
|
---|
268 |
|
---|
269 | if ( url )
|
---|
270 | {
|
---|
271 | element.onClick = browseServer;
|
---|
272 | element.filebrowser.url = url;
|
---|
273 | element.hidden = false;
|
---|
274 | }
|
---|
275 | }
|
---|
276 | else if ( element.filebrowser.action == 'QuickUpload' && element[ 'for' ] )
|
---|
277 | {
|
---|
278 | url = element.filebrowser.url || editor.config[ 'filebrowser' + ucFirst( dialogName ) + 'UploadUrl' ]
|
---|
279 | || editor.config.filebrowserUploadUrl;
|
---|
280 |
|
---|
281 | if ( url )
|
---|
282 | {
|
---|
283 | var onClick = element.onClick;
|
---|
284 | element.onClick = function( evt )
|
---|
285 | {
|
---|
286 | // "element" here means the definition object, so we need to find the correct
|
---|
287 | // button to scope the event call
|
---|
288 | var sender = evt.sender;
|
---|
289 | if ( onClick && onClick.call( sender, evt ) === false )
|
---|
290 | return false;
|
---|
291 |
|
---|
292 | return uploadFile.call( sender, evt );
|
---|
293 | };
|
---|
294 |
|
---|
295 | element.filebrowser.url = url;
|
---|
296 | element.hidden = false;
|
---|
297 | setupFileElement( editor, definition.getContents( element[ 'for' ][ 0 ] ).get( element[ 'for' ][ 1 ] ), element.filebrowser );
|
---|
298 | }
|
---|
299 | }
|
---|
300 | }
|
---|
301 | }
|
---|
302 |
|
---|
303 | /**
|
---|
304 | * Updates the target element with the url of uploaded/selected file.
|
---|
305 | *
|
---|
306 | * @param {String}
|
---|
307 | * url The url of a file.
|
---|
308 | */
|
---|
309 | function updateTargetElement( url, sourceElement )
|
---|
310 | {
|
---|
311 | var dialog = sourceElement.getDialog();
|
---|
312 | var targetElement = sourceElement.filebrowser.target || null;
|
---|
313 | url = url.replace( /#/g, '%23' );
|
---|
314 |
|
---|
315 | // If there is a reference to targetElement, update it.
|
---|
316 | if ( targetElement )
|
---|
317 | {
|
---|
318 | var target = targetElement.split( ':' );
|
---|
319 | var element = dialog.getContentElement( target[ 0 ], target[ 1 ] );
|
---|
320 | if ( element )
|
---|
321 | {
|
---|
322 | element.setValue( url );
|
---|
323 | dialog.selectPage( target[ 0 ] );
|
---|
324 | }
|
---|
325 | }
|
---|
326 | }
|
---|
327 |
|
---|
328 | /**
|
---|
329 | * Returns true if filebrowser is configured in one of the elements.
|
---|
330 | *
|
---|
331 | * @param {CKEDITOR.dialog.dialogDefinitionObject}
|
---|
332 | * definition Dialog definition.
|
---|
333 | * @param String
|
---|
334 | * tabId The tab id where element(s) can be found.
|
---|
335 | * @param String
|
---|
336 | * elementId The element id (or ids, separated with a semicolon) to check.
|
---|
337 | */
|
---|
338 | function isConfigured( definition, tabId, elementId )
|
---|
339 | {
|
---|
340 | if ( elementId.indexOf( ";" ) !== -1 )
|
---|
341 | {
|
---|
342 | var ids = elementId.split( ";" );
|
---|
343 | for ( var i = 0 ; i < ids.length ; i++ )
|
---|
344 | {
|
---|
345 | if ( isConfigured( definition, tabId, ids[i]) )
|
---|
346 | return true;
|
---|
347 | }
|
---|
348 | return false;
|
---|
349 | }
|
---|
350 |
|
---|
351 | var elementFileBrowser = definition.getContents( tabId ).get( elementId ).filebrowser;
|
---|
352 | return ( elementFileBrowser && elementFileBrowser.url );
|
---|
353 | }
|
---|
354 |
|
---|
355 | function setUrl( fileUrl, data )
|
---|
356 | {
|
---|
357 | var dialog = this._.filebrowserSe.getDialog(),
|
---|
358 | targetInput = this._.filebrowserSe[ 'for' ],
|
---|
359 | onSelect = this._.filebrowserSe.filebrowser.onSelect;
|
---|
360 |
|
---|
361 | if ( targetInput )
|
---|
362 | dialog.getContentElement( targetInput[ 0 ], targetInput[ 1 ] ).reset();
|
---|
363 |
|
---|
364 | if ( typeof data == 'function' && data.call( this._.filebrowserSe ) === false )
|
---|
365 | return;
|
---|
366 |
|
---|
367 | if ( onSelect && onSelect.call( this._.filebrowserSe, fileUrl, data ) === false )
|
---|
368 | return;
|
---|
369 |
|
---|
370 | // The "data" argument may be used to pass the error message to the editor.
|
---|
371 | if ( typeof data == 'string' && data )
|
---|
372 | alert( data );
|
---|
373 |
|
---|
374 | if ( fileUrl )
|
---|
375 | updateTargetElement( fileUrl, this._.filebrowserSe );
|
---|
376 | }
|
---|
377 |
|
---|
378 | CKEDITOR.plugins.add( 'filebrowser',
|
---|
379 | {
|
---|
380 | init : function( editor, pluginPath )
|
---|
381 | {
|
---|
382 | editor._.filebrowserFn = CKEDITOR.tools.addFunction( setUrl, editor );
|
---|
383 | }
|
---|
384 | } );
|
---|
385 |
|
---|
386 | CKEDITOR.on( 'dialogDefinition', function( evt )
|
---|
387 | {
|
---|
388 | var definition = evt.data.definition,
|
---|
389 | element;
|
---|
390 | // Associate filebrowser to elements with 'filebrowser' attribute.
|
---|
391 | for ( var i in definition.contents )
|
---|
392 | {
|
---|
393 | element = definition.contents[ i ] ;
|
---|
394 | attachFileBrowser( evt.editor, evt.data.name, definition, element.elements );
|
---|
395 | if ( element.hidden && element.filebrowser )
|
---|
396 | {
|
---|
397 | element.hidden = !isConfigured( definition, element[ 'id' ], element.filebrowser );
|
---|
398 | }
|
---|
399 | }
|
---|
400 | } );
|
---|
401 |
|
---|
402 | } )();
|
---|
403 |
|
---|
404 | /**
|
---|
405 | * The location of an external file browser, that should be launched when "Browse Server" button is pressed.
|
---|
406 | * If configured, the "Browse Server" button will appear in Link, Image and Flash dialogs.
|
---|
407 | * @see The <a href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)">File Browser/Uploader</a> documentation.
|
---|
408 | * @name CKEDITOR.config.filebrowserBrowseUrl
|
---|
409 | * @since 3.0
|
---|
410 | * @type String
|
---|
411 | * @default '' (empty string = disabled)
|
---|
412 | * @example
|
---|
413 | * config.filebrowserBrowseUrl = '/browser/browse.php';
|
---|
414 | */
|
---|
415 |
|
---|
416 | /**
|
---|
417 | * The location of a script that handles file uploads.
|
---|
418 | * If set, the "Upload" tab will appear in "Link", "Image" and "Flash" dialogs.
|
---|
419 | * @name CKEDITOR.config.filebrowserUploadUrl
|
---|
420 | * @see The <a href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)">File Browser/Uploader</a> documentation.
|
---|
421 | * @since 3.0
|
---|
422 | * @type String
|
---|
423 | * @default '' (empty string = disabled)
|
---|
424 | * @example
|
---|
425 | * config.filebrowserUploadUrl = '/uploader/upload.php';
|
---|
426 | */
|
---|
427 |
|
---|
428 | /**
|
---|
429 | * The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
|
---|
430 | * If not set, CKEditor will use {@link CKEDITOR.config.filebrowserBrowseUrl}.
|
---|
431 | * @name CKEDITOR.config.filebrowserImageBrowseUrl
|
---|
432 | * @since 3.0
|
---|
433 | * @type String
|
---|
434 | * @default '' (empty string = disabled)
|
---|
435 | * @example
|
---|
436 | * config.filebrowserImageBrowseUrl = '/browser/browse.php?type=Images';
|
---|
437 | */
|
---|
438 |
|
---|
439 | /**
|
---|
440 | * The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
|
---|
441 | * If not set, CKEditor will use {@link CKEDITOR.config.filebrowserBrowseUrl}.
|
---|
442 | * @name CKEDITOR.config.filebrowserFlashBrowseUrl
|
---|
443 | * @since 3.0
|
---|
444 | * @type String
|
---|
445 | * @default '' (empty string = disabled)
|
---|
446 | * @example
|
---|
447 | * config.filebrowserFlashBrowseUrl = '/browser/browse.php?type=Flash';
|
---|
448 | */
|
---|
449 |
|
---|
450 | /**
|
---|
451 | * The location of a script that handles file uploads in the Image dialog.
|
---|
452 | * If not set, CKEditor will use {@link CKEDITOR.config.filebrowserUploadUrl}.
|
---|
453 | * @name CKEDITOR.config.filebrowserImageUploadUrl
|
---|
454 | * @since 3.0
|
---|
455 | * @type String
|
---|
456 | * @default '' (empty string = disabled)
|
---|
457 | * @example
|
---|
458 | * config.filebrowserImageUploadUrl = '/uploader/upload.php?type=Images';
|
---|
459 | */
|
---|
460 |
|
---|
461 | /**
|
---|
462 | * The location of a script that handles file uploads in the Flash dialog.
|
---|
463 | * If not set, CKEditor will use {@link CKEDITOR.config.filebrowserUploadUrl}.
|
---|
464 | * @name CKEDITOR.config.filebrowserFlashUploadUrl
|
---|
465 | * @since 3.0
|
---|
466 | * @type String
|
---|
467 | * @default '' (empty string = disabled)
|
---|
468 | * @example
|
---|
469 | * config.filebrowserFlashUploadUrl = '/uploader/upload.php?type=Flash';
|
---|
470 | */
|
---|
471 |
|
---|
472 | /**
|
---|
473 | * The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
|
---|
474 | * If not set, CKEditor will use {@link CKEDITOR.config.filebrowserBrowseUrl}.
|
---|
475 | * @name CKEDITOR.config.filebrowserImageBrowseLinkUrl
|
---|
476 | * @since 3.2
|
---|
477 | * @type String
|
---|
478 | * @default '' (empty string = disabled)
|
---|
479 | * @example
|
---|
480 | * config.filebrowserImageBrowseLinkUrl = '/browser/browse.php';
|
---|
481 | */
|
---|