Using Editor.js - Block Editor Guide

Editor.js is a modern block-based editor that gives members powerful content creation tools. If you’re familiar with Medium, Notion, or the WordPress block editor, you’ll feel right at home.

What You’ll Learn

How block-based editing works All available block types Tips for creating engaging content

Enabling Editor.js

Go to Member Blog → Settings → Editor Select Editor.js (Block-Style) Click Save Changes

How Block Editing Works

Instead of one big text area, Editor.js treats each piece of content as a “block”. Each paragraph, heading, image, or list is its own block that you can move, edit, or delete independently.

Adding Blocks

There are three ways to add new blocks:

Just start typing - Creates a paragraph block automatically Type “/” (slash) - Shows the block menu to choose a type Click the “+” icon - Opens the block inserter

Moving Blocks

Hover over any block to see the move handles on the left. Drag up or down to reorder your content.

Deleting Blocks

Click the settings icon (⋮) on a block and select “Delete” or use keyboard shortcut.

Available Block Types

Text Blocks

BlockHow to AddUse ForParagraphJust typeRegular text contentHeadingType /headingSection titles (H2, H3, H4)QuoteType /quoteQuoted text, calloutsListType /listBullet or numbered lists

Media Blocks

BlockHow to AddUse ForImageType /imageUpload or embed imagesEmbedType /embedYouTube, Twitter, etc.

Formatting Blocks

BlockHow to AddUse ForCodeType /codeCode snippetsDelimiterType /delimiterVisual section breaksTableType /tableData in rows/columns

Inline Formatting

Within any text block, select text to see the inline toolbar:

Bold - Make text bold Italic - Make text italic Link - Add hyperlink Code - Inline code formatting

Creating a Post Step by Step

Step 1: Add Your Title

Type your post title in the title field at the top of the form.

Step 2: Write Your First Paragraph

Click in the editor area and start typing. Your first paragraph introduces your topic.

Step 3: Add a Heading

Press Enter to create a new block, then type /heading and press Enter. Select your heading level and type your section title.

Step 4: Add an Image

Create a new block and type /image Click to upload from your computer Or paste an image URL Add a caption below the image

Step 5: Create a List

Type /list and press Enter Type your first item and press Enter Continue adding items Press Enter twice to exit the list

Tips for Better Posts

Use headings generously - They make content scannable Break up long paragraphs - Aim for 2-4 sentences per block Add images - Visual content increases engagement Use quotes for emphasis - Pull out key points Preview before publishing - Check how blocks look together

Keyboard Shortcuts

ShortcutAction/Open block menuCtrl+BBold textCtrl+IItalic textEnterNew blockBackspace (on empty block)Delete block

Troubleshooting

Block menu not showing:

Make sure cursor is in an empty block Type “/” at the start of a line Check JavaScript is enabled

Can’t move blocks:

Hover over the left edge of the block Look for the drag handle Click and drag to new position

Related Docs

Editor Settings Overview Using TinyMCE Classic Editor Using Medium Editor