CKEditor: Customized HTML on inserting an image

Question

I\'m using CKEditor 3.5 to provide WYSYWYG editing in a website. When inserting an image you can provide width and height of the image, which results in HTML like follows:

Answer 1

Best bet might be to "recreate" the src (and possibly the style) field's behavior. I've do something similar. (but not as complex)

Start with the original code (from plugins/dialog/image.js) and create setup and commit logic that produces (and parses) the markup you're looking for.

Then during dialog definition

1. Delete Originals
2. Add your "custom" fields

style field not sure, maybe just leave it in the dialog, but stub out it's commit logic.

I added my field to the dialog...

var infoTab = dialogDefinition.getContents( 'info' );
// Move the ID field from "advanced" to "info" tab.
infoTab.add( idField_config);
var idField_config = {
    type : 'text',
    label : 'Name',
    id : 'linkId',
    setup : function( type, element ) {
        //if ( type == IMAGE )
            this.setValue( element.getAttribute( 'id' ) );
    },
    commit : function( type, element ) {
        //if ( type == IMAGE ) {
            if ( this.getValue() || this.isChanged() )
            element.setAttribute( 'id', this.getValue() );
        //}
    }   
};

Issues I faced.

1. New fields get added to end of dialog.
2. Pieces of the original code ( type == IMAGE ) isn't valid (Love to know why but felt comfortable it was safe to comment for my usage)

You might face problems with the markup rules undoing your hard work, but "output html" sample" suggestion should help you weed through that issue.