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

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

我们一直在坚持不懈地努力，帮助新手小白更加方便的进行WEB应用的快速开发，如果您对我们的成果表示认同，并且觉得对你有所帮助。我们愿意接受来自各方面的捐赠^_^，您的帮助是对我们的支持和动力！

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

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