ckeditor - CKEditor image2 改变初始大小
问题描述
使用 image2 插件上传图像时,高度和宽度最初设置为图像的尺寸。我们的一些用户正在上传大量图像,然后单击“确定”将其插入页面,而无需先选择合理的尺寸。图像填满了整个编辑器,他们看不到他们在做什么。
如何将初始大小设置为 300px 宽?
我们使用 CKEditor 4.11.1 和 image2 插件。
我能够通过破解 plugins/image2/dialog/image2.js 并将其添加到第 148 行附近的 onChangeSrc() 来实现这一点:
// 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;
}
然后定义 config.image_initial_height=300 和 config.image_initial_width=300。
但是我怎样才能在没有黑客攻击的情况下实现这一目标呢?
解决方案
这对我有用。
用我们自己的替换 image2 onChange 事件,但保留一个引用并调用它。
需要在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);
}
}
}
});
}
});
推荐阅读
- python - 如何将多个值附加到 numPy 数组?
- excel - Excel-VBA:将文件夹资源管理器添加到工作表
- c# - ASP.NET Core 文件上传表单绑定问题
- javascript - 将 js 文件集成到 Anuglar
- android - Firebase 在 ConnectionTracker bindService 上抛出 NullPointerException
- vue.js - 在从本地存储恢复 Vuex Store 之前执行的中间件
- twig - 带有变量的 Twig 模板部分
- excel - 在vba中合并pdf文件
- c# - 动作结果
> 单元测试 - javascript - 更改 innerHTML 不会更新页面