如何在CKFinder获取图片URL后为img标签自动添加data-original属性及懒加载类

调整方案 #

你只需要将原代码中硬编码的'images URL'替换为当前img元素的src属性值即可——CKFinder插入图片时会自动将返回的图片URL赋值给img的src属性，直接读取该属性值就能拿到你需要的图片地址。

调整后的完整配置代码如下：

on: {
  instanceReady: function() {
    this.dataProcessor.htmlFilter.addRules( {
      elements: {
        img: function( el ) {
          // 读取CKFinder赋值的src属性作为data-original的值
          const imgSrc = el.attributes.src || '';
          if ( !el.attributes["data-original"] && imgSrc ) {
            el.attributes["data-original"] = imgSrc;
          }
          el.addClass( 'lazy w-100 ortalaimg' );
        }
      }
    } );
  }
}

逻辑说明 #

• 代码会先获取当前img标签的src属性值，该值就是CKFinder返回的图片地址
• 仅当data-original属性不存在、且图片地址不为空时，才会新增/赋值data-original属性，避免异常赋值
• 所有处理后的img标签都会统一添加lazy、w-100、ortalaimg三个类，最终生成的标签和你给出的示例效果完全一致。

内容的提问来源于stack exchange，提问作者Arif Haşlak