javascript - TinyMCE 重写图像 src 上的查询字符串

Question

我正在使用 Glide 包 ( https://glide.thephpleague.com ) 根据查询字符串参数操作图像。假设我有 /some/large/image.jpg ，它可以像这样轻松缩小 /some/large/image.jpg?w=300&h=200

我希望这些查询参数在 TinyMCE 中自动应用(简化示例)

tinymce.init({
  ...
  convert_urls: false,
  setup: (editor) => {
    editor.on('ObjectResized', (e) => {
      let src = e.target.src.replace(/\?.+/, '');
      let resizedSrc = `${src}?w=${e.width}&h=${e.height}`;
      e.target.src = resizedSrc;
      e.target.alt = resizedSrc; // to prove it works
      console.log(e.target); 
    });
  }
})

但是TinyMCE trim 了src中的查询字符串部分。控制台记录的 e 仍然具有我想要的 src 和 alt 设置，但如果我显示 TinyMCE 生成的源 src > 缺少查询字符串，alt 保持不变。

https://codepen.io/vitnasinec/pen/YzyEBZQ

知道如何防止 TinyMCE (5.2.2) 重写我的 src 吗？

Answer 1

在 TinyMCE DOMUtils API 中使用 editor.dom.setAttrib:

editor.dom.setAttrib(e.target, 'src', resizedSrc);
editor.dom.setAttrib(e.target, 'alt', resizedSrc);

查看此TinyMCE Fiddle一个工作示例。