2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
7 * @fileOverview The "filebrowser" plugin, it adds support for file uploads and
\r
10 * When file is selected inside of the file browser or uploaded, its url is
\r
11 * inserted automatically to a field, which is described in the 'filebrowser'
\r
12 * attribute. To specify field that should be updated, pass the tab id and
\r
13 * element id, separated with a colon.
\r
15 * Example 1: (Browse)
\r
21 * filebrowser : 'tabId:elementId',
\r
22 * label : editor.lang.common.browseServer
\r
26 * If you set the 'filebrowser' attribute on any element other than
\r
27 * 'fileButton', the 'Browse' action will be triggered.
\r
29 * Example 2: (Quick Upload)
\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 'filebrowser' attribute on a fileButton element, the
\r
42 * 'QuickUpload' action will be executed.
\r
44 * Filebrowser plugin also supports more advanced configuration (through
\r
45 * javascript object).
\r
47 * The following settings are supported:
\r
50 * [action] - Browse or QuickUpload
\r
51 * [target] - field to update, tabId:elementId
\r
52 * [params] - additional arguments to be passed to the server connector (optional)
\r
53 * [onSelect] - function to execute when file is selected/uploaded (optional)
\r
54 * [url] - the URL to be called (optional)
\r
57 * Example 3: (Quick Upload)
\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 we have a file element with id 'myFile', text field with id
\r
84 * 'elementId' and a fileButton. If filebowser.url is not specified explicitly,
\r
85 * form action will be set to 'filebrowser[DialogName]UploadUrl' or, if not
\r
86 * specified, to 'filebrowserUploadUrl'. Additional parameters from 'params'
\r
87 * object will be added to the query string. It is possible to create your own
\r
88 * uploadHandler and cancel the built-in updateTargetElement command.
\r
90 * Example 4: (Browse)
\r
96 * label : editor.lang.common.browseServer,
\r
99 * action : 'Browse',
\r
100 * url : '/ckfinder/ckfinder.html&type=Images',
\r
101 * target : 'tab1:elementId'
\r
106 * In this example, after pressing a button, file browser will be opened in a
\r
107 * popup. If we don't specify filebrowser.url attribute,
\r
108 * 'filebrowser[DialogName]BrowseUrl' or 'filebrowserBrowseUrl' will be used.
\r
109 * After selecting a file in a file browser, an element with id 'elementId' will
\r
110 * be updated. Just like in the third example, a custom 'onSelect' function may be
\r
116 * Adds (additional) arguments to given url.
\r
121 * params Additional parameters.
\r
123 function addQueryString( url, params )
\r
125 var queryString = [];
\r
131 for ( var i in params )
\r
132 queryString.push( i + "=" + encodeURIComponent( params[ i ] ) );
\r
135 return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
\r
139 * Make a string's first character uppercase.
\r
144 function ucFirst( str )
\r
147 var f = str.charAt( 0 ).toUpperCase();
\r
148 return f + str.substr( 1 );
\r
152 * The onlick function assigned to the 'Browse Server' button. Opens the
\r
153 * file browser and updates target field when file is selected.
\r
155 * @param {CKEDITOR.event}
\r
156 * evt The event object.
\r
158 function browseServer( evt )
\r
160 var dialog = this.getDialog();
\r
161 var editor = dialog.getParentEditor();
\r
163 editor._.filebrowserSe = this;
\r
165 var width = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowWidth' ]
\r
166 || editor.config.filebrowserWindowWidth || '80%';
\r
167 var height = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowHeight' ]
\r
168 || editor.config.filebrowserWindowHeight || '70%';
\r
170 var params = this.filebrowser.params || {};
\r
171 params.CKEditor = editor.name;
\r
172 params.CKEditorFuncNum = editor._.filebrowserFn;
\r
173 if ( !params.langCode )
\r
174 params.langCode = editor.langCode;
\r
176 var url = addQueryString( this.filebrowser.url, params );
\r
177 editor.popup( url, width, height );
\r
181 * The onlick function assigned to the 'Upload' button. Makes the final
\r
182 * decision whether form is really submitted and updates target field when
\r
183 * file is uploaded.
\r
185 * @param {CKEDITOR.event}
\r
186 * evt The event object.
\r
188 function uploadFile( evt )
\r
190 var dialog = this.getDialog();
\r
191 var editor = dialog.getParentEditor();
\r
193 editor._.filebrowserSe = this;
\r
195 // If user didn't select the file, stop the upload.
\r
196 if ( !dialog.getContentElement( this[ 'for' ][ 0 ], this[ 'for' ][ 1 ] ).getInputElement().$.value )
\r
199 if ( !dialog.getContentElement( this[ 'for' ][ 0 ], this[ 'for' ][ 1 ] ).getAction() )
\r
206 * Setups the file element.
\r
208 * @param {CKEDITOR.ui.dialog.file}
\r
209 * fileInput The file element used during file upload.
\r
211 * filebrowser Object containing filebrowser settings assigned to
\r
212 * the fileButton associated with this file element.
\r
214 function setupFileElement( editor, fileInput, filebrowser )
\r
216 var params = filebrowser.params || {};
\r
217 params.CKEditor = editor.name;
\r
218 params.CKEditorFuncNum = editor._.filebrowserFn;
\r
219 if ( !params.langCode )
\r
220 params.langCode = editor.langCode;
\r
222 fileInput.action = addQueryString( filebrowser.url, params );
\r
223 fileInput.filebrowser = filebrowser;
\r
227 * Traverse through the content definition and attach filebrowser to
\r
228 * elements with 'filebrowser' attribute.
\r
231 * dialogName Dialog name.
\r
232 * @param {CKEDITOR.dialog.dialogDefinitionObject}
\r
233 * definition Dialog definition.
\r
235 * elements Array of {@link CKEDITOR.dialog.contentDefinition}
\r
238 function attachFileBrowser( editor, dialogName, definition, elements )
\r
240 var element, fileInput;
\r
242 for ( var i in elements )
\r
244 element = elements[ i ];
\r
246 if ( element.type == 'hbox' || element.type == 'vbox' )
\r
247 attachFileBrowser( editor, dialogName, definition, element.children );
\r
249 if ( !element.filebrowser )
\r
252 if ( typeof element.filebrowser == 'string' )
\r
256 action : ( element.type == 'fileButton' ) ? 'QuickUpload' : 'Browse',
\r
257 target : element.filebrowser
\r
259 element.filebrowser = fb;
\r
262 if ( element.filebrowser.action == 'Browse' )
\r
264 var url = element.filebrowser.url || editor.config[ 'filebrowser' + ucFirst( dialogName ) + 'BrowseUrl' ]
\r
265 || editor.config.filebrowserBrowseUrl;
\r
269 element.onClick = browseServer;
\r
270 element.filebrowser.url = url;
\r
271 element.hidden = false;
\r
274 else if ( element.filebrowser.action == 'QuickUpload' && element[ 'for' ] )
\r
276 url = element.filebrowser.url || editor.config[ 'filebrowser' + ucFirst( dialogName ) + 'UploadUrl' ]
\r
277 || editor.config.filebrowserUploadUrl;
\r
281 element.onClick = uploadFile;
\r
282 element.filebrowser.url = url;
\r
283 element.hidden = false;
\r
284 setupFileElement( editor, definition.getContents( element[ 'for' ][ 0 ] ).get( element[ 'for' ][ 1 ] ), element.filebrowser );
\r
291 * Updates the target element with the url of uploaded/selected file.
\r
294 * url The url of a file.
\r
296 function updateTargetElement( url, sourceElement )
\r
298 var dialog = sourceElement.getDialog();
\r
299 var targetElement = sourceElement.filebrowser.target || null;
\r
300 url = url.replace( /#/g, '%23' );
\r
302 // If there is a reference to targetElement, update it.
\r
303 if ( targetElement )
\r
305 var target = targetElement.split( ':' );
\r
306 var element = dialog.getContentElement( target[ 0 ], target[ 1 ] );
\r
309 element.setValue( url );
\r
310 dialog.selectPage( target[ 0 ] );
\r
316 * Returns true if filebrowser is configured in one of the elements.
\r
318 * @param {CKEDITOR.dialog.dialogDefinitionObject}
\r
319 * definition Dialog definition.
\r
321 * tabId The tab id where element(s) can be found.
\r
323 * elementId The element id (or ids, separated with a semicolon) to check.
\r
325 function isConfigured( definition, tabId, elementId )
\r
327 if ( elementId.indexOf( ";" ) !== -1 )
\r
329 var ids = elementId.split( ";" );
\r
330 for ( var i = 0 ; i < ids.length ; i++ )
\r
332 if ( isConfigured( definition, tabId, ids[i]) )
\r
338 return ( definition.getContents( tabId ).get( elementId ).filebrowser && definition.getContents( tabId ).get( elementId ).filebrowser.url );
\r
341 function setUrl( fileUrl, data )
\r
343 var dialog = this._.filebrowserSe.getDialog(),
\r
344 targetInput = this._.filebrowserSe[ 'for' ],
\r
345 onSelect = this._.filebrowserSe.filebrowser.onSelect;
\r
348 dialog.getContentElement( targetInput[ 0 ], targetInput[ 1 ] ).reset();
\r
350 if ( onSelect && onSelect.call( this._.filebrowserSe, fileUrl, data ) === false )
\r
353 // The "data" argument may be used to pass the error message to the editor.
\r
354 if ( typeof data == 'string' && data )
\r
358 updateTargetElement( fileUrl, this._.filebrowserSe );
\r
361 CKEDITOR.plugins.add( 'filebrowser',
\r
363 init : function( editor, pluginPath )
\r
365 editor._.filebrowserFn = CKEDITOR.tools.addFunction( setUrl, editor );
\r
367 CKEDITOR.on( 'dialogDefinition', function( evt )
\r
369 // Associate filebrowser to elements with 'filebrowser' attribute.
\r
370 for ( var i in evt.data.definition.contents )
\r
372 attachFileBrowser( evt.editor, evt.data.name, evt.data.definition, evt.data.definition.contents[ i ].elements );
\r
373 if ( evt.data.definition.contents[ i ].hidden && evt.data.definition.contents[ i ].filebrowser )
\r
375 evt.data.definition.contents[ i ].hidden =
\r
376 !isConfigured( evt.data.definition, evt.data.definition.contents[ i ][ 'id' ], evt.data.definition.contents[ i ].filebrowser );
\r