Using Browse/Upload Button With Dialog Form

Create Browser Server Button

The code snippet to create a Browse Server Button for a dialog.

{
  type: 'button',
    //hidden by default. CKeditor will make this field visible if a file browser is configured.
    hidden: true,

  id: 'mybrowebutton_id',  //the id for the browse button.
  label: editor.lang.common.browseServer,//label for the button
  filebrowser: {
  action: 'Browse',
    //when the user selects a file we can update another field such as a URL text field in the 
    //screenshot above.
    //the target allows us to specify the field that should be updated when a file is selected.
    //provided in the format TAB_NAME:FIELD_ID

    target: 'tab-basic:path',
    //function called when the user selects a file
    onSelect: function( fileUrl, data ) {
      //fileUrl - the url of the selected file.
  
      //must return true in order for the target field to be updated
      return true;
    }
  }
}

 

This does the same thing as above except that we are manually updating another field when the user selects a file rather than having it done automatically using the target as in the example above.

{
  type: 'button', 
    hidden: true, 
  id: 'mybrowebutton_id',   
  label: editor.lang.common.browseServer, 
  filebrowser: {
  action: 'Browse',
    
    onSelect: function( fileUrl, data ) {
      //fileUrl - the url of the selected file.

      var dialog = this.getDialog();
      //the field with id of 'path' on the tab named 'tab-basic' will be updated with the value of fileUrl
      dialog.getContentElement( 'tab-basic', 'path' ).setValue( fileUrl );
    
      //must return false to be able to update the field.
      return false;
    }
  }
}

Complete Example

This is sample source code for a plugin that uses a dialog. The source code for a dialog is usually stored in its own file. See here for more on plugin with dialogs.

//file containing dialog code.
CKEDITOR.dialog.add( 'insertLayoutRowDialog', function( editor ) {
  return {
    title: 'Insert Row Shortcode',
    minWidth: 400, //window minimum width
    minHeight: 100,//window minimum height
    //now we need to define the content of the page
    contents: [
      //the page will have 2 tabs.

      //THIS IS THE FIRST TAB
      {
        id: 'tab-basic',//identify the tab with a unique ID
        label: 'Basic Settings',//label text for tab
        //define the fields that will be on this tab.
        elements: [
          //define a text input field
          {
            type : 'text',
            id : 'path',
            label : 'URL',
            validate : CKEDITOR.dialog.validate.notEmpty( 'The link must have a URL.' ),
            required : true
          },
          {
            type: 'button',
            hidden: true,
            id: 'id0',
            label: editor.lang.common.browseServer,
            filebrowser: {
              action: 'Browse',
              onSelect: function( fileUrl, data ) {

                var dialog = this.getDialog();
                dialog.getContentElement( 'tab-basic', 'path' ).setValue( fileUrl );
                
                // Do not call the built-in onSelect command
                return false;
              }
            }
          }

        ]
      },
      //THIS IS THE SECOND TAB.
      {
        id: 'Upload', //ID for this tab.
        hidden: true,//hide tab by default. ckfinder will unhide if filebrowser is enabled.
        filebrowser: 'uploadButton',
        label: editor.lang.image.upload,
        //define the elements that will be on the tab.
        elements: [
          //add a file field to the tab for selecting the file.
          {
            type: 'file',
            id: 'upload',
            label: editor.lang.image.btnUpload,
            style: 'height:40px',
            size: 38
          },
          //add a button to the tab for submitting the upload
          {
            type: 'fileButton',
            id: 'uploadButton',
            filebrowser: 'info:txtUrl',
            label: editor.lang.image.btnUpload,
            //we must specify the field this tab is for.
            //TAB: tab with id of 'Upload'
            //FIELD: field with id of 'upload'
            'for': [ 'Upload', 'upload' ]
          }
        ]
      },
    ],
    onOk: function() {
      var dialog = this;
      //CODE to execute when the users presses the ok button
      var equal_height = dialog.getValueOf( 'tab-basic', 'equal_height' );
      if(equal_height) {
        editor.insertHtml('[row equal-height = "true"][/row]');
      }else{
        editor.insertHtml('[row equal-height = "false"][/row]');
      }
    }
  };
});

 

Cookbook Category: 

Add new comment