2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
7 * @fileOverview The "filebrowser" plugin that adds support for file uploads and
\r
10 * When a file is uploaded or selected inside the file browser, its URL is
\r
11 * inserted automatically into a field defined in the <code>filebrowser</code>
\r
12 * attribute. In order to specify a field that should be updated, pass the tab ID and
\r
13 * the element ID, separated with a colon.<br /><br />
\r
15 * <strong>Example 1: (Browse)</strong>
\r
21 * filebrowser : 'tabId:elementId',
\r
22 * label : editor.lang.common.browseServer
\r
26 * If you set the <code>filebrowser</code> attribute for an element other than
\r
27 * the <code>fileButton</code>, the <code>Browse</code> action will be triggered.<br /><br />
\r
29 * <strong>Example 2: (Quick Upload)</strong>
\r
33 * type : 'fileButton',
\r
34 * id : 'uploadButton',
\r
35 * filebrowser : 'tabId:elementId',
\r
36 * label : editor.lang.common.uploadSubmit,
\r
37 * 'for' : [ 'upload', 'upload' ]
\r
41 * If you set the <code>filebrowser</code> attribute for a <code>fileButton</code>
\r
42 * element, the <code>QuickUpload</code> action will be executed.<br /><br />
\r
44 * The filebrowser plugin also supports more advanced configuration performed through
\r
45 * a JavaScript object.
\r
47 * The following settings are supported:
\r
50 * <li><code>action</code> – <code>Browse</code> or <code>QuickUpload</code>.</li>
\r
51 * <li><code>target</code> – the field to update in the <code><em>tabId:elementId</em></code> format.</li>
\r
52 * <li><code>params</code> – additional arguments to be passed to the server connector (optional).</li>
\r
53 * <li><code>onSelect</code> – a function to execute when the file is selected/uploaded (optional).</li>
\r
54 * <li><code>url</code> – the URL to be called (optional).</li>
\r
57 * <strong>Example 3: (Quick Upload)</strong>
\r
61 * type : 'fileButton',
\r
62 * label : editor.lang.common.uploadSubmit,
\r
66 * action : 'QuickUpload', // required
\r
67 * target : 'tab1:elementId', // required
\r
68 * params : // optional
\r
71 * currentFolder : '/folder/'
\r
73 * onSelect : function( fileUrl, errorMessage ) // optional
\r
75 * // Do not call the built-in selectFuntion.
\r
79 * 'for' : [ 'tab1', 'myFile' ]
\r
83 * Suppose you have a file element with an ID of <code>myFile</code>, a text
\r
84 * field with an ID of <code>elementId</code> and a <code>fileButton</code>.
\r
85 * If the <code>filebowser.url</code> attribute is not specified explicitly,
\r
86 * the form action will be set to <code>filebrowser[<em>DialogWindowName</em>]UploadUrl</code>
\r
87 * or, if not specified, to <code>filebrowserUploadUrl</code>. Additional parameters
\r
88 * from the <code>params</code> object will be added to the query string. It is
\r
89 * possible to create your own <code>uploadHandler</code> and cancel the built-in
\r
90 * <code>updateTargetElement</code> command.<br /><br />
\r
92 * <strong>Example 4: (Browse)</strong>
\r
98 * label : editor.lang.common.browseServer,
\r
101 * action : 'Browse',
\r
102 * url : '/ckfinder/ckfinder.html&type=Images',
\r
103 * target : 'tab1:elementId'
\r
108 * In this example, when the button is pressed, the file browser will be opened in a
\r
109 * popup window. If you do not specify the <code>filebrowser.url</code> attribute,
\r
110 * <code>filebrowser[<em>DialogName</em>]BrowseUrl</code> or
\r
111 * <code>filebrowserBrowseUrl</code> will be used. After selecting a file in the file
\r
112 * browser, an element with an ID of <code>elementId</code> will be updated. Just
\r
113 * like in the third example, a custom <code>onSelect</code> function may be defined.
\r
118 * Adds (additional) arguments to given url.
\r
123 * params Additional parameters.
\r
125 function addQueryString( url, params )
\r
127 var queryString = [];
\r
133 for ( var i in params )
\r
134 queryString.push( i + "=" + encodeURIComponent( params[ i ] ) );
\r
137 return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
\r
141 * Make a string's first character uppercase.
\r
146 function ucFirst( str )
\r
149 var f = str.charAt( 0 ).toUpperCase();
\r
150 return f + str.substr( 1 );
\r
154 * The onlick function assigned to the 'Browse Server' button. Opens the
\r
155 * file browser and updates target field when file is selected.
\r
157 * @param {CKEDITOR.event}
\r
158 * evt The event object.
\r
160 function browseServer( evt )
\r
162 var dialog = this.getDialog();
\r
163 var editor = dialog.getParentEditor();
\r
165 editor._.filebrowserSe = this;
\r
167 var width = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowWidth' ]
\r
168 || editor.config.filebrowserWindowWidth || '80%';
\r
169 var height = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowHeight' ]
\r
170 || editor.config.filebrowserWindowHeight || '70%';
\r
172 var params = this.filebrowser.params || {};
\r
173 params.CKEditor = editor.name;
\r
174 params.CKEditorFuncNum = editor._.filebrowserFn;
\r
175 if ( !params.langCode )
\r
176 params.langCode = editor.langCode;
\r
178 var url = addQueryString( this.filebrowser.url, params );
\r
179 // TODO: V4: Remove backward compatibility (#8163).
\r
180 editor.popup( url, width, height, editor.config.filebrowserWindowFeatures || editor.config.fileBrowserWindowFeatures );
\r
184 * The onlick function assigned to the 'Upload' button. Makes the final
\r
185 * decision whether form is really submitted and updates target field when
\r
186 * file is uploaded.
\r
188 * @param {CKEDITOR.event}
\r
189 * evt The event object.
\r
191 function uploadFile( evt )
\r
193 var dialog = this.getDialog();
\r
194 var editor = dialog.getParentEditor();
\r
196 editor._.filebrowserSe = this;
\r
198 // If user didn't select the file, stop the upload.
\r
199 if ( !dialog.getContentElement( this[ 'for' ][ 0 ], this[ 'for' ][ 1 ] ).getInputElement().$.value )
\r
202 if ( !dialog.getContentElement( this[ 'for' ][ 0 ], this[ 'for' ][ 1 ] ).getAction() )
\r
209 * Setups the file element.
\r
211 * @param {CKEDITOR.ui.dialog.file}
\r
212 * fileInput The file element used during file upload.
\r
214 * filebrowser Object containing filebrowser settings assigned to
\r
215 * the fileButton associated with this file element.
\r
217 function setupFileElement( editor, fileInput, filebrowser )
\r
219 var params = filebrowser.params || {};
\r
220 params.CKEditor = editor.name;
\r
221 params.CKEditorFuncNum = editor._.filebrowserFn;
\r
222 if ( !params.langCode )
\r
223 params.langCode = editor.langCode;
\r
225 fileInput.action = addQueryString( filebrowser.url, params );
\r
226 fileInput.filebrowser = filebrowser;
\r
230 * Traverse through the content definition and attach filebrowser to
\r
231 * elements with 'filebrowser' attribute.
\r
234 * dialogName Dialog name.
\r
235 * @param {CKEDITOR.dialog.definitionObject}
\r
236 * definition Dialog definition.
\r
238 * elements Array of {@link CKEDITOR.dialog.definition.content}
\r
241 function attachFileBrowser( editor, dialogName, definition, elements )
\r
243 var element, fileInput;
\r
245 for ( var i in elements )
\r
247 element = elements[ i ];
\r
249 if ( element.type == 'hbox' || element.type == 'vbox' || element.type == 'fieldset' )
\r
250 attachFileBrowser( editor, dialogName, definition, element.children );
\r
252 if ( !element.filebrowser )
\r
255 if ( typeof element.filebrowser == 'string' )
\r
259 action : ( element.type == 'fileButton' ) ? 'QuickUpload' : 'Browse',
\r
260 target : element.filebrowser
\r
262 element.filebrowser = fb;
\r
265 if ( element.filebrowser.action == 'Browse' )
\r
267 var url = element.filebrowser.url;
\r
268 if ( url === undefined )
\r
270 url = editor.config[ 'filebrowser' + ucFirst( dialogName ) + 'BrowseUrl' ];
\r
271 if ( url === undefined )
\r
272 url = editor.config.filebrowserBrowseUrl;
\r
277 element.onClick = browseServer;
\r
278 element.filebrowser.url = url;
\r
279 element.hidden = false;
\r
282 else if ( element.filebrowser.action == 'QuickUpload' && element[ 'for' ] )
\r
284 url = element.filebrowser.url;
\r
285 if ( url === undefined )
\r
287 url = editor.config[ 'filebrowser' + ucFirst( dialogName ) + 'UploadUrl' ];
\r
288 if ( url === undefined )
\r
289 url = editor.config.filebrowserUploadUrl;
\r
294 var onClick = element.onClick;
\r
295 element.onClick = function( evt )
\r
297 // "element" here means the definition object, so we need to find the correct
\r
298 // button to scope the event call
\r
299 var sender = evt.sender;
\r
300 if ( onClick && onClick.call( sender, evt ) === false )
\r
303 return uploadFile.call( sender, evt );
\r
306 element.filebrowser.url = url;
\r
307 element.hidden = false;
\r
308 setupFileElement( editor, definition.getContents( element[ 'for' ][ 0 ] ).get( element[ 'for' ][ 1 ] ), element.filebrowser );
\r
315 * Updates the target element with the url of uploaded/selected file.
\r
318 * url The url of a file.
\r
320 function updateTargetElement( url, sourceElement )
\r
322 var dialog = sourceElement.getDialog();
\r
323 var targetElement = sourceElement.filebrowser.target || null;
\r
325 // If there is a reference to targetElement, update it.
\r
326 if ( targetElement )
\r
328 var target = targetElement.split( ':' );
\r
329 var element = dialog.getContentElement( target[ 0 ], target[ 1 ] );
\r
332 element.setValue( url );
\r
333 dialog.selectPage( target[ 0 ] );
\r
339 * Returns true if filebrowser is configured in one of the elements.
\r
341 * @param {CKEDITOR.dialog.definitionObject}
\r
342 * definition Dialog definition.
\r
344 * tabId The tab id where element(s) can be found.
\r
346 * elementId The element id (or ids, separated with a semicolon) to check.
\r
348 function isConfigured( definition, tabId, elementId )
\r
350 if ( elementId.indexOf( ";" ) !== -1 )
\r
352 var ids = elementId.split( ";" );
\r
353 for ( var i = 0 ; i < ids.length ; i++ )
\r
355 if ( isConfigured( definition, tabId, ids[i] ) )
\r
361 var elementFileBrowser = definition.getContents( tabId ).get( elementId ).filebrowser;
\r
362 return ( elementFileBrowser && elementFileBrowser.url );
\r
365 function setUrl( fileUrl, data )
\r
367 var dialog = this._.filebrowserSe.getDialog(),
\r
368 targetInput = this._.filebrowserSe[ 'for' ],
\r
369 onSelect = this._.filebrowserSe.filebrowser.onSelect;
\r
372 dialog.getContentElement( targetInput[ 0 ], targetInput[ 1 ] ).reset();
\r
374 if ( typeof data == 'function' && data.call( this._.filebrowserSe ) === false )
\r
377 if ( onSelect && onSelect.call( this._.filebrowserSe, fileUrl, data ) === false )
\r
380 // The "data" argument may be used to pass the error message to the editor.
\r
381 if ( typeof data == 'string' && data )
\r
385 updateTargetElement( fileUrl, this._.filebrowserSe );
\r
388 CKEDITOR.plugins.add( 'filebrowser',
\r
390 init : function( editor, pluginPath )
\r
392 editor._.filebrowserFn = CKEDITOR.tools.addFunction( setUrl, editor );
\r
393 editor.on( 'destroy', function () { CKEDITOR.tools.removeFunction( this._.filebrowserFn ); } );
\r
397 CKEDITOR.on( 'dialogDefinition', function( evt )
\r
399 var definition = evt.data.definition,
\r
401 // Associate filebrowser to elements with 'filebrowser' attribute.
\r
402 for ( var i in definition.contents )
\r
404 if ( ( element = definition.contents[ i ] ) )
\r
406 attachFileBrowser( evt.editor, evt.data.name, definition, element.elements );
\r
407 if ( element.hidden && element.filebrowser )
\r
409 element.hidden = !isConfigured( definition, element[ 'id' ], element.filebrowser );
\r
418 * The location of an external file browser that should be launched when the <strong>Browse Server</strong>
\r
419 * button is pressed. If configured, the <strong>Browse Server</strong> button will appear in the
\r
420 * <strong>Link</strong>, <strong>Image</strong>, and <strong>Flash</strong> dialog windows.
\r
421 * @see The <a href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)">File Browser/Uploader</a> documentation.
\r
422 * @name CKEDITOR.config.filebrowserBrowseUrl
\r
425 * @default <code>''</code> (empty string = disabled)
\r
427 * config.filebrowserBrowseUrl = '/browser/browse.php';
\r
431 * The location of the script that handles file uploads.
\r
432 * If set, the <strong>Upload</strong> tab will appear in the <strong>Link</strong>, <strong>Image</strong>,
\r
433 * and <strong>Flash</strong> dialog windows.
\r
434 * @name CKEDITOR.config.filebrowserUploadUrl
\r
435 * @see The <a href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)">File Browser/Uploader</a> documentation.
\r
438 * @default <code>''</code> (empty string = disabled)
\r
440 * config.filebrowserUploadUrl = '/uploader/upload.php';
\r
444 * The location of an external file browser that should be launched when the <strong>Browse Server</strong>
\r
445 * button is pressed in the <strong>Image</strong> dialog window.
\r
446 * If not set, CKEditor will use <code>{@link CKEDITOR.config.filebrowserBrowseUrl}</code>.
\r
447 * @name CKEDITOR.config.filebrowserImageBrowseUrl
\r
450 * @default <code>''</code> (empty string = disabled)
\r
452 * config.filebrowserImageBrowseUrl = '/browser/browse.php?type=Images';
\r
456 * The location of an external file browser that should be launched when the <strong>Browse Server</strong>
\r
457 * button is pressed in the <strong>Flash</strong> dialog window.
\r
458 * If not set, CKEditor will use <code>{@link CKEDITOR.config.filebrowserBrowseUrl}</code>.
\r
459 * @name CKEDITOR.config.filebrowserFlashBrowseUrl
\r
462 * @default <code>''</code> (empty string = disabled)
\r
464 * config.filebrowserFlashBrowseUrl = '/browser/browse.php?type=Flash';
\r
468 * The location of the script that handles file uploads in the <strong>Image</strong> dialog window.
\r
469 * If not set, CKEditor will use <code>{@link CKEDITOR.config.filebrowserUploadUrl}</code>.
\r
470 * @name CKEDITOR.config.filebrowserImageUploadUrl
\r
473 * @default <code>''</code> (empty string = disabled)
\r
475 * config.filebrowserImageUploadUrl = '/uploader/upload.php?type=Images';
\r
479 * The location of the script that handles file uploads in the <strong>Flash</strong> dialog window.
\r
480 * If not set, CKEditor will use <code>{@link CKEDITOR.config.filebrowserUploadUrl}</code>.
\r
481 * @name CKEDITOR.config.filebrowserFlashUploadUrl
\r
484 * @default <code>''</code> (empty string = disabled)
\r
486 * config.filebrowserFlashUploadUrl = '/uploader/upload.php?type=Flash';
\r
490 * The location of an external file browser that should be launched when the <strong>Browse Server</strong>
\r
491 * button is pressed in the <strong>Link</strong> tab of the <strong>Image</strong> dialog window.
\r
492 * If not set, CKEditor will use <code>{@link CKEDITOR.config.filebrowserBrowseUrl}</code>.
\r
493 * @name CKEDITOR.config.filebrowserImageBrowseLinkUrl
\r
496 * @default <code>''</code> (empty string = disabled)
\r
498 * config.filebrowserImageBrowseLinkUrl = '/browser/browse.php';
\r
502 * The features to use in the file browser popup window.
\r
503 * @name CKEDITOR.config.filebrowserWindowFeatures
\r
506 * @default <code>'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes'</code>
\r
508 * config.filebrowserWindowFeatures = 'resizable=yes,scrollbars=no';
\r
512 * The width of the file browser popup window. It can be a number denoting a value in
\r
513 * pixels or a percent string.
\r
514 * @name CKEDITOR.config.filebrowserWindowWidth
\r
515 * @type Number|String
\r
516 * @default <code>'80%'</code>
\r
518 * config.filebrowserWindowWidth = 750;
\r
520 * config.filebrowserWindowWidth = '50%';
\r
524 * The height of the file browser popup window. It can be a number denoting a value in
\r
525 * pixels or a percent string.
\r
526 * @name CKEDITOR.config.filebrowserWindowHeight
\r
527 * @type Number|String
\r
528 * @default <code>'70%'</code>
\r
530 * config.filebrowserWindowHeight = 580;
\r
532 * config.filebrowserWindowHeight = '50%';
\r