How to use the editor?
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.
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:
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:
The available types from left to right (+ excluded) are:
- 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:
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.
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:
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
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:
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.
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"
Images have a few context options:
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:
- Wake up
- Eat something
- Go to work
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:
You can add new columns or rows on every line of the table, even in between existing columns or rows.
As you can see in the following example, you can also apply inline styles to table content:
|Column||Can contain |
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.
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:
In both modes, you will see the currently selected language for a specific block above the code:
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: