用jQuery替换文章编辑器里的图片样式及alt标签 实现自定义图片样式

迅睿教程 0 来源:老K模板网 收藏

使用迅睿cms建站如果是固定位置展示图片或者图片集,我们可以用迅睿cms的图集功能结合前端样式去实现。如果想把文章正文中的图片(通过编辑器上传的),设置指定样式。可以考虑使用本文方法,用 JQ 替换编辑器里的图片样式。

应用范围:

实现点击图片以灯箱显示原图效果等;

实现图片以指定样式显示等;

实现图片下方显示图片标题等;

...

示例代码:

以下为示例代码,根据实际应用,修改图片名称调用标签(我这里调用的是文章标题),修改样式标签等。

<script type='text/javascript'>
const pagesTitle = '{$title}';
// 重构img标签
$('article img').replaceWith(function ({
  const imgSrc = $(this).attr('src');
  return (
      '<div class=""><img src="' + imgSrc + '"  alt="' + pagesTitle + '" ><p class="">' + pagesTitle + '</p></div>'
  );
});
</script>



免责声明:1.凡本站注明“来源:XXX(非老K模板网)”的作品,均转载自其它媒体,所载的文章、图片、音频视频文件等资料的版权归版权所有人所有,如有侵权,请联系laokcms#126.com处理;2.凡本站转载内容仅代表作者本人观点,与老K模板网无关。
0 条评论

网友留言