The new editor is built on the WYSIWYG principle. This abbreviation stands for What You See Is What You Get. That is, you edit the publication immediately in the form in which your readers will see it. The need to use tags has disappeared.

The creation of a post in the new editor is divided into two stages. On the first, you write the text of the post, on the second, you define its display settings in the feed.

Creating a post

When you go to the editor page (for example, through the «pencil» icon in the upper right corner), a blank editor sheet immediately opens. Anything you place on this screen will be seen by readers who open the post from the feed.

First, post title — no more than 120 characters.

Below the editor itself — place the cursor under the heading and start typing. For formatting, you can use any of the convenient methods:

  • Select text — a pop-up menu with buttons will appear:

    a53346ca646d358f3edac665ccdc213a.png
  • Use standard hotkeys, for example:

    ⌘/CTRL + B — make text bold
    ⌘/CTRL + U — underlined text
    ⌘/CTRL + I — italic
    ⌘/CTRL + K — anchor the link to the text
    ⌘/CTRL + Z — cancel action

  • Use markdown: **bold**, _italic_, ~~strikethrough~~ , `line code`, ```block code```, >Quote , #Header1 , ##Header2.

You can also insert additional elements in several ways:

  • via the «+» button on the left side of the editor

  • via the «/» key on the keyboard

Any of these options will bring up the pop-up menu for inserting items, which are described below. 

Elements can be not only block, but also lowercase — using the «/» key inside the line, you can insert a small image or formula.

Markdown is also supported. That is, it is not necessary to press the plus sign and select «Title» in the menu that opens — it is enough to add the required number of # symbols at the beginning of the line.

3a1f641663d495cd045eb693a0dce052.gif

Or you can paste the markdown code from an external editor, it should work.

Меню с блочными элементами

Just select the desired item from the menu that appears and it will be inserted.
You can only use the keyboard: press «/» → a menu appears → start to enter «ta…» → «Table» is selected. Or we type on the keyboard «/qu», press Enter → a quote is inserted.

List of elements:

  1. Header. The header size can be changed in the block settings menu (ellipsis on the right).

    You can use markdown to set the size of the header: # , ## or ###

  2. Quote.  Inserts a box with a vertical bar on the left.

    In markdown, the > symbol is responsible for this.

  3. Bulleted list. There can be different levels of nesting.

    You can use markdown (list items with «-», «+» or «*», symbols, as well as hotkey ⌘/CTRL + Shift + 8).

  4. A numbered list. Numbered strings are automatically converted to a numbered list, and for strings already written, you can press ⌘/CTRL + Shift + 7.

  5. Media element. A point to insert information from external resources into an article: tweets, posts from social networks, videos from YouTube, snippets from Codepen, etc.

  6. Picture. Uploading pictures from your device. In the settings — you can align to the left, add a frame or a signature.

  7. Separator. A centered strip can be used to separate one section from another.

  8. Table. By default, a 3x3 table is inserted, but you can add both rows and columns - the corresponding buttons will appear when you click on the table. The main thing is not to overdo it: you won't be able to fit everything into the table, so make sure that the contents of the table are convenient for users of different devices to read. Table cells can be merged / split, and their contents can be centered or right / left aligned.

  9. The code. Insert a block with a code that will be framed and the lines will be numbered. Optionally, you can select a language for syntax highlighting.

    The analogue in the markdown is triple quotation marks, ```code```.

    To insert not a block of code, but a line, use single quotes, `code`.

  10. Formula. Entering mathematical formulas in Tex-format.

  11. Spoiler. Inserting an expandable block, inside of which some additional information is usually hidden (text, links, long code) — all of the above elements are available for insertion. Optionally, you can set a spoiler title.

  12. Anchor. An element that can be useful for composing a table of contents. Insert an anchor where you want to post and give it a name, and link to it elsewhere.

Со временем список элементов может меняться. Каждый описанный выше элемент является блоком, который можно двигать вверх-вниз или удалять.

Important: in the new editor there is no concept of «cut», that is, an element that separates the post into an introduction (displayed in the feed) and the main content. The text of the introductory part of the post (for the feed) is configured on the second screen of the editor and may differ from the text at the beginning of the post itself.

Important: the editor has an autosave feature — it saves all the material that you inserted into the editor in the browser's localStorage. That is, if you accidentally close the tab with the editor, you can always reopen it and restore the text.

But if you open the editor form in another browser (for example, from another device), the text will not be restored. To be able to edit a post from different browsers on different devices, you need to save the draft of the post (so it will have an assigned ID).

If you are preparing an article in an external editor

It can be difficult to write a large article, it almost always takes a lot of time - perhaps you will want to use a text editor that is convenient for you. And if the article needs to be previously agreed with someone, then it certainly makes sense to prepare the material somewhere in GoogleDocs. If you are writing an article in a regular text editor, you can immediately format the text with markdown - then just copy everything and paste it into the editor form. It will automatically convert the markdown to the desired result. If you are writing an article in Google Docs or Word, you can select all the text (with pictures) there and insert it into the editor - all formatting (including headings) and even pictures should be taken up. But in both cases, make sure everything is correctly transferred and loaded. If something doesn't work, write to the feedback form.


Publishing

When you finish the text, format it (headers-fonts-links) and insert all the necessary media elements (images, videos), check the publication again — this is how all readers will see it.

And then there will be nothing left: click the «Next to settings» button and on the second screen of the editor specify the «system» settings. Among them:

  1. Publication type. «Article» or «News». The first option is suitable for large materials — by choosing it, you confirm that you are the author of the text and the rating of the post will be credited to your profile in full. The second option is suitable for small materials that have signs of «news» (some information that is relevant here and now).

  2. Language of publication. Specify the language in which the publication is written — so that the article can be seen by those users to whom your article is suitable by language preferences.

  3. Hubs. Select one or more (up to five) hubs in the drop-down menu where you plan to publish your post. Instead of one of the hubs, you can choose a corporate blog — indicate if it exists (then the rating for the post will count towards your company).

  4. Keywords. Another required field, where separated by commas, specify up to 10 keywords on the topic of your material. Separated by commas, without #. Find words that would help someone outsider find your post. These keywords will be at the very end of your post.

  5. Translations and tutorial materials. If you are preparing a translation, then you should click the «Translated material» checkbox — then you will additionally need to indicate the author of the original and a link to it, and only half of the rating will be added to your account. The published article will be labeled «Translation» under the title with a link to the original source — to minimize the risk of claims from the author. And if your article is of educational nature, then click the «Tutorial» checkbox. Then, after publication, an icon of the same name will appear under the title.

Displaying a post in the feed

In this section of the editor, you can customize the appearance of the part that will be visible in user feeds — on the main page, inside the hub, etc. Here there is a little less freedom of action, but the introductory parts of publications began to look in the same format.

It is advisable to upload the cover of the post (picture in jpg, gif or png format, recommended size 780 × 440), as well as enter the text of the introductory part (up to 2 thousand characters).

Important: the image (cover) and the content of the post intro (displayed in the feed) may differ from the intro that the user will see on the post page itself. This gives additional freedom of action, but sometimes it can get in the way — in this case, use the first paragraphs of your article (by default, this part will be loaded automatically). The introductory text also has formatting options, but you won't be able to insert a video or multiple pictures.

The text of the «Read more» button can be left by default, but it can also be changed if necessary.

If the post needs to be published at a specific time, use the scheduled publication function - select the desired date and time.

That's it, the finish line with three options: you can go back to editing the post, save it to draft or publish it. In the first case, you will return to the first screen of the editor, in the second, the post will be saved in your profile with the assignment of an ID, and in the latter case it will immediately appear on the site and users of Habr will start reading it.

Don't forget to follow the comments and reply to them if necessary. We have already given advice on working with feedback..

If you still have questions about the work of the editor or suggestions have appeared, you can safely send them to the feedback form.