ckeditor-ckfinder 上传图像的默认属性（宽度和高度）

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?

Answer 1

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 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

查看_samples文件夹中的output_html.html

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.