How to launch the ImageMaps dialog with your own code

If you have some code outside of CKEditor that inserts an image into its content and then you want to automatically launch the ImageMaps dialog on that image, you can use simply this two lines of code:

First, select the image using the CKEditor API:

editor.getSelection().selectElement(editor.document.getById("myImageID"));

"editor" is a reference to the editor instance that contains the image, and "myImageID" is the id attribute assigned to that image.

It first gets a reference to the element with editor.document.getById and then tells the selection system to select that element.

Then launch the dialog:

editor.openDialog("ImageMaps");

It's just that simple, use the name registered for that dialog and tell editor that you want to open it :-)

 

I hope that this can be helpful for someone.

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

Upgrading to a SSD

Whenever I get a new computer I don't go for the top of the line, I usually prefer to just get one with some nice specs and then one or two years later upgrade some of its components.

This year I realized that I have kept this one for too long :-) and that I should have bought a SSD a little while ago. So I looked up some reviews and one of the main ideas in "Tom's Hardware" talking about which one to pick is:

No matter which one, any SSD is a huge improvement over traditional disk, so I decided that I wouldn't spend too much time researching marks and models, instead I calculated how much space I would need for C: if I move the movies/music/pictures to the existing disk after formatting it as "Data", and it seems that 128Gb is all that I need.

Then I ordered the one that came out as a good option in the reviews that I had found, together with an adapter to use the 2.5" in a 3.5" slot. Fortunately I opened up the tower and as I noticed that there was no empty power connector I ordered also one, I had one SATA cable around so I didn't need that :-)

When setting up the new disk everything was quite easy, except the 2.5" to 3.5" adapter, the fact is that I didn't have a free 3.5" slot so I had to just let the drive laying over an empty space, I guess that this isn't a huge problem as that little disk doesn't have a motor like the old ones.

The performance change is great, the windows evaluation for the disk states that it gets a 7.4 despite the fact that so far I haven't been able to enable the AHCPI that it's supposed to provide even greater performance.

Windows starts up faster, programs load faster, Visual Studio works much faster, but I still keep typing as slow as always :-D

If you still have an old disk go ahead and get a SSD, it's certainly worth it, but you can skip the 2.5 to 3.5 adapter.