ckeditor-ckfinder default attributes (width and height) to uploaded images

Question

When I upload images using ckfinder in the ckeditor the image displays nicely using css width & height. I would like images to have default width and height attributes. How

Answer 1

Look at the output_html.html in the _samples folder

Answer 2

If I'm not mistaken, CKFinder just uploads the file to the server, and does not changes its resolution! You can however, use/create a plugin for CKEditor to change the image width & height when using the image dialog of CKEditor!

Btw: That dialog allows you to change the width and height of the selected image before placing it in your "document"! The values that are placed there by CKEditor are the real width & height of the selected image!

Answer 3

Set the default width and height while clicking "ok" button. Replace the user entered height & width values with default height & width (Override "OnOK" Function)

In config.js

 CKEDITOR.on('dialogDefinition', function (ev) {

    var dialogName = ev.data.name,
        dialogDefinition = ev.data.definition;

    if (dialogName == 'image') {
        var onOk = dialogDefinition.onOk;

        dialogDefinition.onOk = function (e) {
            var width = this.getContentElement('info', 'txtWidth');
            width.setValue('200');//Set Default Width

            var height = this.getContentElement('info', 'txtHeight');
            height.setValue('200');////Set Default height

            onOk && onOk.apply(this, e);
        };
    }
});

Answer 4

In the image.js which is in plugins/image/dialogs folder of the CKEDITOR

there are two lines:

d&&d.setValue(b.$.width);
e&&e.setValue(b.$.height);

If you change b.$.width and b.$.height with numbers or null, you will have default values upon upload of any image size.

For example:

d&&d.setValue(600);
e&&e.setValue(null);

Will insert an image with 600px width and proportional height. Remember to duplicate your image.js before editing it.