首页 > 其他分享 >【博客园发文技巧】不离开编辑页面,批量添加图片链接和设置图片大小

【博客园发文技巧】不离开编辑页面,批量添加图片链接和设置图片大小

时间:2024-05-21 08:59:36浏览次数:26  
标签:source 博客园 图片 var 图片链接 图片大小 cnode 页面

参考文档:https://www.cnblogs.com/sanshi/p/3794796.html

起因

在博客园写文章,有时需要上传好多大图片,如果这些图片过大,则会导致页面变形。

因此有一个实际的需求,能够在博客园的编辑页面,直接批量修改所有图片的大小,然后给这些图片添加链接,以便点击时转到大图。

简单实现

  1. 在博客园编辑页面,上传一些图片到博文中
  2. 点击“编辑HTML源代码”按钮,此时弹出框中就是博客的HTML表示
  3. 打开浏览器调试窗口,拷贝如下 JavaScript 代码,并运行,此时编辑框中HTML代码已经被修正,保存即可!
    var doc = $($('iframe[id^=mce]')[0].contentWindow.document);
    var textarea = doc.find('#htmlSource');
    var source = $('<div>').html(textarea.val());
    source.find('img').each(function () {
        var cnode = $(this);
        if (cnode.parent().is('a')) {
            return;
        }
        var src = cnode.attr('src');
        cnode.width(450).wrap($('<a>', {
            'target': '_blank',
            'href': src
        }));
    });
    textarea.val(source.html());

    注:这里已经加入了容错处理,如果已经为图片添加链接,则不做处理

实际操作如下图所示:

 

标签:source,博客园,图片,var,图片链接,图片大小,cnode,页面
From: https://www.cnblogs.com/y593216/p/18203227

相关文章

  • 【生活日记1】初见博客园
    你好博客园!!!!从大学起就已开始接触博客园,那时候基本上都在这里找相关的技术文档和教程。那时候对编程计算机相关的知识感兴趣一些,可惜自己的专业并不是计算机相关专业,自己是机体一体化专业毕业,那时候不懂学什么专业才好,就是想学点有技术含量的比较好就业!!!毕业了自己从事的并不是自......
  • 博客园美化:CSS更改鼠标样式
    话不多说,先上效果图:实现这个效果真的好简单,哎,还搞了好久............
  • 博客园美化:canvas炫酷背景
    话不多说,先上效果图:yysy,这个当背景确实酷炫!!!......
  • 博客园美化:增加顶部炫彩loading进度条
    之前已经出了一篇关于loading动画的随笔《博客园美化:给网页加上loading动画》,但是每次加载都必须等loading动画加载完成才能进行下一步点击,很浪费时间,所以pass掉了......这次做了一个顶部的loading进度条,加载的同时不影响浏览点击网页,并且进度条颜色十分酷炫(  非主流  )的那种......
  • 博客园美化:给网页加上loading动画
    先看看效果图:效果还不错吧~......
  • 13年的默默守候,文字时代从未终结,终究还是选择常驻博客园
    要说什么时候看到博客园,似乎已经不记得具体的时间了,但是记得申请博客园自己开博客是2011年了,那个时候估计是“年龄”不够,才没有通过审核吧。13年后,再次的申请,居然秒过,看来时间真的是个好“东西”,可以改变很多。也行很多人都会说,文字时代已经过去了,现如今是短视频的年代,或者对或......
  • 博客园美化
    博客园特效美化-Hekiss-博客园(cnblogs.com)博客园美化「详细教程+代码配置」-凌云_void-博客园(cnblogs.com)可爱的博客园样式美化、自定义博客园主题样式-麋鹿鲁哟-博客园(cnblogs.com)博客园SimpleMemory主题美化(含自定义完整代码)-Xiao·Tong-博客园(......
  • 将任意bmp图片大小重新设置后生成新的bmp图片
    #include<stdio.h>#include<stdlib.h>#include<string.h>#pragmapack(1)/*必须在结构体定义之前使用,这是为了让结构体中各成员按1字节对齐*/typedefstructtagBITMAPFILEHEADER{ unsignedshortbfType; //保存图片类型。'BM' unsignedlongbfSize; //位图......
  • 怎么使用 MarsEdit 来管理博客园的博客
    MarsEdit可以管理任何支持MetaWeblog协议的博客。这点来说,比iawriter这类只支持wordpress,ghost这些主流博客架构的文本编辑器还是强很多的。要用MarsEidt来管理博客园,需要以下几步:1.在博客园上申请访问令牌2.在MarsEdit上添加博客园网址3.添加账号、密码4.......
  • 博客园商业化之路-众包平台:偶遇外包项目需求
    我们目前正在以众包平台的商业模式进行融资,在拿到融资之前,先以微信群+GitLab的原始方式运营筹建中的众包平台,目前在召集合作开发者,当前已召集到400多位开发者,在召集开发者的过程中就遇到了一些众包需求。园子的众包平台定位于开发任务的众包,平台分发给开发者的是具体明确的开......