What Is the Name of the Filebrowser When Uploading a File

avril 12, 2022 Enregistrer un commentaire

Contribute to this guide Report an issue

File Browser API - Creating a Custom File Managing director

CKEditor 4 can be hands integrated with an external file manager (file browser/uploader) thanks to the File Browser plugin which by default is included in the Standard and Full presets.

Since CKEditor 4.9 all file uploads, including those initiated by the File Browser plugin, wait a JSON response (like this one). If yous practise not intend to provide 1, y'all should use an appropriate configuration pick:

                          config.filebrowserUploadMethod = 'form';

To connect a file browser/uploader that is already uniform with CKEditor four, refer to the File Manager Integration article. If you lot desire to integrate with CKFinder, check the CKFinder Integration article.

# Interaction between CKEditor four and File Director

CKEditor 4 automatically sends some boosted arguments to the file manager:

CKEditor – The name of the CKEditor case.
langCode – CKEditor language (en for English).
CKEditorFuncNum – Anonymous role reference number used to pass the URL of a file to CKEditor (a random number).

For instance:

          CKEditor=editor1&CKEditorFuncNum=one&langCode=en

# Case 1

Suppose that CKEditor 4 was created using the following JavaScript telephone call:

          CKEDITOR.supervene upon( 'editor2', {     filebrowserBrowseUrl: '/browser/browse.php?type=Files',     filebrowserUploadUrl: '/uploader/upload.php?type=Files' });

Note: As mentioned earlier, since CKEditor 4.ix.0 you may also need to add the filebrowserUploadMethod: 'form' configuration option.

In order to scan files, CKEditor 4 will phone call:

          /browser/browse.php?blazon=Files&CKEditor=editor2&CKEditorFuncNum=2&langCode=de

The call includes the post-obit elements:

/browser/scan.php?type=Files – The value of the filebrowserBrowseUrl parameter.
&CKEditor=editor2&CKEditorFuncNum=2&langCode=de – The information added past CKEditor:
- CKEditor=editor2 – The name of the CKEditor instance (editor2).
- CKEditorFuncNum=2 – The reference number of an anonymous
  function that should exist used in the callFunction() method.
- langCode=de – The linguistic communication code (in this instance: de for German). This
  parameter can be used to send localized error messages.

# Passing the URL of the Selected File

To send back the file URL from an external file manager, call callFunction() and pass CKEditorFuncNum equally the first argument:

          window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] );

If information (the 3rd argument) is a string, it will be displayed past CKEditor 4. This parameter is unremarkably used to display an error message if a problem occurs during the file upload.

# Example 2

The post-obit example shows how to send the URL from a file managing director using JavaScript lawmaking (save it every bit scan.php):

          <!DOCTYPE html> <html lang="en"> <caput>     <meta charset="UTF-8">     <title>Case: Browsing Files</title>     <script>         // Helper office to get parameters from the query string.         part getUrlParam( paramName ) {             var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );             var match = window.location.search.match( reParam );              return ( match && match.length > 1 ) ? lucifer[1] : nil;         }         // Simulate user action of selecting a file to be returned to CKEditor.         function returnFileUrl() {              var funcNum = getUrlParam( 'CKEditorFuncNum' );             var fileUrl = '/path/to/file.txt';             window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );             window.close();         }     </script> </caput> <body>     <button onclick="returnFileUrl()">Select File</button> </body> </html>

# Example iii

If data is a function, it will be executed in the scope of the push that chosen the file manager. Information technology ways that the server connector can have directly access to CKEditor 4 and the dialog window to which the button belongs.

Suppose that apart from passing the fileUrl value that is assigned to an appropriate field automatically based on the dialog window definition you also want to set the alt attribute, if the file manager was opened in the Image Backdrop dialog window. In order to practice this, pass an anonymous role as a 3rd argument:

          <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-viii">     <title>Case: Browsing Files</title>     <script>         // Helper role to get parameters from the query cord.         function getUrlParam( paramName ) {             var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );             var match = window.location.search.match( reParam );              return ( match && match.length > 1 ) ? friction match[1] : null;         }         // Simulate user activity of selecting a file to be returned to CKEditor.         function returnFileUrl() {              var funcNum = getUrlParam( 'CKEditorFuncNum' );             var fileUrl = 'http://c.cksource.com/a/i/img/sample.jpg';             window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, part() {                 // Get the reference to a dialog window.                 var dialog = this.getDialog();                 // Bank check if this is the Image Properties dialog window.                 if ( dialog.getName() == 'image' ) {                     // Become the reference to a text field that stores the "alt" attribute.                     var element = dialog.getContentElement( 'info', 'txtAlt' );                     // Assign the new value.                     if ( element )                         chemical element.setValue( 'alt text' );                 }                 // Return "false" to stop further execution. In such case CKEditor will ignore the 2d argument ("fileUrl")                 // and the "onSelect" office assigned to the button that called the file manager (if defined).                 // return false;             } );             window.shut();         }     </script> </caput> <body>     <button onclick="returnFileUrl()">Select File</button> </body> </html>

# Case 4

The following code shows how to send back the URL of an uploaded file from the PHP connector (save it equally upload.php):

          <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-viii">     <title>Example: File Upload</title> </caput> <trunk> <?php // Required: bearding function reference number as explained in a higher place. $funcNum = $_GET['CKEditorFuncNum'] ; // 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. $langCode = $_GET['langCode'] ; // Optional: compare it with the value of `ckCsrfToken` sent in a cookie to protect your server-side uploader against CSRF. // Bachelor since CKEditor 4.5.half dozen. $token = $_POST['ckCsrfToken'] ;  // Check the $_FILES array and save the file. Assign the correct path to a variable ($url). $url = '/path/to/uploaded/file.ext'; // Commonly you will just assign something hither if the file could not exist uploaded. $message = 'The uploaded file has been renamed';  echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>"; ?> </trunk> </html>

# Farther Reading

For more than information on integrating CKEditor iv with a file manager refer to the following articles:

File Director Integration
Advanced File Managing director Configuration
CKFinder Integration
Adding the File Manager to Dialog Windows
Uploading Pasted and Dropped Images

malpasshavenalwas.blogspot.com

Source: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browser_api.html

Malpass Havenalwas