Question

使用image2插件上传图像时，高度和宽度最初设置为图像的尺寸。我们的一些用户正在上传海量图像，然后单击“确定”将其插入页面，而无需先选择合理的尺寸。图像充满了整个编辑器，他们看不到他们在做什么。

如何将初始尺寸设置为300px宽？

我们正在将CKEditor 4.11.1与image2插件一起使用。

我能够通过入侵plugins / image2 / dialog / image2.js并将其添加到第148行周围的onChangeSrc（）来实现这一目标：

apc.ttl=604800
apc.user_ttl=3600
apc.shm_size=256M
apc.include_once_override=1
auto_globals_jit=Off
apc.num_files_hint = 2048

apc.stat_ctime = 0
apc.file_update_protection = 2
apc.stat = 0

然后定义config.image_initial_height = 300和config.image_initial_width = 300。

但是我如何能做到这一点而又不会被黑客入侵？

Answer 1

这对我有用。

用我们自己的方法替换image2 onChange事件，但是保留一个引用并调用它。因为原始的onChangeSrc（）被异步调用，所以我们的代码发生在BEFORE之前。使用250毫秒的超时时间，以确保之后发生。

需要在config中定义两个变量：

config.ckeditor_image2_initial_width = 300;
config.ckeditor_image2_initial_height = 300;

。

jQuery(document).ready(function() {
  if (typeof CKEDITOR !== 'undefined') {
    CKEDITOR.on('dialogDefinition', function(e) {
      if (e.data.name == 'image2') {
        var dialogDefinition = e.data.definition;
        var infoTab = e.data.definition.getContents('info');
        var src = infoTab.elements[0].children[0].children[0];

        // Replace the image2 onChange event with our own, but keep a reference
        // and call it. Because the original onChangeSrc() gets called
        // asynchronously, our code below happens BEFORE. Use a timeout to make
        // sure it happens after.
        // TODO: Convert this to run synchronously.
        src.onChange = CKEDITOR.tools.override(src.onChange, function(original) {
          return function() {
            // Call the original image2 onChangeSrc() function.
            original.call(this);
            var dialog = this.getDialog();
            var widget_image_src = 0;
            if (e.editor.widgets.selected.length) {
              widget_image_src = e.editor.widgets.selected[0].data.src;
            }
            // Fire only when image src is set and has actually changed.
            if (this.getValue() && (this.getValue() !== widget_image_src)) {
              var initial_width = e.editor.config.ckeditor_image2_initial_width;
              var initial_height = e.editor.config.ckeditor_image2_initial_height;
              if (typeof initial_width !== 'undefined' || typeof initial_height !== 'undefined') {
                // If initial height/width has been set, then set a timeout
                // function to adjust the height & width after image2's
                // onChangeSrc().
                CKEDITOR.tools.setTimeout( function() {
                  var width_field = dialog.getContentElement('info', 'width');
                  var height_field = dialog.getContentElement('info', 'height');
                  var new_width = orig_width = width_field.getValue();
                  var new_height = orig_height = height_field.getValue();
                  if (new_height > initial_height) {
                    new_height = initial_height;
                    new_width = Math.round(orig_width * (initial_height / orig_height));
                  }
                  if (new_width > initial_width) {
                    new_width = initial_width;
                    new_height = Math.round(orig_height * (initial_width / orig_width));
                  }
                  width_field.setValue(new_width);
                  height_field.setValue(new_height);
                }, 250 );
              }
            }
          }
        });
      }
    });
  }
});

CKEditor image2更改初始大小

1 个答案: