时间戳

首页 > 解决方案 > TinyMCE 重写图像 src 上的查询字符串

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

问题描述

我正在使用 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吗？

标签： javascripttinymce

解决方案

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

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

有关工作示例，请参阅此TinyMCE Fiddle 。

推荐阅读