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

二次开发 2023-09-18 12:41:27 1

无需魔法，免费体验ChatGPT-4 / MJ绘图等AI大模型！AI问答、写文案、做表格、绘图、写脚本、写代码...

使用迅睿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>

声明：禁止复制、盗用、采集、发布本站内容到任何网站及各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。