How to use the editor?

NextDirectionDE at Invalid Date in General


The editor for creating content is relatively complex, therefore it gets its own page. Again like for general usage page, I create an answer for every feature I'd like to describe.


11 answer(s)

Creating new blocks

The first thing to know is that content is built with blocks. When you first open the create mask for new topics or checking the "New answer" section on an existing topic, you will see this:

Empty content with one block
Empty content with one block

By pressing the enter key, a new block is created. If a block requires the enter key to work correctly, it will not create a new block, but do something inside the focused block.

Selecting the block type

If a new block is empty, you can either press the tab key to open the type selection or click the "+" symbol on the left side of the new block after focusing it by clicking inside of it. You'll see this selection:

Selecting the block type
Selecting the block type

The available types from left to right (+ excluded) are:

  • Paragraph
  • Image
  • Header
  • Quote
  • List
  • Table
  • Warning
  • Separator
  • Code editor

After selecting a specific type, the block layout might change. Have a look at later answers to check layout and available options for specific block types.

If you focus a block by clicking it, you can also perform block specific options by clicking the three dots at the top right corner of the block:

Block options
Block options

The image shows the default options for each block. It can be moved up, down or removed. For more block specific options, check later answers.

Inline styles

A lot of blocks allow you to highlight selected parts with a specific styling. To do this, you have to select a certain text, to bring up the following context menu:

Context sensitive options
Context sensitive options

From left to right you can perform the following actions:

  • Change block type with existing content
  • Format selected text bold
  • Format selected text italic
  • Create a link
  • Mark selected text
  • Show selected text as inline code

Block type "Heading"

I don't think, that this type needs much explanation. It simply is a heading to separate some paragraphs. Available levels can be changed with context options:

Context options for headings
Context options for headings

H1 is not available because of search engine optimization. Each page should only have one H1 which is the question/topic title.

Block type "Text"

One of the most important block types. It represents a paragraph. It should be used for main content of a topic. It allows inline formatting by selecting text.

Inline formatting text
Inline formatting text

Block type "Image"

Images can be used for a better visualization of certain problems. There are several ways of inserting an image to a new question/answer:

  • By selecting block type "image" and select an image in the opening selection dialog of your operating system
  • By inserting an image URL to a block of type "text"
  • By inserting an image from your clipboard to a block of type "text"
Restrictions Images must be of type jpg, jpeg, png or gif and must not be bigger than 100kB. Sometimes inserting an image URL is prevented by the website you are trying to insert the image from.

Images have a few context options:

Context options for images
Context options for images

As always from left to right, you can do the following with images:

  • Show them with border around (also includes the caption)
  • Stretch the image to 100% of the available space (width of the content column)
  • Show them with a background (looks like the image above)

Block type "Quote"

I think this is pretty self explanatory, so here is an example:

Best website ever!

Context options allow you to align the quote on the left or in the center:

Isn't this great?

Inline styling is allowed for the quote itself, but won't be shown for caption.

Block type "List"

Again an easy one. With context options you can choose between an ordered and an unordered list. Here are examples for both:

  1. Wake up
  2. Eat something
  3. Go to work
  • Milk
  • Sugar
  • Honey

As you can see, this type allows inline styling.

Block type "Table"

If you select table as block type, there will only be one cell initially. This is because at the moment, this block type is in beta status, and doesn't allow you to delete rows or columns. So be careful with adding new ones.

You can create new columns or rows by hovering over the borders of the table. Then the following icon appears:

Add column to the beginning of the table
Add column to the beginning of the table

You can add new columns or rows on every line of the table, even in between existing columns or rows.

No delete Be careful with clicking around inside tables because if you accidentally add new columns or rows, you cannot delete them right now.

As you can see in the following example, you can also apply inline styles to table content:

ColumnCan contain content

As you can see table is displayed with a zebra style.

Block types "Warning" and "Delimiter"

These are both very simple, so I combined them together. First lets have a delimiter.

Please note, that view of a delimiter differs for edit and show mode.

Some warning This is a warning. Please do not go outside!
A warning without a title is more compact!

Block type "Code"

This is of course another important one for a coding community. I created this block type myself as a plugin for Editor.js. It uses the Ace editor which originates in Cloud9 Cloud IDE.

To quickly identify code blocks inside editing mode, I decided to use a dark theme here. When the code is displayed in show mode, it uses a light theme to have a more consistent way compared to the other block types.

A code block provides only one option in the context menu:

Selecting the highlighted language
Selecting the highlighted language

In both modes, you will see the currently selected language for a specific block above the code:

Currently selected mode
Currently selected mode

At the moment support for over 20 of the most used languages is enabled.

To conclude this, let's have a look at an example:

Sign in

Sign up

* only for login and communication
* display name (4 - 50 chars)
* min 8 chars, lower and upper case letter, special character Accepted: !@#$%^&*()_+}{;'?>.<,
* must match password