Laravel TipTap

TipTap rich text editor for Laravel with media manager.

Features

• Full-featured TipTap editor (headings, bold, italic, tables, images, code blocks, etc.)
• Media manager (browse, upload, create folders, delete)
• Drag-drop/paste image upload with original filename
• Cell background color for tables
• Source code editing and fullscreen mode
• Automatic orphan image cleanup
• Laravel auto-discover ServiceProvider

Install

1. Composer

composer require laravel-tiptap/editor

2. Filesystem Disk

Add to config/filesystems.php:

'disks' => [
    'public_uploads' => [
        'driver' => 'local',
        'root' => public_path('userfiles'),
        'url' => env('APP_URL').'/userfiles',
        'visibility' => 'public',
    ],
],

3. Publish assets (optional)

php artisan vendor:publish --tag=editor-config
php artisan vendor:publish --tag=editor-views
php artisan vendor:publish --tag=editor-assets

4. NPM

Copy resources/js/ from the package to your project, then install dependencies:

npm install @tiptap/core @tiptap/pm @tiptap/vue-3 @tiptap/starter-kit \
  @tiptap/extension-link @tiptap/extension-image @tiptap/extension-table \
  @tiptap/extension-table-row @tiptap/extension-table-cell \
  @tiptap/extension-table-header @tiptap/extension-task-list \
  @tiptap/extension-task-item @tiptap/extension-code-block-lowlight \
  @tiptap/extension-text-align @tiptap/extension-highlight \
  @tiptap/extension-text-style @tiptap/extension-color \
  @tiptap/extension-font-family @tiptap/extension-subscript \
  @tiptap/extension-superscript @tiptap/extension-underline \
  @tiptap/extension-placeholder lowlight

Add to vite.config.js:

laravel({
    input: [
        // ... your existing inputs
        'resources/js/editor/tiptap-editor.js',
    ],
})

5. CSRF Exception

If using CSRF protection, add to bootstrap/app.php:

$middleware->validateCsrfTokens(except: [
    'editor/*',
]);

Usage

Blade Component

<x-editor name="content" :value="old('content')" />

Options:

<x-editor
    name="content"
    :value="$article->content"
    :config="['placeholder' => 'Start writing...']"
    height="500px"
    upload-url="/editor/upload"
/>

API Endpoints

All endpoints require authentication.

Storage Structure

public/userfiles/
└── users/
    └── {userId}/
        ├── images/
        │   ├── photo.jpg
        │   └── screenshot.png
        ├── files/
        │   └── document.pdf
        └── custom-folder/
            └── design.png

Config

Publish and edit config/editor.php:

php artisan vendor:publish --tag=editor-config

Requirements

• PHP 8.2+
• Laravel 10/11/12
• Vue 3
• Vite

License

MIT License. See LICENSE for details.