TinyMCE重写图片src的查询字符串。

Question

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

我想让这些查询参数在TinyMCE中自动应用(Simlplified example)

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.iovitnasinecpenYzyEBZQ。

如何防止TinyMCE(5.2.2)重写我的文件？src?

Answer 1

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

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

请看这个 TinyMCE小提琴 的工作实例。