2014/02/08

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 :-)

7 comments:

Anonymous said...

Hi,
We've recently purchased an enterprise license, and it seems that in chrome, when the language is hebrew the plugin has an offset of the location.
please advise.

Alfonso said...

Hi inblov

Does that page work correctly if the language is English?

Are you using CKEditor in normal or inline mode?

Any other special step to understand better the problem? If you could mail me some screenshots it would help me greatly to understand and reproduce your problem.

ABruschi said...

Hi Alfonso,
I will include your plug-in in a Drupal project where hotspots on an image will link with other internal pages, so having a browse page button will helps a lot.
How should I use the code above? Will it works in Drupal?
The CKeditor link module, https://www.drupal.org/project/ckeditor_link, provides this functionality for links, but I don't know if it's possible to integrate it with your plug-in.
Thanks

Alfonso said...

In theory it's possible to integrate this kind of changes in Drupal, but given that even the simplest task to reconfigure plain CKEditor is much more convoluted when it's used in Drupal, the plain answer is that you will need the help of someone with enough experience to make it work, or spend some hours understanding how Drupal modifies CKEditor and then create the code to integrate all the systems.

ABruschi said...

Considering that the "CKeditor link" module already integrates the standard link button with Drupal internal pages, I think is a matter of including the standard CKeditor link button in your plug-in, without warring too much about Drupal itself.
The right place will be in the Image map properties window, close to the URL field.
Is it right? Can you be interested in such a job?

Alfonso said...

I'm sorry, but I don't have the time to work on custom projects.

Besides that, keep in mind that the ckeditor_link is a dialog that allows the user to select a link and then modify the editor (create/update a link), but this dialog instead is expecting a page that allows the user to select a URL and return that, without modifying the content of the editor.

ABruschi said...

Ok, I understand it.
Anyway, I think that adding a general ckeditor link button to your plug-in to fill the URL field would be a great addition that many users will appreciate.
Thanks