Remove htmlPreview in CKEditor's image plugin

Question

I have a problem with hiding preview element in CKEditor's image plugin. I need a very simple image dialog box with only input field for image source and form with button for image uploading. So I removed unnecessary elements using these custom configuration settings:

CKEDITOR.on( 'dialogDefinition', function( ev )
{
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    if ( dialogName == 'image' ){
        dialogDefinition.removeContents( 'advanced' );
        dialogDefinition.removeContents( 'Link' );
        var infoTab = dialogDefinition.getContents( 'info' );
        infoTab.remove( 'ratioLock' ); 
        infoTab.remove( 'txtHeight' );          
        infoTab.remove( 'txtWidth' );          
        infoTab.remove( 'txtBorder'); 
        infoTab.remove( 'txtHSpace'); 
        infoTab.remove( 'txtVSpace'); 
        infoTab.remove( 'cmbAlign' ); 
        infoTab.remove( 'txtAlt' ); 
    }
}); 

Problems begin when I try to hide htmlPreview element. If I simply add infoTab.remove( 'htmlPreview ' );, an error will occur: Uncaught TypeError: Cannot call method 'setStyle' of null because of code dependencies for removed element. I googled a lot and it seems that there are two ways of solving this problem - manually edit source code of plugin as written there (

I guess the only solution is to remove all the javascript functions from image/dialogs/image.js that refer to these html objects, which you removed.

I tried to follow this advice, but couldn't edit source file without subsequent errors) or write my own. Of course, I can simply add some css rules and make elements hidden, but I suppose that's not a good idea. This problem is old enough and I'm sure there is a good solution, but I failed to find it. Hope you will help me. Thank you in advance.

P.S. I have the latest version of CKEditor - 3.6.4.

Answer 1

Due to the way that the image dialog is written, you can't easily remove the preview without further adjusting the rest of the file to also remove all its references.

I would suggest you to use my configuration plugin (or write similar code) as described here: http://alfonsoml.blogspot.com.es/2012/04/hide-dialog-fields-in-ckeditor.html

config.hideDialogFields="image:info:htmlPreview";

You can download the plugin from my blog or if you've switched to CKEditor 4, add it to your build: http://ckeditor.com/addon/confighelper

Answer 2

u can try infoTab.remove( 'htmlPreview' );