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

Anna: /* File Browser Window Size */ API links added

2011-02-16T12:25:13Z

‎File Browser Window Size: API links added

Anna: /* Other Resources */ Article section proof-read

2011-02-01T07:16:22Z

‎Other Resources: Article section proof-read

Anna: /* Using CKFinder */ Article section proof-read

2011-01-31T10:46:18Z

‎Using CKFinder: Article section proof-read

Anna: /* File Browser Window Size */ Article section proof-read

2011-01-31T09:51:18Z

‎File Browser Window Size: Article section proof-read

Anna: Examples for Basic Configuration section proof-read

2011-01-31T09:19:34Z

Examples for Basic Configuration section proof-read

Anna: /* Example 1 */ Article section proof-read

2011-01-31T09:15:24Z

‎Example 1: Article section proof-read

Anna: Basic Configuration section proof-read; headers corrected

2011-01-31T08:58:27Z

Basic Configuration section proof-read; headers corrected

Anna: TOC added

2011-01-31T08:47:33Z

TOC added

Anna: Article introduction proof-read, image updated

2011-01-31T08:45:41Z

Article introduction proof-read, image updated

Anna: /* Example 2 */ Missing comma corrected

2011-01-11T12:01:54Z

‎Example 2: Missing comma corrected

@@ Line 43: / Line 43: @@
 The default width of the file browser window in CKEditor is set to 80% of the screen width, while the default height is set to 70% of the screen height.
-If for any reasons the default values are not suitable for you, you can adjust them to your needs by using the  '''filebrowserWindowWidth''' to change the width and '''filebrowserWindowHeight''' to change the height of the window.
+If for any reasons the default values are not suitable for you, you can adjust them to your needs by using the  <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.filebrowserWindowWidth filebrowserWindowWidth]</code> to change the width and <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.filebrowserWindowHeight filebrowserWindowHeight]</code> to change the height of the window.
 To specify the size of the file browser window in pixels, set it to a number (e.g. <code>"800"</code>). If you prefer to set the height and width of the window as a percentage value of the screen, do not forget to add the percent sign after the number (e.g. <code>"60%"</code>).

@@ Line 123: / Line 123: @@
 == Other Resources ==
-* [[CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)/Custom_File_Browser|Creating a custom File Browser]]
+For more advanced information on integrating CKEditor with a file browser refer to the following articles:
-* [[CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)/Dialogs_-_Adding_File_Browser|Adding the File Browser to dialogs]]
+* [[CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)/Custom_File_Browser|Creating a Custom File Browser]]

@@ Line 76: / Line 76: @@
 == Using CKFinder ==
-[http://ckfinder.com CKFinder] may be easily integrated with CKEditor (see [http://ckfinder.com/demo live demo]).
+CKEditor may easily be integrated with [http://ckfinder.com CKFinder], an advanced Ajax file browser. For a live demonstration, see [http://ckfinder.com/demo here].
-The integration may be done in two ways: by setting CKEditor configuration options (example below) or using the <code>CKFinder.SetupCKEditor()</code> method available in CKFinder API.
+The integration may be conducted in two ways: by setting CKEditor configuration options (example below) or by using the <code>[http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.setupCKEditor CKFinder.SetupCKEditor()]</code> method available in the [http://docs.cksource.com/ckfinder_2.x_api/ CKFinder API].
 === Example 5 ===
 <source lang="javascript">
 CKEDITOR.replace( 'editor1',
@@ Line 93: / Line 94: @@
 </source>
-The example above is valid for PHP environment. <code>/ckfinder/</code> is a base path to the CKFinder installation directory.
+The example above is valid for PHP environment. Note that <code>/ckfinder/</code> is a base path to the CKFinder installation directory.
-* <code>asp</code> - [[CKFinder/Developers_Guide/ASP/CKEditor_Integration|CKFinder for ASP]]
+If you are using CKFinder for ASP, ASP.NET, or ColdFusion, remember to change <code>php</code> above to the right extension:
-* <code>aspx</code> - [[CKFinder/Developers_Guide/ASP.NET/CKEditor_Integration|CKFinder for ASP.NET]]
+* <code>asp</code> &ndash; [[CKFinder/Developers_Guide/ASP/CKEditor_Integration|CKFinder for ASP]]
-* <code>cfm</code> - [[CKFinder/Developers_Guide/ColdFusion/CKEditor_Integration|CKFinder for ColdFusion]]
+* <code>aspx</code> &ndash; [[CKFinder/Developers_Guide/ASP.NET/CKEditor_Integration|CKFinder for ASP.NET]]
-* <code>php</code> - [[CKFinder/Developers_Guide/PHP/CKEditor_Integration|CKFinder for PHP]]
+* <code>cfm</code> &ndash; [[CKFinder/Developers_Guide/ColdFusion/CKEditor_Integration|CKFinder for ColdFusion]]
 === Example 6 ===
-CKEditor + CKFinder integration with the use of <code>CKFinder.SetupCKEditor()</code> function:
+The sample below shows the use of the <code>CKFinder.SetupCKEditor()</code> to insert a CKEditor instance with CKFinder integrated.
 <source lang="javascript">
 var editor = CKEDITOR.replace( 'editor1' );
@@ Line 109: / Line 109: @@
 </source>
-The second parameter of the SetupCKEditor() method is the path to the CKFinder installation.
+The second parameter of the <code>SetupCKEditor()</code> method is the path to the CKFinder installation.
-Please check the _samples/js/ckeditor.html sample distributed with CKFinder to see the full working example of this integration method.
+Please check the <code>_samples/js/ckeditor.html</code> sample distributed with CKFinder to see the full working example of this integration method.
-[[Image:CKEditor and CKFinder.png|thumb|800px|left|link=Image:CKEditor and CKFinder.png|CKFinder integrated with CKEditor.]]
+[[Image:CKEditor and CKFinder.png|thumb|800px|left|link=Image:CKEditor and CKFinder.png|CKFinder integrated with CKEditor]]
 <div style="clear:both"></div>
 === PHP API ===
-As of CKFinder 1.4.2 and CKEditor 3.1 it is possible to integrate CKFinder with CKEditor using PHP API.<br>
+As of CKFinder 1.4.2 and CKEditor 3.1 it is possible to integrate CKFinder with CKEditor using the PHP API.
 See [[CKFinder/Developers_Guide/PHP/CKEditor_Integration#PHP|CKFinder for PHP]] documentation for more details.

@@ Line 41: / Line 41: @@
 == File Browser Window Size ==
-The default width of file browser window in CKEditor is set to 80% of screen width, the default hight is set to 70% of screen height.
+The default width of the file browser window in CKEditor is set to 80% of the screen width, while the default height is set to 70% of the screen height.
-Use '''filebrowserWindowWidth''' to change width and '''filebrowserWindowHeight''' to change height of the window.
+If for any reasons the default values are not suitable for you, you can adjust them to your needs by using the  '''filebrowserWindowWidth''' to change the width and '''filebrowserWindowHeight''' to change the height of the window.
-To set the size of the window in pixels, just set the number value (e.g. <code>"800"</code>). If you prefer to set height and width of the window in percentage of the screen, remember to add percent sign at the end (e.g. <code>"60%"</code>).
+To specify the size of the file browser window in pixels, set it to a number (e.g. <code>"800"</code>). If you prefer to set the height and width of the window as a percentage value of the screen, do not forget to add the percent sign after the number (e.g. <code>"60%"</code>).
 === Example 3 ===
 <source lang="javascript">
 CKEDITOR.replace( 'editor1',
@@ Line 59: / Line 59: @@
 </source>
-To set the window size of file browser inside of a specific dialog box, use '''filebrowser[dialogName]WindowWidth''' and '''filebrowser[dialogName]WindowHeight''' settings.
+To set the window size of the file browser for a specific dialog window, use the <code>filebrowser''[dialogWindowName]''WindowWidth</code> and <code>filebrowser''[dialogWindowName]''WindowHeight</code> settings.
 For example, to change the file browser window size only in "Image" dialog box, change set the <code>filebrowser'''Image'''WindowWidth</code> and <code>filebrowser'''Image'''WindowHeight</code> settings.
 === Example 4 ===
 <source lang="javascript">
 CKEDITOR.replace( 'editor1',

@@ Line 22: / Line 22: @@
 </source>
 It is also possible to set a separate URL for a selected dialog window by using the dialog window name in file browser settings:
 <code>filebrowser''[dialogWindowName]''BrowseUrl</code> and <code>filebrowser''[dialogWindowName]''UploadUrl</code>.
@@ Line 27: / Line 28: @@
 For example to set a special upload URL for the image dialog window, use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.filebrowserImageUploadUrl filebrowser'''Image'''UploadUrl]</code> property.
 <source lang="javascript">
 CKEDITOR.replace( 'editor1',
@@ Line 38: / Line 38: @@
 </source>
-In the example above, <code>filebrowserBrowseUrl</code> and <code>filebrowserUploadUrl</code> settings will be used by default, however in the Image dialog box, CKEditor will use <code>filebrowserImageBrowseUrl</code> and <code>filebrowserImageUploadUrl</code> configuration settings instead.
+In the example above, the <code>filebrowserBrowseUrl</code> and <code>filebrowserUploadUrl</code> settings will be used by default. In the '''Image Properties''' dialog window CKEditor will use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.filebrowserImageBrowseUrl filebrowserImageBrowseUrl]</code> and <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.filebrowserImageUploadUrl filebrowserImageUploadUrl]</code> configuration settings instead.
 == File Browser Window Size ==

@@ Line 13: / Line 13: @@
 === Example 1 ===
 <source lang="javascript">
 CKEDITOR.replace( 'editor1',
@@ Line 21: / Line 22: @@
 </source>
-It is also possible to set a separate url for a selected dialog box, using the dialog name in file browser settings:
+It is also possible to set a separate URL for a selected dialog window by using the dialog window name in file browser settings:
-'''filebrowser[dialogName]BrowseUrl''' and '''filebrowser[dialogName]UploadUrl'''.
+<code>filebrowser''[dialogWindowName]''BrowseUrl</code> and <code>filebrowser''[dialogWindowName]''UploadUrl</code>.
-For example to set a special upload url for the image dialog, set the <code>filebrowser'''Image'''UploadUrl</code> property:
+For example to set a special upload URL for the image dialog window, use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.filebrowserImageUploadUrl filebrowser'''Image'''UploadUrl]</code> property.
 === Example 2 ===

@@ Line 1: / Line 1: @@
 CKEditor can be easily integrated with an external file browser/uploader.
-Once properly set up, all file browser features will automatically become available. This includes the '''Upload''' tab<sup>(1)</sup> in the '''Link''', '''Image''', and '''Flash Properties''' dialog windows and the '''Browse Server''' button<sup>(2)</sup>.
+Once properly set up, all file browser features will automatically become available. This includes the '''Upload''' tab<sup>(1)</sup> in the '''Link''', '''Image''', and '''Flash Properties''' dialog windows as well as the '''Browse Server''' button<sup>(2)</sup>.
 [[Image:CKEditor Image Dialog.png|frame|center|File browser features available for images in CKEditor]]

@@ Line 32: / Line 32: @@
+     {
          filebrowserBrowseUrl : '/browser/browse.php',
-         filebrowserImageBrowseUrl : '/browser/browse.php?type=Images'
+         filebrowserImageBrowseUrl : '/browser/browse.php?type=Images',
          filebrowserUploadUrl : '/uploader/upload.php',
          filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'