Photo by Meg on Unsplash
Photo by Meg on Unsplash

How to use editor.js effectively for your blog post

May 29

today we are going to see how to use editor.js in an effective way to write elegant and blog posts. This editor helps you to focus on the content while takes care of the best design possible to increase user experience. takes care of design trends so you can just focus on sharing your content.

What is editor.js?

  Next generation block styled editor. Free. Use for pleasure. In this editor each type is considered as a block eg.. paragraph, image, quote etc.., all are considered as a block element. So whenever you want to add a block click on click the on an empty space "+" icon will pop in click that to to add a block you want (explained in detail below).  To remove a block click on the block you wanna remove it may be an image, video or anything and there will be a icon shown on the right. Click on that icon to tune the block. You can either move the block above another block or below or delete and specific features will be unique for some blocks.

note :  Please be sure to save the post from time to time. 

we will soon bring autosave feature

Having said that let's see one by one how to add blocks. There are huge options to add images, videos quotes, code etc.., 

How to add block?

  1. Just click on an empty space inside the white container
  2.  You can see a plus icon click on that
  3. chose what block you want to insert. That's it

Let's see some examples

1. Adding a heading

Headings help rank your post in google search. So use it wisely. Let's see how you can add heading and tune i

  1. Click on the plus
  2. click the H icon 
  3. To tune ( reducing or increasing heading size ) click on the tune icon shown on the right side of the block. (appears when you click the block)

(pro) windows --> ctrl + shift + h | mac--> cmd + shift + h

note: To know the shortcuts just hover over the block icons

2. Adding an image

images makes the article more attractive and informative. Use many images. Adding images helps user engagement.

You can add images in 3 ways

1. Uploading by image URL

just copy the image URL and paste it in the editor image will be automatically added

2. uploading by drag and drop

Drag the image from anywhere and drop it in the editor image ill be automatically added

3. Uploading by using add block icon

Click on the add block and click on image icon. 

Note: Always tune the images to stretch. Because most users loves full width image ie.. 100% width. The image may look overflowing the editor to contrast. But the image in the blog looks alright.

Tuning image 

There are mainly 3 features to tune an image excluding feature to move up or down which is common for all blocks. Three features are as follows 

  1. Stretch an image
  2. Image with background
  3. Adding border

To maintain aspect ratio it's always recommended to select the stretch image feature. If not selected image will have a maximum view port size of 80%.

3. Embedding Youtube video

Just having the text based content may bore the reader. Try to use videos from Youtube. Just copy the video URL and paste it in the editor video will be loaded automatically

There are still lot's of tools just go around and play with it. 

How to work with all these block properly?

Just do the way you want 😉. Consider the messages which I highlighted. Also one thing to note since the editor is made in a such way to just focus on content don't worry about rendering all those stuff we will take care.

Note : Don't click enter while you are typing long paragraphs. Then that will be considered a different paragraph block.

Any doubt's feel free to post in the comment section or email me or direct message me in Instagram.

More tools are coming we will notify you. One awesome feature is coming collaborative editing or writing you can invite your friend and both can work on a same project in real time stay tuned.

Future tools 

  1. Instagram post embed
  2. Facebook post embed
  3. Twitter post embed 
  4. Code plugin for developers

And more..

More from the author

Photo by Meg on Unsplash

How to use editor.js effectively for your blog post

Comments (0)

Add a Comment