How do I configure the Image Properties dialog box in CKEditor?

7
votes

My current Image Properties dialog box only has the Image Info and Link tabs available. I want to change this dialog box so that:

  1. I want to remove the Width, Height, Border, HSpace, VSpace, Alignment, and Preview elements from the Image Info screen
  2. I want to remove the Link tab
  3. I want to enable the Upload tab so that users can choose an image file that resides on their local computer

I've been doing lots of searches but can't understand how to do the above at all. Any pointers please? I am using CKEditor 4.4.6 Standard.

2
ckeditor

2 Answers

8
votes

Okay, here's the code on how handle the Image dialog:

CKEDITOR.on('dialogDefinition', function(ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image') {
        var infoTab = dialogDefinition.getContents( 'info' );
        infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
        infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
        infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
        infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
        infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info

        //Remove tab Link
        dialogDefinition.removeContents( 'Link' );
    }
});

For point 3, the default CKEditor doesn't contain Image Browsing Facility... And this mean that the upload and browse button will not appear...

There is 3 options here, and you can see my comment on this page: link on how you can do this.

2
votes

The following resources might be helpful:

  • The Dialog Windows HOWTO section in CKEditor developer documentation.
  • The Using CKEditor Dialog API sample (it is also available in your local CKEditor package) -- check its source code for how the changes are done.
  • The Developer Tools plugin which shows you the names and IDs of all CKEditor dialog window elements.