CKEditor image2更改初始大小

问题描述

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

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

我们正在使用带有image2插件的CKEditor 4.11.1。

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

  //限制初始大小
如果（width> editor.config.image_initial_width）{
 height = Math.round（编辑器。 config.image_initial_width *（height / width））
 width = editor.config.image_initial_width; 
} 
 if（height> editor.config.image_initial_height）{
 width = Math.round（editor.config.image_initial_height *（width / height））; 
高度= editor.config.image_initial_height; 
} 
  

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

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

解决方案

为我工作。

将image2 onChange事件替换为我们自己的事件，但保留引用并进行调用。

需要在配置中定义两个变量：

  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 infoTab = e.data.definition.getContents（'info'）; 
 var src_field = infoTab.elements [0] .children [0] .children [0] ; 
 var widthfield = infoTab.elements [2] .children [0]; 
 var height_field = infoTab.elements [2] .children [1]; 
 var src_was_changed = 0; 
 
 //向高度字段添加更改函数
 height_field.onChange = heightChanged; 
 
 //我们需要向src字段添加更改事件已经有
 //一个来自image2插件，用我们自己的插件替换，但保留一个参考
 //并使用CKEditor工具调用它。
 // https://ckeditor.com/docs /ckeditor4/latest/api/CKEDITOR_tools.html#method-overrid e 
 src_field.onChange = CKEDITOR.tools.override（src_field.onChange，function（original）{
 return function（）{
 //调用原始image2 onChangeSrc（）函数。 
 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; 
} 
 //仅在设置了图像src并实际更改后才触发。 
 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'）{
 //设置要在heightChanged（）中使用的标志。 
 src_was_changed = 1; 
} 
} 
} 
}）； 
 
 //更改图像高度字段的事件。 
函数heightChanged（）{
 if（src_was_changed）{
 src_was_changed = 0; 
 var dialog = this.getDialog（）; 
 var initial_width = e.editor.config.ckeditor_image2_initial_width; 
 var initial_height = e.editor.config.ckeditor_image2_initial_height; 
 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）; 
} 
} 
} 
}）； 
} 
}）； 
  

When uploading an image with image2 plugin, the height & width are initially set to the image's dimensions. Some of our users are uploading massive images and click OK to insert it onto the page without first choosing a reasonable size. The image fills the entire editor and they can't see what they're doing.

How can I set the initial size to something like 300px wide?

We're using CKEditor 4.11.1 with image2 plugin.

I was able to achieve this by hacking plugins/image2/dialog/image2.js and adding this to onChangeSrc() around line 148:

 // Limit initial size
 if (width > editor.config.image_initial_width) {
   height = Math.round( editor.config.image_initial_width * ( height / width ) )
   width = editor.config.image_initial_width;
 }
 if (height > editor.config.image_initial_height) {
   width = Math.round( editor.config.image_initial_height * ( width / height) );
   height = editor.config.image_initial_height;
 }

and then defining config.image_initial_height=300 and config.image_initial_width=300.

But how can I achieve this without hacking?

解决方案

Here's what worked for me.

Replace the image2 onChange event with our own, but keep a reference and call it.

Need to define two variables in 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 infoTab = e.data.definition.getContents('info');
        var src_field = infoTab.elements[0].children[0].children[0];
        var widthfield = infoTab.elements[2].children[0];
        var height_field = infoTab.elements[2].children[1];
        var src_was_changed = 0;

        // Add a change function to the height field.
        height_field.onChange = heightChanged;

        // We need to add a change event to the src field but it already has
        // one from image2 plugin. Replace it with our own but keep a reference
        // and call it with CKEditor tools.
        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_tools.html#method-override
        src_field.onChange = CKEDITOR.tools.override(src_field.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') {
                // Set a flag to be used in heightChanged().
                src_was_changed = 1;
              }
            }
          }
        });

        // Change event for the image height field.
        function heightChanged() {
          if (src_was_changed) {
            src_was_changed = 0;
            var dialog = this.getDialog();
            var initial_width = e.editor.config.ckeditor_image2_initial_width;
            var initial_height = e.editor.config.ckeditor_image2_initial_height;
            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);
          }
        }
      }
    });
  }
});

这篇关于CKEditor image2更改初始大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！