Typora is a simple, efficient and elegant Markdown editor that provides a new wySIWYG Markdown writing experience. It combines source editor and preview into one, generating preview instantly as Markdown code is entered. Everything at Typora is designed around pure productivity.

Typora has always been the app of choice for browsing your favorite Markdown editor, blogging, and note-taking. I believe most of my friends are also using Typora software.

However, Typora did not support the image bed function before, only through a third-party plug-in to achieve automatic upload of images. However, Typora has recently been updated to finally support the map bed function. Next, I will introduce the uploading of images through plug-ins and Typora’s own map bed function respectively. Old stroll first-hand experience, Typora software built-in picture upload function is very slow, not as good as their own plug-in.

1. Use plug-ins to realize automatic upload

Laowang also used a third-party plug-in to upload pictures before, and the use effect of the plug-in after installation is as follows:

Drag the picture into md editor, and the picture will be automatically uploaded to the picture bed. White words with green background will appear at the top of the uploaded picture to remind you. The plug-in support, GitHub, seven niuyun, Ali Cloud, code cloud and so on.

This plug-in is an open source plug-in for Thobian students and only supports Windows.

2. Install the plug-in

Installation environment

Typora Version: 0.9.68 (Windows x86)

IO/Windows /typ…

Typora installation directory: D: Program Files\Typora, or install in another directory

Installation steps

  1. Download the plugin code: github.com/Thobian/typ…

  2. Copy the plugin code files: window.html, plugins

  3. Paste the copied plug-in code file into the Resources \app folder in the Typora installation directory

  4. After installation, restart Typora

The plug-in configuration

You can then configure which bed to upload the image to by opening plugins/image/upload.js and dragging it to the bottom of the plugins/image/upload.js file to add $.image.init() on the last line; Follow the instructions below to configure:

Upload to Github – Recommended

It is free and you do not need to build your own server, which is a good way. You need to fill in the token in the configuration, and add the token to log in to GitHub and access this link: github.com/settings/to…

Grant only the minimal permissions (repo.public_repo) to the tokens used by Typora.

$.image.init({target:'github', quality:1, // image.init({target:'github', quality:1, // image.init({target:'github', quality:1, // 0<quality<=1, if you want to compress recommended 0.7 github:{Token: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', / / add a token used only for typora awarded the minimum permissions (repo. Public_repo), add a token: https://github.com/settings/tokens CommitterName: 'nickname', / / submitter nicknames, write your nickname CommitterEmail lot: '[email protected]', // submitter email, write your github email Repository: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', / / making project name, such as your project address is: https://github.com/Thobian/typora-plugins-win-img that is behind the "Thobian/typora - plugins - win - img" Filepath: 'typora', // You can save the image in the project without creating the directory in advance. Github does not automatically create the directory when submitting the image. After CDN is enabled, the original github file address will be changed to jsDelivr address. If the image is not accessible in China, or your images are no longer in operation, please enable this function with caution. False, // Whether to enable GitHub image mirroring, domestic sometimes not convenient, if you want to enable: true}});Copy the code

Upload it to a self-built server

Change the image upload address to your own back-end interface, because the call does not have login state, please pay attention to the interface security is not used by bad people.

To prevent bad guys from exploiting your server interface, the plugin supports setting up the request header to avoid being exploited to a certain extent

Interface protocol:

  • Request mode: POST
  • Request parameters: data:image/ PNG; Base64, XXXXXX (the value after the original image is converted to base64)
  • Successful response: {” code “: 0,” message “:” success “, “data” : {” url “= >” imageURL ‘}}
  • Failure response: {‘ code ‘:x,’ message ‘:’ error cause ‘, ‘data’ :null} On failure, code must not be non-0

The back-end interface code can be referred to the code file: upload.php

$.image.init({ target:'self', Self: {/ upload/default address https://jiebianjia.com/typora-plugins/upload.html url: "https://you-server/the-image-upload-path", Headers: {/ / the default: token: B40289FC92ED660F433BF0DB01577FDE token: "value" / / "good definition, and check in the interface to avoid the bad guys use your interface}}});Copy the code

Upload to Tencent Cloud OSS

/ / for your tencent cloud security, it is strongly recommended that you add to this a separate account, and only open API access / / add a account: / / https://console.cloud.tencent.com/cam for more on tencent cloud son account (CAM) : https://cloud.tencent.com/document/product/598/13665 $.image.init({ target:'tencent', tencent : { Bucket: 'bucket-name', // Object storage -> Bucket list (bucket name is bucket) SecretId: 'SecretId', // Access control -> User -> User list -> User details ->API key to view SecretKey: 'SecretKey', // Access Control -> User -> User List -> User Details ->API Key View Region: 'Region', // Object Storage -> Bucket list 'typora', // can upload images to the specified folder},});Copy the code

Upload to Ali Cloud OSS

/ / for your ali cloud account security, it is strongly recommended that you add to this a separate account, and only open API access / / add a account: / / https://ram.console.aliyun.com/users for the child account authorization: HTTP: / / https://ram.console.aliyun.com/permissions / / more about ali cloud son account (RAM) description: HTTP: / / https://help.aliyun.com/product/28625.html / / SecretId is ali cloud: the AccessKey ID / / SecretKey is ali cloud: $.image.init({target:'aliyun', aliyun: SecretId: 'XXXX ', // You need to create a RAM user first, and select "programmatic access" SecretKey: Folder: 'typora', // BucketDomain: // BucketDomain: // BucketDomain: 'http://xxx.com/', // select a Bucket domain name}});Copy the code

Upload to Seven Niuyun

/ / "key management" page address: https://portal.qiniu.com/user/key $. Image. The init ({target: "qiniu" qiniu: {UploadDomain: 'https://xxx.com', // Upload address, you need to select the corresponding "client upload" address according to the location of your storage space https://developer.qiniu.com/kodo/manual/1671/region-endpoint AccessDomain: 'http://xxx.com/', // Only the relative access path is returned by default. You need to set the storage space access address. Enter the "file management" below you can see a "external chain domain name" is your address, copy over to replace XXX can be. AccessKey: 'XXXX ', // AK You can obtain SecretKey:' XXXX 'on the Key Management page. // SK You can obtain Folder on the Key Management page. PolicyText: {scope: "XXX ", // Scope:" XXX ", 225093916800, // write dead: 9102-12-12, dynamic seems to occasionally sign to however},}});Copy the code

Upload to the code cloud

/ /!!!!!! Note if the image is larger than 1M, gitee must be logged in to view it!! $. Image. The init ({target: 'gitee gitee: {message: "From:https://github.com/Thobian", / / must parameters, commit message (the default is: add image) branch: "Master ", // The branch to commit to (default: master) token: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', / / yards cloud token application address https://gitee.com/profile/personal_access_tokens userName: 'userName', / / user name Such as your gitee personal homepage address is: https://gitee.com/thobian, then the userName is: thobian repositorie: 'repositorie', / / warehouse Such as your gitee pictures warehouse address is: https://gitee.com/thobian/typora, then repositorie is typora Folder: 'image', / / you can put the uploaded images in the specified folder BucketDomain: 'https://gitee.com/api/v5/repos/', / / this is not change, it is good to copy directly}});Copy the code

If you encounter any problems while setting up the plug-in, you can use issue to find a solution:

Github.com/Thobian/typ…

3. Typora automatic upload function

Although the plugin supports a variety of galleries, it only supports Windows. However, Typora already supports image uploading function, before configuring, make sure that the version of the software is updated to the latest, the old version does not support image uploading function, the configuration does not have the option to upload pictures:

Update software

Download the latest software www.typora.io/#windows, this article… 0.9.86, after the upgrade, open file -> Preferences -> Image Insert, you will find the option of image upload, as shown in the picture below, select the configuration I checked.

Then click the “Download or Update” button in the image above to download picgo-Core Core support. Configure the file after downloading the file.

Configuration Token

Select SM. ms as the chart bed, official website address: SM.ms

Features: permanent storage free of registration, image link support HTTPS, can delete uploaded images, provide a variety of image link formats, established in 2015, currently free users can not use the Hong Kong node so the speed is relatively slow

Picture upload limit: each picture can be uploaded with a maximum of 5M. A maximum of 10 pictures can be uploaded at a time

  1. Register or log in to SM.ms

sm.ms/login

  1. To generate the token
https://sm.ms/home/apitoken3.
Copy the code
  1. Configuration token

In Typora configuration, image -> open the configuration file, copy the following code into it, and then change the token to your own.

Caution Restart the software after modification:

{" picBed ": {" uploader" : "SMMS," the figure bed for SM. MS, "SMMS" : {" token ": "PicgoPlugins ": {}} "picgoPlugins": {}} "picgoPlugins": {}}Copy the code

Results the preview

I feel that the upload speed is not as fast as that of the third-party plug-in, but the third-party plug-in only supports Windows system, and the image to be dragged in needs to be uploaded to the picture bed after one click, while the upload function of the own can be dragged in, and the feedback from the animation cache. Each has its own advantages, in addition, we can try other chart bed, seven niuyun and so on.

For Mac users to use the software to achieve the graph bed function is very simple, direct Typora + iPic on the line, this article will not be introduced.

At the end

Public account: Check out GitHub and recommend a fun GitHub project that you might use every day.