Download the PHP package ptnghia/laravel-tiptap-editor without Composer
On this page you can find all versions of the php package ptnghia/laravel-tiptap-editor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download ptnghia/laravel-tiptap-editor
More information about ptnghia/laravel-tiptap-editor
Files in ptnghia/laravel-tiptap-editor
Package laravel-tiptap-editor
Short Description A Laravel package providing a Tiptap-based rich text editor with Bootstrap 5 layout, media management, and AI content generation
License MIT
Informations about the package laravel-tiptap-editor
Laravel Tiptap Editor
A full-featured Laravel package providing a rich text editor built on Tiptap v2, Bootstrap 5 (or Tailwind CSS), with media management, server-side rendering, and optional AI content generation. Works with standard Laravel + Blade — no SPA required.
✨ Features
- Rich Text — Bold, italic, underline, strikethrough, subscript, superscript, text color, highlight
- Headings & Structure — H1–H4, paragraph, horizontal rule, hard break
- Lists — Bullet list, ordered list (with start offset)
- Bootstrap 5 Layout — Row/column grid with responsive breakpoints (
col-md-6,col-lg-4, etc.) - Bootstrap Components — Alert (8 types), Card (header/body/footer), Button (inline atom)
- Media — Image upload with thumbnail generation, Video embed (YouTube, Vimeo, MP4), Media library for reusing uploaded files
- Gallery — Multi-image gallery with responsive grid and lightbox
- Table — Full table editing, cell merge (colspan/rowspan), Bootstrap-styled
- Code Block — Syntax highlighting via lowlight
- Links — Internal/external links with
rel/targetconfiguration - Slash Commands — Notion-style
/command palette for quick block insertion - Block Menu — Floating action menu: duplicate, move up/down, delete, transform block
- Content Safety — JSON sanitization, URL whitelist, XSS prevention, depth/size limits, file content scanning, SVG sanitization
- Upload Security — Gate/role-based permissions, blocked extensions, MIME mismatch detection, double-extension prevention, anti-polyglot scanning
- Server-side Rendering — JSON → clean HTML via Blade partials; supports Bootstrap 5 or Tailwind CSS output theme
- Dark Mode — Auto (system), light, dark via CSS variables
- Keyboard Shortcuts — Built-in
Ctrl+/help modal with all shortcuts listed - Accessibility — WCAG 2.1 AA: ARIA roles, roving tabindex, live region announcements
- Responsive Preview — Desktop / Tablet (768px) / Mobile (375px) preview inside editor
- AI Content Generation (optional) — OpenAI & Claude: generate, refine, summarize, translate
- i18n — English & Vietnamese included; fully translatable
Requirements
| Dependency | Version |
|---|---|
| PHP | 8.2+ |
| Laravel | 11.x or 12.x |
Pre-built JS/CSS assets are included in
dist/— no Node.js required for production use.
Installation
1. Install via Composer
The service provider and facade are auto-discovered.
2. Publish Assets
Optional:
3. Include Assets in Your Layout
Basic Usage
Blade Component
Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
name |
string |
'content' |
Hidden input field name |
value |
string\|array\|null |
null |
Initial content (Tiptap JSON array or JSON string) |
config |
array |
[] |
Override editor configuration |
placeholder |
string |
From lang file | Editor placeholder text |
disabled |
bool |
false |
Render editor as read-only |
id |
string\|null |
Auto-generated | HTML id for the wrapper element |
Read Submitted Content
The editor submits a JSON string via the named hidden input:
Server-side Rendering
Via Facade
Via Eloquent Trait
Available methods:
Configuration
Publish and edit config/tiptap-editor.php:
Extensions
Enable or disable individual features:
Toolbar Groups
Override per-instance in Blade:
Theme
Output Theme (Tailwind CSS)
By default the server-rendered HTML uses Bootstrap 5 classes. Switch to Tailwind with a single config change:
Note:
output_themeonly affects rendered output HTML (e.g.TiptapEditor::render()). The editor admin UI is unaffected.
Tailwind purge — Tailwind purges classes at build time. Add the safelist below to tailwind.config.js in your host app so dynamic content classes are not stripped:
Alternatively, enable tailwind_fallback_css (zero-config, no Tailwind install required) — a pre-built stylesheet covering all package classes is published to public/vendor/tiptap-editor/css/tailwind-fallback.css.
Media Settings
Upload Security & Permissions
Setting up Gate-based permissions
Role-based permissions (Spatie/Permission)
Link & Sanitization Settings
Control which HTML attributes are allowed in the rendered output:
URL safety is always enforced:
External links (target="_blank") automatically receive rel="noopener noreferrer".
Table Rendered Output
By default tables render as <table class="table table-bordered">. After publishing views you can customise resources/views/vendor/tiptap-editor/renders/table.blade.php to add table-striped, table-hover, etc.
Video Providers
Route Settings
Package routes:
| Method | URL | Name |
|---|---|---|
POST |
/tiptap-editor/media/upload |
tiptap-editor.media.upload |
GET |
/tiptap-editor/media/browse |
tiptap-editor.media.browse |
DELETE |
/tiptap-editor/media/{id} |
tiptap-editor.media.delete |
POST |
/tiptap-editor/ai/generate |
tiptap-editor.ai.generate |
POST |
/tiptap-editor/ai/refine |
tiptap-editor.ai.refine |
POST |
/tiptap-editor/ai/summarize |
tiptap-editor.ai.summarize |
POST |
/tiptap-editor/ai/translate |
tiptap-editor.ai.translate |
AI routes are only registered when
ai.enabled = true.
AI Content Generation (Optional)
Setup
Configuration
Use in PHP
Content Sanitization
The sanitizer:
- Whitelists node types, attributes, and URL schemes
- Removes
javascript:,data:,vbscript:URLs - Strips control characters and empty marks
- Enforces max nesting depth and total content size
Keyboard Shortcuts
Press Ctrl+/ (⌘/ on Mac) to open the shortcuts help modal.
| Shortcut | Action |
|---|---|
Ctrl+B |
Bold |
Ctrl+I |
Italic |
Ctrl+U |
Underline |
Ctrl+Shift+X |
Strikethrough |
Ctrl+Alt+0 |
Paragraph |
Ctrl+Alt+1 – 4 |
Heading 1–4 |
Ctrl+Shift+8 |
Bullet list |
Ctrl+Shift+7 |
Ordered list |
Ctrl+Shift+B |
Blockquote |
Ctrl+Alt+C |
Code block |
Ctrl+Z |
Undo |
Ctrl+Shift+Z |
Redo |
/ |
Slash command menu |
Ctrl+/ |
Shortcuts help |
Customizing Rendered HTML
After publishing views, edit the Blade partials in resources/views/vendor/tiptap-editor/renders/:
| File | Renders |
|---|---|
paragraph.blade.php |
<p> |
heading.blade.php |
<h1> – <h4> |
image.blade.php |
<figure><img> with optional caption |
video.blade.php |
<iframe> (YouTube / Vimeo) or <video> (MP4) |
bootstrap-row.blade.php |
<div class="row"> |
bootstrap-col.blade.php |
<div class="col-*"> |
alert.blade.php |
<div class="alert alert-*"> |
card.blade.php |
Bootstrap card (header / body / footer) |
button.blade.php |
<a class="btn btn-*"> |
gallery.blade.php |
Responsive image grid |
gallery-image.blade.php |
Single gallery image |
table.blade.php |
<table class="table"> |
list.blade.php |
<ul> / <ol> |
blockquote.blade.php |
<blockquote> |
code-block.blade.php |
<pre><code> |
horizontal-rule.blade.php |
<hr> |
Extending
Custom Node Renderer
Custom AI Provider
Internationalization
Includes en and vi translations. Publish to customise or add new locales:
Testing
214 tests, 440 assertions covering HTML rendering, sanitization, content validation, media, tables, AI providers, gallery, traits, config, and translations.
Directory Structure
License
MIT License. See LICENSE for details.
Changelog
v1.3.0 — 2026-03-01
Tailwind CSS Output Theme
- New
ClassMapInterface/ClassMaparchitecture — Strategy pattern for CSS framework–agnostic HTML rendering BootstrapClassMap— extracts all existing Bootstrap 5 classes (zero behavior change, fully backward compatible)TailwindClassMap— full Tailwind CSS equivalents for every component: Alert, Card, Button, Row/Col grid, Table, Image, Video, Gallery- Automatic Bootstrap col class → Tailwind
col-span-*/ responsivemd:col-span-*conversion data-tiptap-type/data-tiptap-variantattributes added to output elements when using Tailwind theme (enables CSS targeting fallback)- New
resources/css/tailwind-fallback.css(~13 KB) — pre-built stylesheet covering all Tailwind utility classes used in rendered output - Auto-inject fallback CSS via
@push('styles')in Blade component whentailwind_fallback_css = true - New config keys under
rendering:output_theme,tailwind_fallback_css,class_overrides output_themeenv variable:TIPTAP_OUTPUT_THEME
Breaking changes: None — output_theme defaults to 'bootstrap'.
v1.1.0
Media Library
- Browse and reuse previously uploaded images/videos from a new "Library" tab in Image and Video modals
- Searchable grid with pagination, click-to-select, and instant insert
- Integrated with existing browse API (
GET /tiptap-editor/media/browse)
Upload Security & Permissions
- Gate-based and role-based upload authorization (compatible with Spatie/Permission)
- Configurable upload directory strategy:
default,user(per-user folders),custom(resolver callback) - Blocked file extensions list (PHP, EXE, shell scripts, etc.) — prevents upload of dangerous files
- Double-extension detection (e.g.,
malware.php.jpg) - File content scanning: detects embedded PHP tags,
eval(),exec(), polyglot attack patterns - MIME type mismatch detection (compares detected vs. declared MIME types)
- Null byte filename protection
- Filename sanitization (path traversal prevention, length limits)
SVG Security
- SVG file sanitization on upload: strips
<script>,on*event handlers,javascript:URIs,<foreignObject>, external<use>references
CSS Injection Prevention
- Color values in highlight and text style marks are now validated against safe patterns (hex, rgb/hsl, named colors)
Other
- TrailingNode extension (auto-appends paragraph after block nodes)
- Configurable editor height, scroll, and CSS resize handle
- Edit-after-insert for all block tools (Card, Gallery, Alert, Table)
v1.0.0 – 2026-02-27
Initial release.
Core
- Rich text editing with 20+ formatting options
- Bootstrap 5 grid layout (Row/Column, 8 responsive presets)
- Bootstrap components: Alert, Card, Button
- Table editing (merge cells, Bootstrap styled)
- Media: image upload + thumbnail generation, video embed (YouTube/Vimeo/MP4)
- Gallery: responsive grid, lightbox
- Server-side JSON→HTML rendering via Blade partials
- Content sanitization & validation (whitelist-based, XSS-safe)
HasTiptapContentEloquent trait
UX
- Slash commands (
/palette, 18 commands) - Block menu (drag handle, duplicate, delete, transform)
- Dark mode (auto/light/dark, CSS variables)
- Keyboard shortcuts help modal (
Ctrl+/) - WCAG 2.1 AA accessibility (ARIA, roving tabindex, live regions)
- Responsive preview (desktop / tablet / mobile)
AI (optional)
- OpenAI & Claude providers (strategy pattern)
- Actions: generate, refine, summarize, translate
- Configurable rate limiting
- Built-in prompt templates
Other
- i18n: English & Vietnamese
- 202 tests, 422 assertions
All versions of laravel-tiptap-editor with dependencies
illuminate/contracts Version ^11.0|^12.0
illuminate/database Version ^11.0|^12.0
illuminate/http Version ^11.0|^12.0
illuminate/routing Version ^11.0|^12.0
illuminate/support Version ^11.0|^12.0
illuminate/view Version ^11.0|^12.0