CKEditor 3.x/Developers Guide/File Browser (Uploader)/Custom File Browser - Revision history

Wiktor: /* Example 4 */

2011-08-30T08:28:25Z

‎Example 4

Anna: /* Example 3 */ Number -> reference number

2011-02-07T11:50:20Z

‎Example 3: Number -> reference number

Anna: /* Passing the URL of the Selected File */ Paragraph moved from example 3 to example 4

2011-02-07T11:49:39Z

‎Passing the URL of the Selected File: Paragraph moved from example 3 to example 4

Anna: /* Interaction Between CKEditor and File Browser */ Links added

2011-02-07T09:36:55Z

‎Interaction Between CKEditor and File Browser: Links added

Anna: /* Example 3 */ Note removed (not applicable anymore)

2011-02-07T09:21:20Z

‎Example 3: Note removed (not applicable anymore)

Anna: /* Passing the URL of the Selected File */ Section proof-read

2011-02-07T09:14:34Z

‎Passing the URL of the Selected File: Section proof-read

Anna: Article sections proof-read

2011-02-07T08:04:16Z

Article sections proof-read

Anna: Article formatted

2011-02-01T10:01:35Z

Article formatted

Wiktor at 10:49, 18 January 2010

2010-01-18T10:49:22Z

Wiktor at 10:48, 18 January 2010

2010-01-18T10:48:50Z

@@ Line 99: / Line 99: @@
      // Assign the new value.
      if ( element )
-       element.setValue( alt );
+       element.setValue( "alt text" );
+   }
    ...

@@ Line 68: / Line 68: @@
 <source lang="php">
 <?php
-// Required: anonymous function number as explained above.
+// Required: anonymous function reference number as explained above.
 $funcNum = $_GET['CKEditorFuncNum'] ;
 // Optional: instance name (might be used to load a specific configuration file or anything else).

@@ Line 84: / Line 84: @@
 </source>
 If <code>data</code> is a function, it will be executed in the scope of the button that called the file browser. It means that the server connector can have direct access CKEditor and the dialog window to which the button belongs.
 Suppose that apart from passing the <code>fileUrl</code> value that is assigned to an appropriate field automatically based on the dialog window definition you also want to set the <code>alt</code> attribute, if the file browser was opened in the '''Image Properties''' dialog window. In order to do this, pass an anonymous function as a third argument:

@@ Line 7: / Line 7: @@
 == Interaction Between CKEditor and File Browser ==
 CKEditor automatically sends some additional arguments to the file browser:
-* <code>CKEditor</code> &ndash; name of the CKEditor instance,
+* <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#name CKEditor]</code> &ndash; name of the CKEditor instance,
 * <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#langCode langCode]</code> &ndash; CKEditor language (<code>en</code> for English),
-* <code>CKEditorFuncNum</code> &ndash; anonymous function number used to pass the URL of a file to CKEditor (a random number).
+* <code>CKEditorFuncNum</code> &ndash; anonymous function reference number used to pass the URL of a file to CKEditor (a random number).
 <source lang="php">
@@ Line 35: / Line 35: @@
 * <code>&CKEditor=editor2&CKEditorFuncNum=2&langCode=de</code> &ndash; the information added by CKEditor:
 ** <code>CKEditor=editor2</code> &ndash; the name of a CKEditor instance (<code>editor2</code>),
-** <code>CKEditorFuncNum=2</code> &ndash; the number of anonymous function that should be used in the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.tools.html#.callFunction CKEDITOR.tools.callFunction]</code>,
+** <code>CKEditorFuncNum=2</code> &ndash; the reference number of an anonymous function that should be used in the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.tools.html#.callFunction CKEDITOR.tools.callFunction]</code>,
 ** <code>langCode=de</code> &ndash; language code (in this case: German). This parameter can be used to send localized error messages.

@@ Line 83: / Line 83: @@
 ?>
 </source>
 If <code>data</code> is a function, it will be executed in the scope of the button that called the file browser. It means that the server connector can have direct access CKEditor and the dialog window to which the button belongs.

@@ Line 47: / Line 47: @@
 === Example 2 ===
-Sending the url from file browser (JavaScript):
+The following example shows how to send the URL from a file browser using JavaScript code:
 <source lang="javascript">
@@ Line 64: / Line 64: @@
 === Example 3 ===
-Sending back the url of uploaded file from PHP connector:
+The following code shows how to send back the URL of an uploaded file from the PHP connector:
 <source lang="php">
@@ Line 70: / Line 70: @@
 // Required: anonymous function number as explained above.
 $funcNum = $_GET['CKEditorFuncNum'] ;
-// Optional: instance name (might be used to load specific configuration file or anything else)
+// Optional: instance name (might be used to load a specific configuration file or anything else).
 $CKEditor = $_GET['CKEditor'] ;
-// Optional: might be used to provide localized messages
+// Optional: might be used to provide localized messages.
 $langCode = $_GET['langCode'] ;
-// Check the $_FILES array and save the file. Assign the correct path to some variable ($url).
+// Check the $_FILES array and save the file. Assign the correct path to a variable ($url).
 $url = '/path/to/uploaded/file.ext';
-// Usually you will assign here something only if file could not be uploaded.
+// Usually you will only assign something here if the file could not be uploaded.
 $message = '';
@@ Line 84: / Line 84: @@
 </source>
-<div style="color:#dd0000;border:#000 1px solid;padding:5px;margin-bottom:14px"><strong>Note:</strong> the information below applies to CKEditor rev 4940+ (current [http://nightly.ckeditor.com nightly build], CKEditor 3.1.1+/3.2+ (not available at the moment of writing this part of documentation - 18 Jan 2010))</div>
+<div style="color:#dd0000;border:#000 1px solid;padding:5px;margin-bottom:14px"><strong>Note:</strong> the information below applies to CKEditor rev 4940+ (current [http://nightly.ckeditor.com nightly build], CKEditor 3.1.1+/3.2+ (not available at the moment of writing this part of documentation - 18 Jan 2010)).</div>
-If data is a function, it will be executed in the scope of a button that called the file browser. It means that the server connector can directly access CKEditor and the dialog box to which this button belongs.
+If <code>data</code> is a function, it will be executed in the scope of the button that called the file browser. It means that the server connector can have direct access CKEditor and the dialog window to which the button belongs.
 === Example 4 ===
+Suppose that apart from passing the <code>fileUrl</code> value that is assigned to an appropriate field automatically based on the dialog window definition you also want to set the <code>alt</code> attribute, if the file browser was opened in the '''Image Properties''' dialog window. In order to do this, pass an anonymous function as a third argument:
 <source lang="javascript">
 window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, function() {
-   // Get the reference to a dialog.
+   // Get the reference to a dialog window.
    var element, dialog = this.getDialog();
-   // Check if it is an Image dialog.
+   // Check if this is the Image dialog window.
    if (dialog.getName() == 'image') {
      // Get the reference to a text field that holds the "alt" attribute.

@@ Line 1: / Line 1: @@
 __TOC__
 CKEditor can be easily integrated with your own file browser.
@@ Line 4: / Line 5: @@
 To connect a file browser that is already compatible with CKEditor (like [http://ckfinder.com CKFinder]), follow the [[CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)|File Browser (Uploader)]] documentation.
-== Interaction between CKEditor and File Browser ==
+== Interaction Between CKEditor and File Browser ==
-CKEditor sends automatically some additional arguments to the filebrowser:
+CKEditor automatically sends some additional arguments to the file browser:
-* <code>CKEditor</code> - name of the CKEditor instance
+* <code>CKEditor</code> &ndash; name of the CKEditor instance,
-* <code>langCode</code> - CKEditor language ("en" for English)
+* <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#langCode langCode]</code> &ndash; CKEditor language (<code>en</code> for English),
-* <code>CKEditorFuncNum</code> - anonymous function number used to pass the url of a file to CKEditor (random number)
+* <code>CKEditorFuncNum</code> &ndash; anonymous function number used to pass the URL of a file to CKEditor (a random number).
- CKEditor=editor1&CKEditorFuncNum=1&langCode=en
+<source lang="php">
 === Example 1 ===
-Suppose that CKEditor was created with the following code:
+Suppose that CKEditor was created using the following JavaScript call:
 <source lang="javascript">
@@ Line 23: / Line 26: @@
 </source>
-To browse files CKEditor will call:
+In order to browse files, CKEditor will call:
- /browser/browse.php?type=Images&CKEditor=editor2&CKEditorFuncNum=2&langCode=de
+<source lang="php">
-* <code>/browser/browse.php?type=Images</code> - the filebrowserBrowseUrl value
+The call includes the following elements:
-* <code>&CKEditor=editor2&CKEditorFuncNum=2&langCode=de</code> - information added by CKEditor
+* <code>/browser/browse.php?type=Images</code> &ndash; the value of the <code>filebrowserBrowseUrl</code> parameter,
-** <code>CKEditor=editor2</code> - name of CKEditor instance (editor2)
+* <code>&CKEditor=editor2&CKEditorFuncNum=2&langCode=de</code> &ndash; the information added by CKEditor:
-** <code>CKEditorFuncNum=2</code> - the number of anonymous function that shoule be used in CKEDITOR.tools.callFunction
+** <code>CKEditor=editor2</code> &ndash; the name of a CKEditor instance (<code>editor2</code>),
-** <code>langCode=de</code> - language code (German), can be used to send localized error messages
+** <code>CKEditorFuncNum=2</code> &ndash; the number of anonymous function that should be used in the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.tools.html#.callFunction CKEDITOR.tools.callFunction]</code>,
-== Passing the URL of selected file ==
+== Passing the URL of the Selected File ==
-To send back the file url from an external file browser, simply call <code>CKEDITOR.tools.callFunction</code> and pass there CKEditorFuncNum as the first argument:
+To send back the file URL from an external file browser, call <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.tools.html#.callFunction CKEDITOR.tools.callFunction]</code> and pass <code>CKEditorFuncNum</code> as the first argument:
- window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] );
+<source lang="php">
-If data (the third argument) is a string, it will be displayed by CKEditor (usually used to display an error message if problem occurs during file upload).
+If <code>data</code> (the third argument) is a string, it will be displayed by CKEditor. This parameter is usually used to display an error message if a problem occurs during the file upload.
 === Example 2 ===

@@ Line 21: / Line 21: @@
          filebrowserUploadUrl : '/uploader/upload.php?type=Files'
      });
-</source><br />
+</source>
 To browse files CKEditor will call:

@@ Line 54: / Line 54: @@
 var fileUrl = '/path/to/file.txt';
 window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);
-</source><br />
+</source>
 ==== Example 3 ====
@@ Line 75: / Line 76: @@
 echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
 ?>
-</source><br />
+</source>
 <div style="color:#dd0000;border:#000 1px solid;padding:5px;margin-bottom:14px"><strong>Note:</strong> the information below applies to CKEditor rev 4940+ (current [http://nightly.ckeditor.com nightly build], CKEditor 3.1.1+/3.2+ (not available at the moment of writing this part of documentation - 18 Jan 2010))</div>