| Install | |
|---|---|
composer require waterloobae/tinymce |
|
| Latest Version: | v1.2.5 |
| PHP: | ^8.1|^8.2|^8.3|^8.4 |
A comprehensive Laravel package providing TinyMCE rich text editor with LaTeX/MathJax support for Laravel Blade, Livewire components, and Filament admin panels.
Install via Composer:
composer require waterloobae/tinymce
The package will auto-register via Laravel's package discovery.
If you want to customize the views:
php artisan vendor:publish --tag=tinymce-views
This will publish views to resources/views/vendor/tinymce/.
The package automatically includes the GPL license key in TinyMCE initialization. If you experience editor loading issues or license warnings, ensure your tinymce.init configuration includes:
tinymce.init({
// ... other config
license_key: 'gpl',
// ... rest of config
});
This is required when using TinyMCE via CDN with the GPL license.
Use in your Filament resource schemas:
use Waterloobae\TinyMce\Forms\Components\TinyEditor;
// In your resource schema
TinyEditor::make('description')
->profile('simple') // 'minimal', 'simple', or 'full'
->columnSpanFull();
Profiles:
minimal - Basic formatting (bold, italic, lists, links)simple - Standard features (formatting, images, tables, code)full - All features (media, code samples, preview, etc.)Custom Configuration:
TinyEditor::make('content')
->plugins(['lists', 'link', 'image', 'table', 'code'])
->toolbar('bold italic | bullist numlist | link image')
->columnSpanFull();
Display HTML with LaTeX rendering in Filament table listings:
use Waterloobae\TinyMce\Tables\Columns\HtmlWithLatex;
// In your table schema
HtmlWithLatex::make('content')
->label('Problem Content')
->limit(50)
->wrap();
With all table column options:
HtmlWithLatex::make('description')
->label('Description')
->limit(100)
->wrap()
->toggleable()
->searchable();
Display HTML with LaTeX rendering in Filament view pages:
use Waterloobae\TinyMce\Infolists\Components\HtmlWithLatex;
// In your infolist schema
HtmlWithLatex::make('description')
->label('Description')
->columnSpanFull();
Or use the standard TextEntry with custom view:
use Filament\Infolists\Components\TextEntry;
TextEntry::make('description')
->view('tinymce::infolists.components.html-with-latex')
->columnSpanFull();
Use in any Livewire component:
<x-tinymce::tinymce-editor
wire:model="description"
profile="simple"
height="400"
/>
With Livewire properties:
// Component class
class EditArticle extends Component
{
public string $content = '';
public function save()
{
Article::create([
'content' => $this->content,
]);
}
}
<!-- Component view -->
<form wire:submit="save">
<x-tinymce::tinymce-editor
wire:model="content"
profile="full"
/>
<button type="submit">Save</button>
</form>
Use in standard Laravel Blade forms (non-Livewire):
<form action="{{ route('articles.store') }}" method="POST">
@csrf
<x-tinymce::tinymce-editor
name="description"
:value="old('description', $article->description ?? '')"
profile="simple"
height="300"
/>
<button type="submit">Submit</button>
</form>
Render HTML content with LaTeX equations:
<x-tinymce::html-with-latex :content="$article->description" />
With custom classes:
<x-tinymce::html-with-latex
:content="$content"
class="my-4 text-lg"
/>
The package supports both inline and display math equations using standard LaTeX syntax:
Inline equations:
Einstein's famous equation: $E = mc^2$
Alternative syntax: \(E = mc^2\)
Display equations:
$$
\int_{a}^{b} f(x)dx
$$
Alternative syntax:
\[
\int_{a}^{b} f(x)dx
\]
<?php
namespace App\Filament\Resources;
use Waterloobae\TinyMce\Forms\Components\TinyEditor;
use Waterloobae\TinyMce\Tables\Columns\HtmlWithLatex as HtmlWithLatexColumn;
use Waterloobae\TinyMce\Infolists\Components\HtmlWithLatex;
use Filament\Resources\Resource;
use Filament\Schemas\Schema;
use Filament\Schemas\Components\Section;
use Filament\Tables\Table;
use Filament\Tables\Columns\TextColumn;
class ArticleResource extends Resource
{
// Table Schema
public static function table(Table $table): Table
{
return $table
->columns([
TextColumn::make('title')
->searchable()
->sortable(),
HtmlWithLatexColumn::make('body')
->label('Content Preview')
->limit(100)
->wrap(),
TextColumn::make('created_at')
->dateTime()
->sortable(),
]);
}
// Form Schema
public static function form(Schema $schema): Schema
{
return $schema
->components([
Section::make('Content')
->schema([
TinyEditor::make('body')
->label('Article Body')
->profile('full')
->columnSpanFull()
->required(),
]),
]);
}
// View Schema
public static function infolist(Schema $schema): Schema
{
return $schema
->components([
Section::make('Content')
->schema([
HtmlWithLatex::make('body')
->label('Article Body')
->columnSpanFull(),
]),
]);
}
}
<?php
namespace App\Livewire;
use Livewire\Component;
class ArticleEditor extends Component
{
public string $title = '';
public string $content = '';
public function mount($article = null)
{
if ($article) {
$this->title = $article->title;
$this->content = $article->content;
}
}
public function save()
{
$this->validate([
'title' => 'required|string|max:255',
'content' => 'required|string',
]);
// Save logic here
}
public function render()
{
return view('livewire.article-editor');
}
}
<!-- resources/views/livewire/article-editor.blade.php -->
<div>
<form wire:submit="save">
<div class="mb-4">
<label for="title">Title</label>
<input type="text" wire:model="title" id="title" class="form-input">
@error('title') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="content">Content</label>
<x-tinymce::tinymce-editor
wire:model="content"
profile="full"
height="500"
/>
@error('content') <span class="error">{{ $message }}</span> @enderror
</div>
<button type="submit" class="btn btn-primary">
Save Article
</button>
</form>
</div>
| Option | Type | Default | Description |
|---|---|---|---|
name |
string | 'content' | Form field name |
value |
string | '' | Initial value |
wire:model |
string | null | Livewire property binding |
profile |
string | 'simple' | Editor profile (minimal/simple/full) |
height |
int | 400 | Editor height in pixels |
| Option | Type | Default | Description |
|---|---|---|---|
content |
string | '' | HTML content to render |
class |
string | 'prose prose-sm dark:prose-invert max-w-none' | CSS classes |
Images are automatically converted to base64 when:
This eliminates the need for file storage and makes content portable.
The editor automatically detects your application's dark mode:
oxide-dark skin in dark modeoxide skin in light modeMinimal Profile:
Simple Profile (Default):
Full Profile:
If you're upgrading from a previous version or custom components, ensure you use the correct namespaces:
use Waterloobae\TinyMce\Forms\Components\TinyEditor;
use Waterloobae\TinyMce\Infolists\Components\HtmlWithLatex;
use Waterloobae\TinyMce\Tables\Columns\HtmlWithLatex;
<x-tinymce::tinymce-editor wire:model="content" />
<x-tinymce::html-with-latex :content="$content" />
This package uses the following CDN resources:
If the TinyMCE editor doesn't load:
wire:modelphp artisan view:clearIf LaTeX equations aren't rendering:
$...$ or $$...$$)If dark mode isn't working:
dark class on <html> or <body> tagHtmlWithLatex table column component for Filament tablesThis package is licensed under the MIT License. See LICENSE file for details.
Important Note: This package integrates with TinyMCE, which is licensed under the GNU General Public License (GPL) v2+. When using this package, you are using TinyMCE via CDN, and you must comply with TinyMCE's GPL license terms. For more information about TinyMCE's licensing, visit https://www.tiny.cloud/pricing/ or consider their commercial licensing options if GPL is not suitable for your project.
For issues, questions, or contributions, please visit: https://github.com/waterloobae/tinymce