Редакторы в PXLR CMS

Обзор

В админ-панель PXLR CMS доступны три типа редакторов:

• Markdown - классический Markdown редактор с предварительным просмотром
• TipTap - современный WYSIWYG редактор
• Blocks - блочный редактор с компонентами

Возможности

Переключение редакторов

• В форме создания/редактирования поста есть четыре кнопки (расположены слева от заголовка "Содержимое"):
  • Markdown - классический Markdown редактор
  • TipTap - современный WYSIWYG редактор
  • Blocks - блочный редактор с компонентами
  • Развернуть - переводит весь блок содержимого в полноэкранный режим

Мобильная адаптация

• На мобильных устройствах (экраны меньше 640px):
  • Кнопки переключения редакторов показывают только иконки
  • Кнопка "Развернуть" также показывает только иконку
  • Уменьшенные отступы между элементами для экономии места
  • Компактная высота кнопок
• На больших экранах (640px и выше):
  • Кнопки показывают иконки + текст
  • Стандартные отступы и размеры
• Tooltip подсказки доступны при наведении на все кнопки

Markdown редактор

Возможности

• Панель инструментов с кнопками для быстрой вставки Markdown синтаксиса
• Двухпанельный режим: вкладки "Редактирование" и "Предварительный просмотр"
• Автоматический рендеринг Markdown в HTML для предварительного просмотра
• Подсказки в toolbar с синтаксисом Markdown

Функции панели инструментов

Заголовки:

• H1 (# заголовок)
• H2 (## заголовок)
• H3 (### заголовок)

Форматирование текста:

• Жирный (**текст**)
• Курсив (*текст*)
• Код (`код`)

Списки:

• Маркированный список (- пункт)
• Нумерованный список (1. пункт)

Медиа и элементы:

• Ссылки (текст)
• Изображения ()
• Цитаты (> текст)

Предварительный просмотр

• Переключение между режимами редактирования и просмотра
• Полный рендеринг Markdown синтаксиса
• Поддержка всех стандартных элементов Markdown

Предупреждение о переключении

• При попытке переключения между редакторами при наличии контента появляется диалог предупреждения
• Система предупреждает о том, что весь текущий контент будет удален
• Это необходимо для предотвращения конфликтов между разными технологиями редактирования
• После подтверждения появляется toast уведомление об успешном переключении

Функции TipTap редактора

Панель инструментов

Полноценная панель инструментов с богатым функционалом:

Отмена/Повтор:

• Отменить последнее действие
• Повторить отмененное действие

Заголовки:

• H1 (основной заголовок)
• H2 (подзаголовок)
• H3 (вторичный подзаголовок)

Форматирование текста:

• Жирный (Ctrl+B / Cmd+B)
• Курсив (Ctrl+I / Cmd+I)
• Подчеркнутый (Ctrl+U / Cmd+U)
• ==Выделение текста== (маркер)

Цвет текста:

• Выбор любого цвета через color picker

Списки:

• Маркированный список
• Нумерованный список
• Список задач с чекбоксами

Выравнивание текста:

• По левому краю
• По центру
• По правому краю

Медиа и ссылки:

• Добавление изображений с загрузкой
• Вставка ссылок
• Создание таблиц

Дополнительные элементы:

• Цитата (blockquote)
• Блок кода
• Горизонтальная линия

FloatingMenu (Плавающее меню)

При установке курсора в пустую строку появляется компактное плавающее меню с быстрым доступом к основным функциям:

• Заголовки H1, H2
• Списки
• Таблицы
• Изображения

Загрузка изображений

• Полная интеграция с API загрузки (/api/uploads/image)
• Автоматическое сохранение в папку uploads
• Preview изображений прямо в редакторе
• Проверка размера файлов (до 1MB)
• Поддержка всех форматов изображений
• Toast уведомления о статусе загрузки

Таблицы

• Создание таблиц с заголовками
• Изменение размера столбцов
• Добавление/удаление строк и столбцов
• Выделение ячеек

Списки задач

• Интерактивные чекбоксы
• Вложенные списки задач
• Отметка выполненных задач

Полноэкранный режим всего блока содержимого

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

Сохранение контента

Контент из TipTap редактора сохраняется в формате HTML и совместим с системой CMS. При переключении между редакторами содержимое сохраняется.

Техническая информация

Используемые пакеты

Для TipTap редактора:

• @tiptap/react - основной пакет TipTap для React
• @tiptap/starter-kit - базовый набор расширений
• @tiptap/extension-text-style - стили текста
• @tiptap/extension-color - цвета текста
• @tiptap/extension-text-align - выравнивание текста
• @tiptap/extension-underline - подчеркивание
• @tiptap/extension-superscript - верхний индекс
• @tiptap/extension-subscript - нижний индекс
• @tiptap/extension-floating-menu - плавающее меню
• @tiptap/extension-image - поддержка изображений
• @tiptap/extension-link - ссылки
• @tiptap/extension-table - таблицы и связанные расширения
• @tiptap/extension-task-list - списки задач
• @tiptap/extension-task-item - элементы списка задач
• @tiptap/extension-highlight - выделение текста
• @tiptap/extension-typography - улучшенная типографика
• @tiptap/extension-placeholder - placeholder текст
• @tiptap/extension-character-count - подсчет символов

Для Markdown редактора:

• Использует встроенные UI компоненты (Textarea, Tabs, Button)
• Собственная логика рендеринга Markdown через регулярные выражения
• Никаких дополнительных пакетов не требуется
• Использует useRef для изоляции функций форматирования от других textarea на странице

Для Blocks редактора:

• Собственная реализация с UI компонентами
• Поддержка различных типов блоков (Markdown, заголовки, изображения, кнопки)

Файлы

• admin/src/components/forms/MarkdownEditor.tsx - Markdown редактор с предварительным просмотром
• admin/src/components/forms/TiptapEditor.tsx - TipTap WYSIWYG редактор
• admin/src/components/forms/BlockEditor.tsx - блочный редактор с компонентами
• admin/src/components/forms/PostForm.tsx - основная форма с переключением редакторов
• admin/src/styles/globals.css - стили для всех редакторов

Использование

Общие шаги

1. Откройте форму создания или редактирования поста
2. В разделе "Содержимое" выберите один из редакторов: Markdown, TipTap или Blocks
3. Используйте кнопку "Развернуть" для полноэкранного режима работы
4. Контент автоматически сохраняется в соответствующем формате

Использование Markdown редактора

1. Выберите Markdown
2. Используйте панель инструментов для быстрой вставки синтаксиса
3. Переключайтесь между вкладками "Редактирование" и "Предварительный просмотр"
4. Контент сохраняется в формате Markdown

Использование TipTap редактора

1. Выберите TipTap
2. Используйте богатую панель инструментов для форматирования
3. Установите курсор в пустую строку - появится FloatingMenu с быстрыми опциями
4. Для загрузки изображений:
   • Нажмите кнопку изображения в панели инструментов
   • Выберите файл (до 1MB)
   • Изображение автоматически загрузится и отобразится в редакторе
5. Контент сохраняется в формате HTML

Использование Blocks редактора

1. Выберите Blocks
2. Используйте кнопку "Добавить блок" для создания компонентов
3. Настраивайте каждый блок индивидуально
4. Контент сохраняется в формате JSON

Будущие улучшения

• [ ] Drag & Drop для изображений
• [ ] Поддержка видео и аудио файлов
• [ ] Математические формулы (LaTeX)
• [ ] Диаграммы и графики (Mermaid)
• [ ] Экспорт в PDF/Word
• [ ] Коллаборативное редактирование
• [ ] Версионность документов
• [ ] Комментарии и аннотации
• [ ] Автосохранение в локальном хранилище
• [ ] Темы оформления редактора