В интерфейсе создания и редактирования статей в базе знаний мы использовали предыдущую версию HTML-редактора от Imperavi. Однако ее давно перестали поддерживать и обновлять, из-за чего накопилось немало багов, да и в целом редактор морально устарел.
Перешли на новую версию от того же разработчика, которая была написана с нуля на чистом JavaScript, поэтому должна работать существенно лучше. Интерфейс остался предсказуемым и интуитивно понятным, так что разобраться самостоятельно будет несложно. Рассказываем только про удобные фишки, которые помогут быстрее и нагляднее оформлять статьи.
Панель редактора собрала все нужное для работы с текстом и вставки элементов. Большая часть элементов — привычная и позволяет форматировать текст, добавлять гиперссылки, переходить в режим исходного кода и т. д.
Среди ключевых изменений — верстка через блоки, быстрое добавление готовых инфоблоков и создание кастомных, доступ к редактору CSS прямо со страницы статьи и возможность задавать стили для конкретной публикации. Подробнее остановимся на этих изменениях, а также отдельно отметим новые полезные инструменты.
1. Работа с блоками
В редакторе реализован блочный принцип верстки: каждый элемент статьи (заголовок, текст, изображение, таблица и т. д.) — это отдельный блок. Их можно добавлять, перемещать, дублировать, оформлять и группировать независимо друг от друга.
а) Управление блоками
— При выборе блока появляется ползунок — с его помощью можно перетащить блок вверх или вниз.
Это работает как для обычных элементов (тексты, списки, изображения, ячейки таблиц), так и для «родительских» блоков — например, контейнеров, макетов, таблиц или ранжированных списков.
— Если нажать на ползунок, откроется выпадающее меню:
Список опций зависит от типа элемента. Например:
у списков доступны «Добавить отступ» и «Убрать отступ»;
у ячеек таблицы, элементов списка и столбцов макета — можно быстро перейти к родительскому блоку.
Это помогает удобнее управлять сложной структурой статьи, не теряясь во вложенности.
б) Добавление готовых блоков
Чтобы вставить готовый блок, нажмите на иконку плюса в панели.
Доступны:
пять готовых инфоблоков Омнидеска,
спойлер,
блок с разделителями,
блок «Похожие статьи»,
кнопка-ссылка «Узнать больше»,
блок с несколькими кнопками.
Ранее эти блоки вы могли добавлять только через HTML-код. Подробнее
При вставке блок уже содержит заготовленный текст — его нужно заменить на свой. Для инфоблоков можно удалить заголовок, если он не нужен.
в) Добавление кастомного блока
Можно создать собственный блок, добавив отступы, рамку и изменив цвет фона — подойдет для выделения важных фрагментов, примеров или визуального разделения частей статьи.
Если нужно оформить сразу несколько блоков (например, задать фон, рамку или отступы), поместите их в контейнер (div).
Сделать это можно двумя способами: добавьте контейнер через панель и скопируйте содержание нужных блоков внутрь или оберните блоки в теги div в режиме исходного кода. Это позволит применять стили сразу ко всей группе блоков.
г) Редактирование HTML-кода блока
Чтобы не переходить к исходному коду всей страницы и не искать в нем нужный фрагмент, можно воспользоваться быстрым доступом к коду отдельных блоков. Для этого:
выберите нужный блок,
нажмите на ползунок,
в меню выберите «Редактировать блок».
При редактировании HTML-кода отдельного блока нельзя добавлять элементы, которые выходят за рамки текущего блока — это приведет к нарушению структуры страницы.
Что допускается:
добавление атрибутов (например, style);
вставка вложенных тегов внутри параграфа (например, span);
добавление вложенных тегов внутри родительских блоков (например, li внутри ul или ol).
д) Добавление CSS-классов к блоку
Если у вас добавлены собственные CSS-стили, вы можете применить их к любому блоку. Для этого:
выберите нужный блок,
нажмите на ползунок,
выберите «Добавить класс».
В появившемся окне укажите один или несколько CSS-классов — они будут применены к выбранному блоку. Если в вашей базе знаний предусмотрены специальные стили для определенных элементов, сможете применять их быстрее.
2. Стили и верстка
а) Кастомные стили для статьи
Можно настроить внешний вид конкретной статьи без влияния на остальные материалы базы знаний.
Кастомные стили задаются для всей статьи, независимо от языка. Это значит, что один набор CSS-правил применяется ко всем языковым версиям статьи одновременно.
Нажмите на иконку кастомного CSS в основной панели — откроется окно, где вы сможете добавить нужные стили.
После указания стилей нужно сохранить и саму статью, после чего данные подтянутся в публикацию.
Если добавить стили через теги ‹style› в исходный код, они автоматически попадут в текстовое поле для CSS при переключении в интерфейс редактора.
б) Работа с контейнерами
Контейнер подойдет, если хотите стилизовать несколько связанных частей текста.
В редакторе мы отображаем рамки для стандартных div-блоков с классом “my-container-block” для вашего удобства, после публикации их видно не будет;
Если выбран дочерний элемент, в меню ползунка есть возможность выбрать родительский:
— Если выбран родительский элемент, в меню ползунка есть возможность разъединить дочерние элементы:
в) Использование макетов
После публикации рамки видны не будут.
г) Пустые строки
В списке «Добавить» доступны две опции для визуального разделения текста:
«Пропуск» — вставляет пустой абзац с фиксированной высотой (примерно одна строка). При редактировании он отображается с серой рамкой и пометкой «Пропуск» (эта надпись не будет видна в публикации).
«Отступ» — добавляет пустой абзац, который содержит разрыв строки, и визуально выглядит чуть больше (примерно полторы строки).
д) Настройка изображений и анимаций
Изображение или анимацию теперь можно уменьшить или увеличить, добавить обтекание текстом или выровнять так, как нужно.
3. Полезные инструменты
а) Контекстная панель
Контекст работает вне зависимости от блока — нужные стили применятся к любому выделенному фрагменту.
б) Добавление якоря
Больше не обязательно переходить в режим исходного кода, чтобы добавить якорь. Вот как это работает:
— Выберите блок → в меню ползунка кликните по кнопке «Добавить ID» → введите название якоря.
— Чтобы создать ссылку на якорь:
выделите текст, на который должен вести якорь → нажмите «добавить ссылку»;
вставьте указанный ранее ID или выберите якорь из списка.
Если якорь был добавлен через тег ‹a›, он тоже будет работать, но текст, на который он ведет, рядом с #ID отображаться не будет.
— После указания ссылки можно увидеть, какой именно якорь прописан, с помощью контекстного меню.
в) Сворачивание и разворачивание содержимого
При клике по подзаголовку — в панели редактора или в меню ползунка — появляется возможность свернуть или развернуть его содержимое.
Это влияет только на отображение в редакторе и не затрагивает опубликованную версию статьи. Функция помогает скрыть уже оформленные разделы, чтобы проще ориентироваться в структуре и быстрее находить нужное место.
г) Полноэкранный режим
Можете в один клик открыть редактор во всю ширину и высоту страницы веб-браузера.
д) Сохранение статьи в PDF
Иконка печати позволяет сохранить статью в формате PDF. В файле автоматически отображаются:
дата выгрузки,
название статьи,
язык статьи,
ссылка на неё в базе знаний.
е) Горячие клавиши
В правом верхнем углу редактора доступны кнопки отмены (Ctrl+Z) и возврата изменений (Ctrl+Y). Рядом находится иконка клавиатуры — кликнув по ней, вы сможете просмотреть полный список горячих клавиш, которые помогут ускорить работу с редактором.
ё) Автосохранение
Мы кешируем последнюю версию несохраненной статьи. Если вы закроете страницу, уйдете со страницы статьи или обновите страницу, то при последующем открытии статьи откроется последняя версия вашего редактирования. На опубликованную статью это никак не влияет.
Чтобы убрать редактирование и вернутся к версии опубликованной статьи, нужно нажать на ссылку «отменить».
