Інтеграція редактора Tiptap в CMS сайту

Інтеграція редактора Tiptap в CMS сайту

Tiptap — це headless rich-text редактор на основі ProseMirror. На відміну від TinyMCE та CKEditor, він не має вбудованого UI — ви будуєте інтерфейс самі. Це надає повний контроль над зовнішнім виглядом, але потребує більше роботи при старті. Ідеальний для React-проектів з користувацьким дизайном.

Встановлення

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

Базовий редактор

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Image from '@tiptap/extension-image';
import Link from '@tiptap/extension-link';

function TiptapEditor({ content, onChange }) {
    const editor = useEditor({
        extensions: [
            StarterKit,
            Image.configure({ inline: false }),
            Link.configure({ openOnClick: false })
        ],
        content,
        onUpdate: ({ editor }) => onChange(editor.getHTML())
    });

    if (!editor) return null;

    return (
        <div className="border rounded-lg">
            <EditorToolbar editor={editor} />
            <EditorContent editor={editor} className="prose max-w-none p-4" />
        </div>
    );
}

Користувацький тулбар

function EditorToolbar({ editor }) {
    return (
        <div className="flex gap-1 p-2 border-b">
            <button
                onClick={() => editor.chain().focus().toggleBold().run()}
                className={editor.isActive('bold') ? 'bg-gray-200 rounded' : ''}
            >
                <BoldIcon className="w-4 h-4" />
            </button>
            <button onClick={() => editor.chain().focus().toggleItalic().run()}>
                <ItalicIcon className="w-4 h-4" />
            </button>
            <button
                onClick={() => {
                    const url = window.prompt('URL:');
                    if (url) editor.chain().focus().setLink({ href: url }).run();
                }}
            >
                <LinkIcon className="w-4 h-4" />
            </button>
            {/* Кнопка завантаження зображення */}
            <button onClick={() => document.getElementById('image-upload').click()}>
                <ImageIcon className="w-4 h-4" />
            </button>
            <input
                id="image-upload"
                type="file"
                className="hidden"
                accept="image/*"
                onChange={async (e) => {
                    const file = e.target.files[0];
                    const url = await uploadImage(file);
                    editor.chain().focus().setImage({ src: url }).run();
                }}
            />
        </div>
    );
}

Користувацькі вузли (блоки вмісту)

Tiptap дозволяє створювати користувацькі блоки — наприклад, блок "Цитата з автором":

import { Node, mergeAttributes } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';

const QuoteBlock = Node.create({
    name: 'quoteBlock',
    group: 'block',
    content: 'inline*',
    addAttributes() {
        return {
            author: { default: null },
            position: { default: null }
        };
    },
    parseHTML() {
        return [{ tag: 'blockquote[data-type="quote-block"]' }];
    },
    renderHTML({ HTMLAttributes }) {
        return ['blockquote', mergeAttributes(HTMLAttributes, { 'data-type': 'quote-block' }), 0];
    },
    addNodeView() {
        return ReactNodeViewRenderer(QuoteBlockComponent);
    }
});

JSON vs HTML зберігання

Tiptap може зберігати вміст як JSON (рідний формат ProseMirror) або HTML. JSON краще: він структурований, не потребує санітизації, легко трансформується:

// Збереження як JSON
const jsonContent = editor.getJSON();

// При відображенні — конвертування JSON → HTML на стороні сервера
// або використання generateHTML з @tiptap/html
import { generateHTML } from '@tiptap/html';
const html = generateHTML(jsonContent, [StarterKit, Image, Link]);

Колаборативне редагування

Tiptap підтримує спільне редагування через Yjs:

npm install @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor yjs y-websocket

Часовий графік інтеграції: 2–3 дні для повноцінного редактора з тулбаром, завантаженням зображень та користувацькими блоками.