Реализация WYSIWYG-редактора для пользовательского контента на сайте

Реализация WYSIWYG-редактора для пользовательского контента на сайте

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

Выбор редактора

Для пользовательского контента подходят три варианта в зависимости от требований:

Quill — простой, ~200 KB, delta-формат. Хорош для комментариев и коротких текстов с базовым форматированием.

TipTap (на основе ProseMirror) — расширяемый, TypeScript-first, богатая экосистема расширений. Подходит для статей, документов.

Lexical (Meta) — самый производительный, tree-based, хорошо работает с React 18 concurrent mode.

Пример с TipTap как наиболее сбалансированным выбором для пользовательского контента:

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-link @tiptap/extension-placeholder

Компонент редактора

// components/UserEditor.tsx
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import Placeholder from '@tiptap/extension-placeholder'
import { useCallback } from 'react'

interface UserEditorProps {
  initialContent?: string
  onChange: (html: string) => void
  maxLength?: number
}

export function UserEditor({ initialContent, onChange, maxLength = 10000 }: UserEditorProps) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        heading: { levels: [2, 3] }, // не даём h1 пользователям
        codeBlock: false,            // отключаем блоки кода
        horizontalRule: false,
      }),
      Link.configure({
        openOnClick: false,
        HTMLAttributes: {
          rel: 'nofollow noopener noreferrer',
          target: '_blank',
        },
        validate: href => /^https?:\/\//.test(href), // только https/http
      }),
      Image.configure({
        allowBase64: false,
        HTMLAttributes: { loading: 'lazy' },
      }),
      Placeholder.configure({
        placeholder: 'Напишите что-нибудь...',
      }),
    ],
    content: initialContent,
    onUpdate: ({ editor }) => {
      const html = editor.getHTML()
      if (html.length <= maxLength) {
        onChange(html)
      }
    },
  })

  const addLink = useCallback(() => {
    const url = window.prompt('URL:')
    if (url) editor?.chain().focus().setLink({ href: url }).run()
  }, [editor])

  if (!editor) return null

  return (
    <div className="border rounded-lg overflow-hidden">
      <div className="flex gap-1 p-2 border-b bg-gray-50 flex-wrap">
        <ToolbarButton
          active={editor.isActive('bold')}
          onClick={() => editor.chain().focus().toggleBold().run()}
          title="Жирный"
        >B</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('italic')}
          onClick={() => editor.chain().focus().toggleItalic().run()}
          title="Курсив"
        >I</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('bulletList')}
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          title="Список"
        >•</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('link')}
          onClick={addLink}
          title="Ссылка"
        >🔗</ToolbarButton>
      </div>
      <EditorContent
        editor={editor}
        className="prose max-w-none p-4 min-h-[150px] focus:outline-none"
      />
      {maxLength && (
        <div className="text-xs text-gray-400 px-4 py-1 border-t text-right">
          {editor.storage.characterCount?.characters?.() ?? 0} / {maxLength}
        </div>
      )}
    </div>
  )
}

Санитизация на сервере

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

// lib/sanitize.ts
import DOMPurify from 'isomorphic-dompurify'

const ALLOWED_TAGS = [
  'p', 'br', 'strong', 'em', 'u', 's',
  'h2', 'h3', 'ul', 'ol', 'li', 'blockquote',
  'a', 'img',
]

const ALLOWED_ATTR = ['href', 'src', 'alt', 'loading', 'rel', 'target', 'class']

export function sanitizeUserHtml(dirty: string): string {
  return DOMPurify.sanitize(dirty, {
    ALLOWED_TAGS,
    ALLOWED_ATTR,
    // Удаляем data: URI в src
    FORBID_ATTR: ['style', 'onerror', 'onload'],
    // Принудительно добавляем rel для ссылок
    ADD_ATTR: ['rel'],
    FORCE_BODY: false,
  })
}

// В API роуте
export async function POST(request: Request) {
  const { content } = await request.json()
  const clean = sanitizeUserHtml(content)
  await db.post.create({ data: { content: clean, authorId: session.user.id } })
  return Response.json({ success: true })
}

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

Пользователи захотят вставлять картинки. Нужен эндпоинт загрузки с проверками:

// app/api/upload/route.ts
import sharp from 'sharp'
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'

const s3 = new S3Client({ region: process.env.AWS_REGION })

export async function POST(request: Request) {
  const form = await request.formData()
  const file = form.get('file') as File

  if (!file) return new Response('No file', { status: 400 })
  if (file.size > 5 * 1024 * 1024) return new Response('Too large', { status: 413 })
  if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
    return new Response('Invalid type', { status: 415 })
  }

  const buffer = Buffer.from(await file.arrayBuffer())

  // Оптимизируем через sharp
  const optimized = await sharp(buffer)
    .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
    .webp({ quality: 80 })
    .toBuffer()

  const key = `user-uploads/${Date.now()}-${crypto.randomUUID()}.webp`
  await s3.send(new PutObjectCommand({
    Bucket: process.env.S3_BUCKET,
    Key: key,
    Body: optimized,
    ContentType: 'image/webp',
    CacheControl: 'public, max-age=31536000, immutable',
  }))

  return Response.json({ url: `${process.env.CDN_URL}/${key}` })
}

В редакторе подключаем загрузчик:

Image.configure({
  uploadFn: async (file: File) => {
    const form = new FormData()
    form.append('file', file)
    const res = await fetch('/api/upload', { method: 'POST', body: form })
    const { url } = await res.json()
    return url
  },
})

Рендеринг сохранённого HTML

// components/UserContent.tsx
import DOMPurify from 'isomorphic-dompurify'

// Повторно санитизируем при рендере — на случай если данные старые
export function UserContent({ html }: { html: string }) {
  const clean = DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR })

  return (
    <div
      className="prose prose-sm max-w-none
        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
        prose-img:rounded-lg prose-img:mx-auto"
      dangerouslySetInnerHTML={{ __html: clean }}
    />
  )
}

Модерация контента

Если сайт публичный — автоматическая проверка перед показом:

// Простая проверка на спам-ссылки
function hasSpamLinks(html: string, maxLinks = 3): boolean {
  const matches = html.match(/<a\s/gi)
  return (matches?.length ?? 0) > maxLinks
}

// Или через OpenAI Moderation API
async function moderateContent(text: string): Promise<boolean> {
  const res = await openai.moderations.create({ input: text })
  return !res.results[0].flagged
}

Сроки

Базовый редактор с санитизацией и сохранением: 2–3 дня. С загрузкой изображений, оптимизацией через sharp, CDN: +2 дня. Автоматическая модерация: +1 день.