Как стать автором
Обновить

Новый редактор построен на принципе WYSIWYG. Эта аббревиатура расшифровывается как What You See Is What You Get — Что видишь то и получишь. То есть вы редактируете публикацию сразу в том виде, в каком её увидят ваши читатели. Потребность в использовании тегов отпала — форматировать текст можно на лету.

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

Создание публикации

Когда вы заходите на страницу создания нового поста (например, через иконку «карандаш» в верхнем правом углу), сразу открывается чистый лист редактора. Всё, что вы разместите на этом экране, увидят читатели, открывшие публикацию из ленты.

Сначала заголовок поста — не более 120 символов.

Ниже сам редактор — ставьте курсор под заголовком и начинайте вводить текст. Для форматирования можно использовать любой из удобных способов:

  • Выделить текст — появится всплывающее меню с кнопками:

    a53346ca646d358f3edac665ccdc213a.png
  • Использовать стандартные горячие клавиши, например:

    ⌘/CTRL + B — выделение текста жирным
    ⌘/CTRL + U — подчёркнутый текст
    ⌘/CTRL + I — курсив
    ⌘/CTRL + K — привязка ссылки к тексту
    ⌘/CTRL + Z — отмена действия

  • Использовать markdown-разметку: **жирный**, _курсив_, ~~зачёркнутый~~ , `строчный код`, ```блочный код```, >Цитата , #Заголовок1, ##Заголовок2.

Вставлять дополнительные элементы также можно несколькими способами:

  • через кнопку «+» с левой стороны редактора

  • через клавишу «/» на клавиатуре

Любой из этих вариантов вызовет всплывающее меню вставки элементов, о которых чуть ниже. 

Элементы могут быть не только блочными, но и строчными — через клавишу «/» внутри строки можно вставить небольшое изображение или формулу.

Также поддерживается markdown-разметка. То есть необязательно жать плюсик и в открывшемся меню выбирать «Заголовок» — достаточно в начале строки добавить нужное количество символов #.

3a1f641663d495cd045eb693a0dce052.gif

Ну или можно сразу вставить markdown-код из внешнего редактора, должно сработать.

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

Просто выберите нужный элемент в появившемся меню и он вставится. Можно пользоваться только клавиатурой: жмём «/» → появляется меню → начинаем вводить «та…» → выбирается «Таблица». Или набираем на клавиатуре «/ци», жмём Enter → вставляется цитата.

Перечень элементов:

  1. Заголовок. Размер заголовка можно поменять в меню настроек блока (троеточие справа).

    Для задания размера заголовка можно использовать markdown-разметку: # , ## или ###

  2. Цитата. Вставляет блок с вертикальной чертой слева.

    В markdown за это отвечает символ >.

  3. Маркированный список. Может быть разных уровней вложенности.

    Можно использовать маркдаун (элементы списка символами «-», «+» или «*», а также хоткей ⌘/CTRL + Shift + 8.

  4. Нумерованный список. Строки с цифрой в начале автоматически преобразуются в нумерованный список, а для уже написанных строк можно нажать ⌘/CTRL + Shift + 7.

  5. Медиаэлемент. Пункт для вставки в статью информации с внешних ресурсов: твиты, записи из соцсетей, ролики с YouTube, сниппеты с Codepen и т. д.

  6. Изображение. Загрузка картинок с вашего устройства. Из настроек — можно расположить по левому краю, добавить рамку или подпись.

  7. Разделитель. Выровненная по центру полоска, можно использовать для отделения одного раздела от другого.

  8. Таблица. По умолчанию вставляется таблица 3х3, но можно добавлять как строки, так и столбцы — соответствующие кнопки появятся при нажатии на таблицу. Главное не переусердствовать: всего-всего уместить в таблицу не получится, поэтому следите за тем, чтобы содержимое таблицы было удобно считывать пользователям разных устройств. Ячейки таблицы можно объединять/разделять, а их содержимое — расположить по центру или правому/левому краю.

  9. Код. Вставка блока с кодом, который будет обрамлён в рамку, а строки будут пронумерованы. Опционально можно выбрать язык для подсветки синтаксиса.

    Аналог в маркдауне — тройные кавычки, ```код```.

    Для вставки не блока кода, а строчки, используйте одинарные кавычки, `код`.

  10. Формула. Ввод математических формул в Tex-формате. 

  11. Спойлер. Вставка разворачиваемого блока, внутри которого обычно прячут какую-то дополнительную информацию (текст, ссылки, длинный код) — для вставки доступны все перечисленные выше элементы. Опционально можно задать заголовок спойлера. 

  12. Якорь. Элемент, который может быть полезен для составления оглавления. Вставьте якорь в нужном месте поста и присвойте ему имя, а в другом месте сделайте ссылку на него.

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

Важно: в новом редакторе нет понятия «кат», то есть элемента, разделяющего пост на вступление (выводимое в ленте) и основное содержимое. Текст вводной части поста (для ленты) настраивается на втором экране редактора и может отличаться от текста в начале самого поста.

Важно: в редакторе имеется автосохранение — оно сохраняет в localStorage браузера весь тот материал, который вы вставили в редактор. То есть если вы случайно закроете вкладку с редактором, всегда можно открыть её заново и восстановить текст.

Но если вы откроете форму редактора в другом браузере (например, с другого устройства), текст не восстановится. Чтобы иметь возможность править пост из разных браузеров на разных устройствах, нужно сохранить черновик публикации (чтобы ей присвоился ID). 

Если вы готовите статью во внешнем редакторе

Написать большую статью на одном дыхании бывает сложно, почти всегда это занимает немало времени — возможно, вместо формы на Хабре вы захотите использовать удобный вам текстовый редактор. А если статью нужно предварительно согласовать с кем-то, то совершенно точно есть смысл подготовить материал где-нибудь в GoogleDocs.

Если вы пишете статью в обычном текстовом редакторе, то можете сразу форматировать текст markdown-разметкой — потом просто скопируйте всё и вставьте в форму редактора. Он автоматически преобразует разметку в нужный результат.

Если вы пишете статью в Google Docs или ворде, то можете выделить там весь текст (с картинками) и вставить в форму создания поста — должно подхватиться всё форматирование (включая заголовки) и даже картинки.

Но в обоих случаях убедитесь, что всё корректно перенеслось и загрузилось. Если что-то не работает — пишите в форму обратной связи


Размещение

Когда вы допишете текст, отформатируете его (заголовки-шрифты-ссылки) и вставите все необходимые медиаэлементы (изображения, видео) ещё раз проверьте публикацию — именно в таком виде её увидят все читатели.

А дальше останется всего ничего: нажмите кнопку «Готово к публикации» и на втором экране редактора укажите «системные» настройки. Среди них:

  1. Тип публикации. «Статья» или «Новость». Первый вариант подходит для больших материалов — выбрав его, вы подтверждаете, что являетесь автором текста и рейтинг поста зачислится вашему профилю в полном объёме. Второй вариант подходит для небольших материалов, которые имеют признаки «новостей» (некая информация, актуальная здесь и сейчас). 

  2. Язык публикации. Укажите язык, на котором написана публикация — чтобы статью видели те пользователи сайта, которым ваша статья подойдёт по языковым настройкам.

  3. Хабы. Выберите в выпадающем меню один или несколько (до пяти) хабов, в которые вы планируете разместить свой пост. Вместо одного из хабов можно выбрать блог компании — укажите, если он есть (тогда рейтинг за пост пойдёт в зачёт и вашей компании).

  4. Ключевые слова. Ещё одно обязательное поле, где через запятую укажите до 10 ключевых слов по теме вашего материала. Через запятую, без #. Подберите такие слова, по которым ваш пост смог бы найти кто-то посторонний. Эти ключевые слова будут в самом конце вашей публикации.

  5. Переводы и обучающие материалы. Если вы готовите перевод, то следует нажать чекбокс «Переведённый материал» — тогда дополнительно потребуется указать автора оригинала и ссылку на него, а в зачёт пойдёт лишь половина рейтинга. У опубликованной статьи под заголовком будет пометка «Перевод» со ссылкой на первоисточник — чтобы свести к минимуму риск претензий от автора. А если ваша статья носит обучающий характер, то нажмите чекбокс «Tutorial». Тогда после публикации под заголовком появится одноимённый значок.

Отображение публикации в ленте

В этом разделе редактора настраивается внешний вид той части, которая будет видна в лентах пользователей — на главной странице, внутри хаба и т. д. Здесь свободы действий чуть меньше, но зато вступительные части публикаций стали выглядеть в одном формате.

Желательно загрузить обложку поста (картинка в формате jpg, gif или png, рекомендуемый размер 780×440), а также ввести текст вводной части (до 2 тысяч символов).

Важно: изображение (обложка) и содержимое вводной части поста (выводимое в ленте) может отличаться от того вступления, которое будет видеть пользователь на странице самой публикации. Это даёт дополнительную свободу действий, но иногда может мешать — в таком случае используйте первые абзацы своей статьи (по умолчанию эта часть будет подгружаться автоматически). У вводного текста также есть возможности форматирования, но вставить видеоролик или несколько картинок не получится.  

Текст кнопки «Читать далее» можно оставить по умолчанию, но при необходимости его также можно поменять.

Если пост нужно выпустить в определённое время, воспользуйтесь функцией запланированной публикации — выберите желаемые дату и время.

Всё, финишная прямая с тремя вариантами: можно вернуться к редактированию поста, сохранить его в черновики или опубликовать. В первом случае вы вернётесь на первый экран редактора, во втором — пост сохранится у вас в профиле с присвоением ID, а в последнем случае он сразу окажется на сайте и его начнут читать пользователи Хабра.

Не забывайте следить за комментариями и отвечать на них в случае необходимости. Советы по работе с обратной связью мы уже давали.

Если остались вопросы по работе редактора или появились предложения — можете смело отправлять их в форму обратной связи.