Image2 plugin for CkEditor 4.3: how to remove URL and add border management to the properties dialog

Question

I'm just installed a version of CkEditor 4.3, made with CkBuilder, that includes also the Image2 plugin.

Now, I want to remove the possibility of change the URL of an image from the properties tab, opened by double-click on the image:

As you can see from the image above, I'm able to remove the "hasCaption" ckeckbox, that is present by default. To do this, I use the following code:

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

    if (dialogName == 'image2') {        
        var infoTab = dialogDefinition.getContents('info');
        infoTab.remove('hasCaption'); //Removing the "add caption" functionality
        infoTab.remove('alt'); //Removing the "alternative text" functionality
    }
});

My problem is that there isn't a way to remove the "change URL" functionality.

Furthermore, with the image plug-in (that is automatically disabled from CkBuilder when you add the image2 plug-in) I could change the thickness of the image border. This functionality is not provided in the new image2 plug-in.

So, my final question is the following:

Is there a way to remove the "change URL" text field from the Image Properties tab, and add the "change border thickness" functionality?

Answer 1

Remove the "change URL" functionality

I found the solution to the problem about remove the "change URL" functionality. Just add the following:

infoTab.remove('src');

to the code written in the question. In this way, the complete source code is:

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

    if (dialogName == 'image2') {        
        var infoTab = dialogDefinition.getContents('info');
        infoTab.remove('hasCaption'); //Removing the "add caption" functionality
        infoTab.remove('alt'); //Removing the "alternative text" functionality
        infoTab.remove('src'); //Removing the "change URL" functionality
    }
});

Add the "change border thickness" functionality

From the official Image2 plug-in page, in the comments section, you can find a post by sebstefanov (probably a developer of CkEditor) in which he says that:

[The border property] is not included because borders should be handled by the stylesheet.

After that, in the same section of the same page, some users have expressed their opposition to this choice, sebstefanov said that the team is informed about the problem.

So the only thing I can do is to wait for some official solution...

EDIT: I found a solution in order to add the "change border thickness" functionality.

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

    if (dialogName == 'image2') {        
        var infoTab = dialogDefinition.getContents('info');

        infoTab.add({
            type: 'text',
            width: '50px',
            label : 'Border Thickness',
            id : 'borderField',
            'default' : '0',
            validate : function()
            {
                if ( /[^\d]/.test( this.getValue() ) )
                    return borderErrorMessage;
            }
        });

        var dialog = dialogDefinition.dialog;
        dialog.on('show', function () {
            var image = this.widget.parts.image;

            var borderField = this.getContentElement('info', 'borderField');

            //Using jQuery, I can get the border of the image.
            //You can use any other methods you prefer
            var borderWidth = $(image.$).css("border-left-width").replace(/[^\d]+/g, '');
            borderWidth = borderWidth ? borderWidth : 0;

            borderField.setValue(borderWidth);
        });
        dialog.on('ok', function () {
            var image = this.widget.parts.image;

            var borderField = this.getContentElement('info', 'borderField');

            var newBorderWidth = borderField.getValue() + 'px';

            image.setStyle('border-style', 'solid');
            image.setStyle('border-width', newBorderWidth);
        });
    }

});

I hope this will help someone with my same problem.