Тестовая статья: все элементы редактора

Эта страница содержит каждый тип контента, который поддерживает редактор. Используйте её, чтобы проверить, как отображаются заголовки, списки, таблицы, код, цитаты и встроенные стили.

Базовое форматирование текста

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

Цветной текст задаётся через тег <span>: красный, зелёный, синий.

Поддерживаются также верхние и нижние индексы: H₂O, E = mc².

Заголовки

Ниже — пример заголовков второго и третьего уровня, которые добавляет панель инструментов.

Заголовок третьего уровня

Под заголовком третьего уровня обычно идёт пояснение или раскрытие темы.

Заголовок четвёртого уровня

Используется для мелкой структуризации внутри подраздела.

Ссылки

Внешняя ссылка: официальный сайт. Автоматическая ссылка: https://example.com. Внутренняя ссылка на якорь заголовка: к разделу про код.

Маркированный список

• Первый элемент списка
• Второй элемент с жирным выделением
• Третий элемент со ссылкой на пример
  • Вложенный элемент первого уровня
  • Ещё один вложенный элемент
    • Глубокая вложенность

Нумерованный список

1. Открыть редактор
2. Выделить нужный фрагмент текста
3. Применить форматирование с панели инструментов
   1. Подпункт первого уровня
   2. Подпункт второго уровня

Список задач

• Поддержка жирного и курсивного начертания
• Вставка таблиц и блоков кода
• Перетаскивание изображений мышью
• Предпросмотр в реальном времени

Цитаты

Это короткая цитата в одну строку.

Цитата может занимать несколько абзацев и содержать форматирование, ссылки и встроенный код.

— Автор цитаты

Таблица

Таблица с выравниванием

Блоки кода

Встроенный код прямо в абзаце: const total = items.length;.

Блок кода с подсветкой языка Kotlin:

fun deleteCategory(@PathVariable id: UUID): ResponseEntity<Void> {
    categoryService.delete(id)
    return ResponseEntity.noContent().build()
}

Блок кода TypeScript:

export function greet(name: string): string {
  return `Привет, ${name}!`;
}

Блок без указания языка:

$ npm run dev
> next dev
✓ ready on http://localhost:3000

Горизонтальный разделитель

Текст до разделителя.

Текст после разделителя. Используйте --- на отдельной строке, чтобы визуально разделить смысловые блоки статьи.

Изображения

Изображение вставляется через кнопку панели инструментов или вручную (ctrl + v):

Комбинированный пример

Ниже — короткий фрагмент, который сочетает несколько элементов одновременно.

Важно. Перед удалением категории убедитесь, что в ней не осталось привязанных статей. Соответствующий эндпоинт:

httpКопировать

DELETE /api/categories/{id}

Подробнее о параметрах — в таблице ниже.

Конец тестовой страницы.