How to insert a new "Browse page" button in the ImageMaps plugin of CKEditor

In this post I'll provide a simple code that inserts a new browse button in the ImageMaps dialog that allows the user to browse existing pages in your CMS besides the normal browse button used to browse for files.

The code can easily be reused for other dialogs like the link or image, you just need to check the name of the elements and then test that it works as expected.

The main idea is to use the "dialogDefinition" event to modify the definition of the dialog on the fly and then create a new button that we will insert besides the existing one. You can check other uses in the samples folder of your CKEditor, there's an "api_dialog" file that shows some of these ideas.

The code is as simple as this:

CKEDITOR.on( "dialogDefinition", function( ev ) {
    // Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

   //Customize "Image Map" dialog 
    if ( dialogName == "ImageMaps" ) {

  var infoTab = dialogDefinition.getContents('info');
  // get the existing "browse" button, adjust its position
  var browseFile = infoTab.get('browse');
  browseFile.style = 'display:inline-block;margin-top:15px; ';

  // Create a new "Browse page" button, linking to our custom page browser
  var browsePage = {
   type : 'button',
   id : 'browsePage',
   hidden : true,
   style: 'display:inline-block;margin-top:15px; ',
   filebrowser :
   {
    action : 'Browse',
    target: 'info:url',
    url: '../intLinks2.aspx'
   },
   label : 'Link to CMS Page or Form'
  };
  // Create a container for the two buttons and replace the existing browse button with this one
  var hBox = { type :'hbox', widths: ['120px', '120px'], children : [browsePage] };
  infoTab.add( hBox, 'browse' );
  infoTab.remove( 'browse' );
  infoTab.add( browseFile, 'browsePage' );

  // Force a better width for the href field
  var txtHref = infoTab.get('href');
  txtHref.style = 'width:200px';
    }
});

I hope that someone finds this useful :-)