最强markdown编辑器typora+图床七牛云实现图片自动上传(代码片段)

恬静的小魔龙 恬静的小魔龙     2022-12-22     349

关键词:

推荐阅读

一、前言

Typora
首先介绍一下Typora,最强Markdown编辑器,风格简约,功能强大,特别是支持图片复制粘贴,现在又有了图片自动上传服务器返回url的功能了,再也不用先上传图片到图床,然后再去引用图片了。

七牛云
七牛云,强推荐,免费,注册认证给10G永久免费空间,好良心呀,有免费SSL证书。
七牛云30天会收回测试域名,所以你需要有自己的域名,并且绑定。

二、效果展示


自动上传到图床,并且返回url。
好方便啊有木有。

三、正文

3-1、Typora软件的设置

首先打开Typora,选择“文件→偏好设置→图像”:

跟着步骤进行操作:

等待下载完毕,点击打开配置文件,将下面内容复制进去:


    "picBed": 
      "uploader": "qiniu",
      "qiniu": 
        "accessKey": "",
        "secretKey": "",
        "bucket": "", // 存储空间名
        "url": "", // 自定义域名
        "area":  "", // 存储区域编号
        "options": "", // 网址后缀,比如?imgslim
        "path": "img/" // 自定义存储路径,比如 img/
      
    ,
    "picgoPlugins": 


接下来,就需要注册七牛云,然后将每个参数都补充完整。

3-2、七牛云的注册

3-2-1、注册账号

首先进入官网https://www.qiniu.com/注册账号:

下一步:

3-2-2、实名认证

然后进行实名认证https://portal.qiniu.com/user/profile

3-2-3、绑定域名

如果有自己的域名就绑定自己的域名,如果没有域名,就可以用测试域名,但是测试域名7天就回收了,就不能用了,最好有自己的域名:

域名的申请https://console.bce.baidu.com/bcd/#/bcd/overview

价格都不太一样,买完还需要进行域名备案,备案还挺麻烦的,我申请了很多次才通过了:

不过基本1-3周也能搞定。

3-2-4、新建空间

进入控制台后,点击空间管理,https://portal.qiniu.com/kodo/bucket,然后点击新建空间:

储存空间名称和储存区域需要记下来,后面要用到:

3-3、参数补充完整

下面就需要进行参数补充:


    "picBed": 
      "uploader": "qiniu",
      "qiniu": 
        "accessKey": "",
        "secretKey": "",
        "bucket": "", // 存储空间名
        "url": "", // 自定义域名
        "area":  "", // 存储区域编号
        "options": "", // 网址后缀,比如?imgslim
        "path": "img/" // 自定义存储路径,比如 img/
      
    ,
    "picgoPlugins": 

accessKey、secretKey

点击右上角头像,选择密匙管理:

将下面参数复制粘贴到指定字段后:

bucket、area


bucket=储存空间名称
area=储存区域,填入存储区域的编号即可

url

点击空间管理,点击域名管理:

协议+域名就是url字段的值:

比如我的是:
http://cdn.qq764424567.top

如果是HTTPS协议,那么就是:
https://cdn.qq764424567.top

总体如下:

3-4、测试上传图片

3-4-1、上传成功字样

打开Typora,选择验证图片上传选项:

出现成功上传图片的字样说明成功了:

3-4-2、错误解决

当然,也可能出现以下错误:

613 错误


这个是你存储空间的名称写错了,在检查一下存储空间的名称。

400 错误


这个是存储区域错误,看一下编号是不是写错了。

401 错误

这个是accessKey或者secretKey填入错误。

平台标识错误

uploader:
qiniu:七牛云
gitee:码云
aliyun:阿里云

这个参数不要写错了

使用七牛云做图床

...技术A背景对于程序员来说,最好的写作方式莫过于使用markdown的语法进行编辑,好处就不多讲,但是缺点也很明显,我相信很多程序员在使用markdown的客户端(如Typora)进行编辑的时候都会遇到图床的问题。图床简单的说就是存... 查看详情

最强markdown编辑器typora,基于picgo和阿里云oss图床教程(代码片段)

...PDF文件,Markdown格式越来越流行了。而目前本地Markdown编辑器最好使的莫过于Typora了。本人所有的文章编写几乎都在使用Typora,所有特意购买了付费版本,永久版,价格也不贵。文章中经常会用到图标,如果没... 查看详情

在ipic中添加七牛云

...中的图就是通过上述方式先上传至七牛、再粘贴至Markdown编辑器中,确实很方便,大家试试吧。 查看详情

最强markdown编辑器typora,基于picgo和阿里云oss图床教程(代码片段)

...PDF文件,Markdown格式越来越流行了。而目前本地Markdown编辑器最好使的莫过于Typora了。本人所有的文章编写几乎都在使用Typora,所有特意购买了付费版本,永久版,价格也不贵。文章中经常会用到图标,如果没... 查看详情

基于github/七牛云+picgo搭建属于typora的图床(代码片段)

基于GitHub/七牛云+PicGo搭建属于Typora的图床1软件下载Typora官网:TyporaPicGo在GitHub上的地址:GitHub-PicGo2方式一:GitHub2.1创建图片库在自己的GitHub上创建一个库,当做图床,专门用来存储图片。具体操作流程与... 查看详情

常用网站

微信读书gitee-图床七牛云-图床Picgo-mdnice:让微信排版变nicemarkdown-nice文档 查看详情

windows环境下typora+picgo+github图床让markdown编辑起飞(代码片段)

...劳永逸的效果。Typora是我目前找到的最接近完美的Markdown编辑器。你可以点击此处的链接下载安装 查看详情

一次艰难的图床选择经历(mweb+picgo+github)

...插入图片的情况,我之前的做法是先在Boostnote这种Markdown编辑器里面写个草稿,如果有图片就附上图片,然后再粘到的web端。当然图片也需要另拖,会生成一个的图片链接,相当于把作为图床,然后我再把排好版的文章发布到自... 查看详情

如何基于七牛云存储+markdown编辑器做静态博客

参考技术A  首先,在七牛上创建一个bucket,我们假设名字叫qiniu。上传一个样式单文件stylesheet.css。假设关联的域名叫open.qiniudn.com,那么这个样式单可以通过http://open.qiniudn.com/stylesheet.css访问到。  其次,为qiniu这个空间设... 查看详情

openwrite编辑器如何配置七牛云图床

...是否可以新建文章,当前图床变成”七牛云“上传图片到编辑器采用实时预览功能,图片能看到打开七牛云的空间管理,看到img已经上传,大功告成!!!文末福利Java资料大全链接:https://pan.baidu.com/s/1pUCCPstPnlGDCljtBVUsXQ密码:b2xc更... 查看详情

markdown新解决方案:typora+本地备份+github图床(代码片段)

20200628回想一下自己接触Markdown已经有一年多了,在这段时间内也感觉到自己到前往码农的道路上飞奔着,MD以其简洁、优雅、精准让我放弃了几乎其他所有的记录方案,成为自己的主要输出形式。当然在这一过程中,自己也面临... 查看详情

极简图床挂了该如何找回七牛云外链失效图片(代码片段)

...了图床Yotuku.cn,但某天发现他的官网都找不到了,我所有markdown文章里的图片链接全都跪了。解决这类的图床一般用的都是七牛云的存储,使用时绑定七牛云的存储空间的。我登录七牛云控制台发现图片文件还在,但就是没法下... 查看详情

打造完美typora(代码片段)

...ODOList四、结语一、前言Typora是一款优秀但不完美的MarkDown编辑器。笔者无论是学习笔记的记录或者博客的书写都是用的这款软件,不得不说MarkDown为笔者省去了不少排版优化的时间,即 查看详情

盘点国内都有哪些免费好用的图床工具

...不需要自己准备域名、支持批量上传、图片地址多格式(markdown、html、bbcode)。缺点:文件最大5M,一次最多上传10个文件。网址:https://sm.ms/4.路过图床简介:支持免注册上传图片,永久存储,支持HTTPS加密访问和调用图片,提供多... 查看详情

分享一个超级好用的sm图床(代码片段)

...down有个很不方便的地方,就是图片的插入,一般用Markdown编辑器(我用的是Typora)直接插入图片,大概是这样的![图片描述](C:Users91196Picturesavatar.jpeg)?但是别人没有没有这个路径啊!所以这种插入图片的方法非常不科学。?很多人用... 查看详情

vscode所见即所得的markdown编辑以及pdf输出(代码片段)

1推荐第一款Vscode中所见即所得的Markdown编辑器OfficeViewer很多人强烈推荐的替代typora的插件!测试结果如下常用功能都具备,所见即所得公式也可以编写,支持latex公式优势:可以直接输出pdf不足之处可能是不能自... 查看详情

打造完美typora(代码片段)

...ODOList四、结语一、前言Typora是一款优秀但不完美的MarkDown编辑器。笔者无论是学习笔记的记录或者博客的书写都是用的这款软件,不得不说MarkDown为笔者省去了不少排版优化的时间,即使纯Text仍然能写出优雅的排版。不... 查看详情

typora中使用gitee图床

1、前言之前好友写了一篇「使用gitee作为图床,写markdown自动上传文件」,初衷是由于我一直使用的是Typora来写博客「力推」,但之前的版本都不支持图床功能,现在新版本已经有了图床功能了,赶紧入坑。本篇环境:MacOS+Typora+Pi... 查看详情