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