← Back to WaterlooBae

Laravel TinyMCE

TinyMCE + LaTeX support for Laravel, Livewire, and Filament.

Overview

This package integrates TinyMCE 8 with MathJax 3 so you can author and display rich mathematical content in Laravel projects. It works in regular Blade forms, Livewire components, and Filament resources with minimal setup.

Key Features

• TinyMCE 8 editor with automatic dark mode behavior.
• MathJax rendering for inline and display LaTeX equations.
• Base64 image handling for paste, drag-drop, and picker uploads.
• Livewire support with reactive two-way binding.
• Filament field, table column, and infolist integrations.
• Blade components for both editing and rendering HTML + math.
• Low-configuration defaults that work out of the box.

Installation

Install via Composer:

composer require waterloobae/tinymce

Optional view publishing:

php artisan vendor:publish --tag=tinymce-views

When needed, set TinyMCE GPL key explicitly with license_key: 'gpl' in your editor config.

Usage Patterns

Filament form field:

use Waterloobae\TinyMce\Forms\Components\TinyEditor;

TinyEditor::make('description')
    ->profile('simple')
    ->columnSpanFull();

Filament table preview with LaTeX:

use Waterloobae\TinyMce\Tables\Columns\HtmlWithLatex;

HtmlWithLatex::make('content')
    ->limit(50)
    ->wrap();

Livewire editor binding:

<x-tinymce::tinymce-editor
    wire:model="content"
    profile="full"
    height="500"
/>

Regular Blade form usage:

<x-tinymce::tinymce-editor
    name="description"
    :value="old('description', $article->description ?? '')"
    profile="simple"
/>

Render stored HTML with LaTeX:

<x-tinymce::html-with-latex :content="$article->description" />

Editor Profiles

• minimal: basic text formatting and links.
• simple: common formatting, image, table, and code tools.
• full: complete authoring toolset with media and preview features.

LaTeX Examples

Inline math:

Einstein equation: $E = mc^2$

Display math:

$$
\int_{a}^{b} f(x)dx
$$

Configuration Summary

• Editor options: name, value, wire:model, profile, height.
• Renderer options: content and optional CSS class override.
• Base64 images improve portability and remove dependency on file storage.
• Dark mode skin switches automatically with app theme.