PHPackages flexwave/wysiwyg - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. flexwave/wysiwyg ActiveLibrary[Templating & Views](/categories/templating) flexwave/wysiwyg ================ A modern, feature-rich WYSIWYG editor package for Laravel 10+ 1.0.0(2mo ago)001[1 issues](https://github.com/flex-wave/wysiwyg/issues)[1 PRs](https://github.com/flex-wave/wysiwyg/pulls)MITPHPPHP ^8.2 Since Apr 9Pushed 2mo agoCompare [ Source](https://github.com/flex-wave/wysiwyg)[ Packagist](https://packagist.org/packages/flexwave/wysiwyg)[ RSS](/packages/flexwave-wysiwyg/feed)WikiDiscussions main Synced 3w ago READMEChangelog (1)Dependencies (8)Versions (4)Used By (0) FlexWave WYSIWYG ================ [](#flexwave-wysiwyg) A modern, feature-rich WYSIWYG rich-text editor package for **Laravel 10+** and **PHP 8.2+**. --- Features -------- [](#features) - **Blade component** `` — drop in anywhere - Formatting: bold, italic, underline, strikethrough - Headings H1–H6, paragraph - Ordered & unordered lists, blockquotes - Inline code & code blocks - Link insertion (modal) + image upload - Text alignment (left / center / right / justify) - Drag & drop and paste images directly into the editor - HTML source view & live preview panel - Fullscreen editing mode - Word count / character count status bar - Dark mode (`auto`, `light`, `dark`) - Configurable toolbar via `config/flexwave-wysiwyg.php` - Laravel events on upload/delete (`ImageUploaded`, `ImageDeleted`) - Optional image resizing via Intervention Image v3 - Custom plugin support - Public API (`FlexWave.getInstance(id)`) - Fully responsive - Zero JS dependencies (vanilla JS, ~12 KB) --- Requirements ------------ [](#requirements) RequirementVersionPHP^8.2Laravel^10.0 or ^11.0Intervention Image^3.0--- Installation ------------ [](#installation) ### 1. Install via Composer [](#1-install-via-composer) ``` composer require flexwave/wysiwyg ``` The package is auto-discovered via Laravel's package auto-discovery (no need to add the provider manually). ### 2. Publish assets [](#2-publish-assets) ``` # Publish everything (config + views + assets) php artisan vendor:publish --tag=flexwave-wysiwyg # Or publish individually: php artisan vendor:publish --tag=flexwave-wysiwyg-config php artisan vendor:publish --tag=flexwave-wysiwyg-views php artisan vendor:publish --tag=flexwave-wysiwyg-assets ``` ### 3. Create the storage symlink (if using the `public` disk) [](#3-create-the-storage-symlink-if-using-the-public-disk) ``` php artisan storage:link ``` ### 4. Include assets in your layout [](#4-include-assets-in-your-layout) Add to your main Blade layout (e.g. `resources/views/layouts/app.blade.php`): ``` @wysiwygStyles {{-- page content --}} @wysiwygScripts ``` Or use standard HTML tags after publishing assets: ``` ``` --- Usage ----- [](#usage) ### Basic usage inside a Blade form [](#basic-usage-inside-a-blade-form) ``` @csrf Save ``` ### Component attributes [](#component-attributes) AttributeTypeDefaultDescription`name``string``content`HTML form field name`value``string``''`Initial HTML content`placeholder``string`*(from config)*Placeholder text when empty`height``int``400`Minimum editor height in pixels`id``string`*(auto-generated)*HTML id for the editor wrapper`required``bool``false`Mark textarea as required`readonly``bool``false`Disable editing`dark-mode``string``auto``auto`, `light`, or `dark``class``string``''`Extra CSS classes on the wrapper### Validation errors [](#validation-errors) The component automatically reads and displays Laravel validation errors: ``` // In your controller: $request->validate([ 'content' => 'required|string|min:10', ]); ``` ``` {{-- In your view: --}} @error('content') {{ $message }} @enderror ``` *(The component renders the error message automatically — no need for a separate `@error` block.)* --- Server-side Helpers ------------------- [](#server-side-helpers) Use the `Wysiwyg` facade for server-side processing: ``` use FlexWave\Wysiwyg\Facades\Wysiwyg; // Sanitize untrusted HTML from the editor $clean = Wysiwyg::sanitize($request->input('content')); // Convert HTML to plain text $text = Wysiwyg::toText($html); // Get a plain-text excerpt $excerpt = Wysiwyg::excerpt($html, 160); // Word count $words = Wysiwyg::wordCount($html); ``` --- Configuration ------------- [](#configuration) `config/flexwave-wysiwyg.php` (after publishing): ``` return [ // Route prefix for upload endpoints 'route_prefix' => 'flexwave', // Middleware applied to upload routes 'middleware' => ['web', 'auth'], // File upload settings 'upload' => [ 'disk' => env('FLEXWAVE_UPLOAD_DISK', 'public'), 'path' => env('FLEXWAVE_UPLOAD_PATH', 'wysiwyg/uploads'), 'max_size' => 5120, // KB 'allowed' => ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], ], // Optional image resizing (Intervention Image) 'image_resize' => [ 'enabled' => true, 'max_width' => 1920, 'max_height' => 1080, 'quality' => 85, ], // Toolbar groups (remove items to hide them) 'toolbar' => [ ['heading', 'paragraph'], ['bold', 'italic', 'underline', 'strikethrough'], // ... ], // Editor defaults 'defaults' => [ 'height' => 400, 'placeholder' => 'Start writing here...', 'dark_mode' => 'auto', // 'auto' | 'light' | 'dark' ], ]; ``` ### Environment variables [](#environment-variables) ``` FLEXWAVE_UPLOAD_DISK=public FLEXWAVE_UPLOAD_PATH=wysiwyg/uploads FLEXWAVE_MAX_SIZE=5120 FLEXWAVE_RESIZE_ENABLED=true FLEXWAVE_RESIZE_MAX_WIDTH=1920 FLEXWAVE_RESIZE_MAX_HEIGHT=1080 FLEXWAVE_RESIZE_QUALITY=85 ``` --- Events ------ [](#events) Listen to upload events in `EventServiceProvider` or using `#[AsEventListener]`: ``` use FlexWave\Wysiwyg\Events\ImageUploaded; use FlexWave\Wysiwyg\Events\ImageDeleted; // EventServiceProvider.php protected $listen = [ ImageUploaded::class => [ \App\Listeners\LogImageUpload::class, ], ]; ``` `ImageUploaded` properties: PropertyTypeDescription`$path``string`Storage path of the uploaded file`$url``string`Public URL of the uploaded file`$disk``string`Laravel disk used`$user``?User`Authenticated user (or `null`)--- JavaScript API -------------- [](#javascript-api) ``` // Get instance by editor ID or wrapper element const editor = FlexWave.getInstance('fw-editor-abc123'); // Get the current HTML content const html = editor.getHTML(); // Set content programmatically editor.setHTML('Hello world!'); // Clear the editor editor.clear(); // Focus the editor editor.focus(); // Set dark mode at runtime editor.setDarkMode('dark'); // 'auto' | 'light' | 'dark' ``` ### JavaScript Events [](#javascript-events) Listen for editor events on the wrapper element: ``` const wrapper = document.querySelector('[data-fw-editor]'); wrapper.addEventListener('fw:init', e => console.log('Editor ready', e.detail)); wrapper.addEventListener('fw:change', e => console.log('HTML changed', e.detail.html)); wrapper.addEventListener('fw:uploadStart', e => console.log('Uploading', e.detail.file)); wrapper.addEventListener('fw:uploadSuccess', e => console.log('Uploaded', e.detail.url)); wrapper.addEventListener('fw:uploadError', e => console.warn('Upload failed', e.detail)); wrapper.addEventListener('fw:linkInserted', e => console.log('Link added', e.detail.href)); wrapper.addEventListener('fw:fullscreen', e => console.log('Fullscreen:', e.detail.active)); wrapper.addEventListener('fw:pluginLoaded', e => console.log('Plugin loaded', e.detail.src)); ``` --- Custom Plugins -------------- [](#custom-plugins) Create a JS file and register it in the config: ``` // config/flexwave-wysiwyg.php 'plugins' => [ '/js/my-wysiwyg-plugin.js', ], ``` In your plugin file: ``` // /public/js/my-wysiwyg-plugin.js document.querySelectorAll('[data-fw-editor]').forEach(wrapper => { wrapper.addEventListener('fw:init', ({ detail }) => { const editor = FlexWave.getInstance(detail.editorId); // extend the editor here }); }); ``` --- Security -------- [](#security) - All upload routes use the configured `middleware` (default: `['web', 'auth']`), ensuring only authenticated users can upload. - File type is validated by MIME type, not just extension. - Delete requests are restricted to the configured upload path prefix. - The `Wysiwyg::sanitize()` helper strips disallowed HTML tags and blocks `javascript:` in `href`/`src` attributes. --- License ------- [](#license) MIT — © 2026 FlexWave ### Health Score 37 — LowBetter than 81% of packages Maintenance85 Actively maintained with recent releases Popularity1 Limited adoption so far Community7 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~13 days Total 3 Last Release 76d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/150884207?v=4)[flexwave](/maintainers/flexwave)[@Flexwave](https://github.com/Flexwave) --- Top Contributors [![jorian2005](https://avatars.githubusercontent.com/u/104429457?v=4)](https://github.com/jorian2005 "jorian2005 (1 commits)") --- Tags laraveleditorwysiwygrich textflexwave ### Code Quality TestsPHPUnit Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/flexwave-wysiwyg/health.svg) ``` [![Health](https://phpackages.com/badges/flexwave-wysiwyg/health.svg)](https://phpackages.com/packages/flexwave-wysiwyg) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3345.1M337](/packages/psalm-plugin-laravel)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9742.3M121](/packages/roots-acorn)[laravel/mcp Rapidly build MCP servers for your Laravel applications. 76518.2M120](/packages/laravel-mcp)[moonshine/moonshine Laravel administration panel 1.3k239.9k75](/packages/moonshine-moonshine)[intervention/image-laravel Laravel Integration of Intervention Image 1558.1M159](/packages/intervention-image-laravel)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 45344.0k1](/packages/pressbooks-pressbooks) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)