CKEditor4图片预览：编程设置尺寸如何正确模拟触发keyup事件

我正在为CKEditor图片属性预览区域新增加/减图标按钮，支持用户点击按钮后按照固定像素值增减图片宽度与高度，无需手动在输入框中键入数值。

我发现keyup事件会同步更新图片预览效果，同时触发宽高比锁定逻辑，请问在通过JavaScript/jQuery为宽度/高度输入框设置新的像素值后，应当如何正确模拟触发所需的keyup事件？

直接按你用的技术栈选对应写法就行，核心是要保证事件能正常冒泡，被CKEditor的原有监听捕获到：

原生JS写法 #

先选中输入框DOM、设置新值，再手动构造标准键盘事件派发：

// 获取宽度/高度输入框DOM，这里以宽度输入框为例
const sizeInput = document.querySelector('.cke_dialog_ui_input_width');
// 写入计算好的新像素值
sizeInput.value = newPixelValue;
// 构造keyup事件，必须开冒泡，不然上层监听收不到
const keyupEvt = new KeyboardEvent('keyup', {
  bubbles: true,
  cancelable: true,
  key: 'Digit1',
  code: 'Digit1'
});
sizeInput.dispatchEvent(keyupEvt);

jQuery写法 #

jQuery的trigger方法已经封装好了事件冒泡、兼容处理，写起来更简单：

const $sizeInput = $('.cke_dialog_ui_input_width');
$sizeInput.val(newPixelValue);
// 直接触发keyup即可
$sizeInput.trigger('keyup');

踩坑提醒 #

• 别直接调用sizeInput.onkeyup()，这种方式只会触发元素自身onkeyup属性绑定的方法，不会走标准事件流，CKEditor如果是用事件委托在父节点绑定的逻辑，完全收不到事件，做了等于白做。
• 如果触发keyup后预览更新了，但宽高比锁定逻辑没跑，大概率是你用的CKEditor版本同时监听了input事件，补触发一次input事件就行：

  // 原生JS补充触发input
  sizeInput.dispatchEvent(new Event('input', { bubbles: true }));
  // jQuery补充触发
  $sizeInput.trigger('input').trigger('keyup');
  

内容的提问来源于stack exchange，提问作者nobody