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 修剪了 src 中的查询字符串部分。控制台记录 e 仍然设置了 src 和 alt，但如果我显示 TinyMCE 生成的源 src 缺少查询字符串，alt保持完整。

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

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

Answer 1

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

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

请参阅此 TinyMCE Fiddle 以获取工作示例。

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

TinyMCE rewrites query string on image src

javascript

tinymce