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 can I accomplish that?

Answered on this page: http://stackoverflow.com/questions/3057938/ckfinder-image-resize — Nuri Akman, Oct 07 '12 at 16:32

Benjamin · Answer 1 · 2015-05-23T05:20:16.133

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);
        };
    }
});

score 2 · Accepted Answer · answered Jun 15 '10 at 23:12

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!

answered Jun 15 '10 at 23:12

Zuul

16,217
6
61
88

After selecting or uploading an image the user can change the width and height. I want it to automatically resize the image to the width and height the user sets. Is that possible? I thaught that the ajax image resizer would fix that but can't get it to work. Somebody has experience with an automatic width and height resize-plugin? In my config file of ckfinder I've got: include_once "plugins/imageresize/plugin.php"; in the config.js I've got: CKFinder.customConfig = function( config ) { config.extraPlugins = 'imageresize'; }; greetings and many thanks or the help !!! – David Verhulst Jun 16 '10 at 23:34
Check this answer: http://stackoverflow.com/questions/3057938/ckfinder-image-resize – Nuri Akman Oct 07 '12 at 16:34

score 0 · Answer 3 · answered Jun 16 '10 at 20:54

0

Look at the output_html.html in the _samples folder

answered Jun 16 '10 at 20:54

AlfonsoML

12,634
2
46
53

the output_html doensn't explain manipulation of the img tag, attributes,styles... – David Verhulst Jun 17 '10 at 09:57
Yes it does. Look under this comment: // Output properties as attributes, not styles. – AlfonsoML Jun 17 '10 at 18:15

score 0 · Answer 4 · answered Dec 20 '19 at 16:50

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.

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

4 Answers4

Linked