包简介

A modern, feature-rich WYSIWYG editor package for Laravel 10+

README 文档

README

A modern, feature-rich WYSIWYG rich-text editor package for Laravel 10+ and PHP 8.2+.

Features

Blade component <x-flexwave-editor /> — 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

Requirement	Version
PHP	^8.2
Laravel	^10.0 or ^11.0
Intervention Image	^3.0

Installation

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

# 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)

php artisan storage:link

4. Include assets in your layout

Add to your main Blade layout (e.g. resources/views/layouts/app.blade.php):

<head>
    @wysiwygStyles
</head>
<body>
    {{-- page content --}}
    @wysiwygScripts
</body>

Or use standard HTML tags after publishing assets:

<link rel="stylesheet" href="{{ asset('vendor/flexwave-wysiwyg/css/editor.css') }}">
<script src="{{ asset('vendor/flexwave-wysiwyg/js/editor.js') }}" defer></script>

Usage

Basic usage inside a Blade form

<form method="POST" action="/posts">
    @csrf

    <x-flexwave-editor
        name="content"
        :value="old('content', $post->content ?? '')"
        placeholder="Write your post content here..."
    />

    <button type="submit">Save</button>
</form>

Component attributes

Attribute	Type	Default	Description
`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

The component automatically reads and displays Laravel validation errors:

// In your controller:
$request->validate([
    'content' => 'required|string|min:10',
]);

{{-- In your view: --}}
<x-flexwave-editor name="content" :value="old('content')" />
@error('content')
    <p>{{ $message }}</p>
@enderror

(The component renders the error message automatically — no need for a separate @error block.)

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

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

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

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:

Property	Type	Description
`$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

// 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('<p>Hello <strong>world</strong>!</p>');

// Clear the editor
editor.clear();

// Focus the editor
editor.focus();

// Set dark mode at runtime
editor.setDarkMode('dark'); // 'auto' | 'light' | 'dark'

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

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

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

flexwave/wysiwyg 适用场景与选型建议

flexwave/wysiwyg 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 0 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 04 月 09 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「wysiwyg」「editor」「laravel」「rich-text」「flexwave」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 flexwave/wysiwyg 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 flexwave/wysiwyg 我们能提供哪些服务？

定制开发 / 二次开发

基于 flexwave/wysiwyg 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 flexwave/wysiwyg 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

litalino/flarum-more-bbcode 2

Adds more BBCode

wdmg/yii2-editor 2

WYSIWYG editor for Yii2 based on Bootstrap 3

moxuandi/yii2-ueditor 4

UEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

wdmg/bootstrap-wysiwyg-editor 16

Simple WYSIWYG editor plugin for Bootstrap 3

xiangyang.li/laravel-admin-summernote 0

Summernote extension for laravel-admin

jakercz/wysiwyg-editor-php-sdk 0

PHP SDK for Froala WYSIWYG Editor

flexwave/wysiwyg

包简介

关键字：

README 文档

README

Features

Requirements

Installation

1. Install via Composer

2. Publish assets

3. Create the storage symlink (if using the `public` disk)

4. Include assets in your layout

Usage

Basic usage inside a Blade form

Component attributes

Validation errors

Server-side Helpers

Configuration

Environment variables

Events

JavaScript API

JavaScript Events

Custom Plugins

Security

License

flexwave/wysiwyg 适用场景与选型建议

与 flexwave/wysiwyg 相关的其它包

统计信息

GitHub 信息

其他信息

flexwave/wysiwyg

包简介

关键字：

README 文档

README

Features

Requirements

Installation

1. Install via Composer

2. Publish assets

3. Create the storage symlink (if using the public disk)

4. Include assets in your layout

Usage

Basic usage inside a Blade form

Component attributes

Validation errors

Server-side Helpers

Configuration

Environment variables

Events

JavaScript API

JavaScript Events

Custom Plugins

Security

License

flexwave/wysiwyg 适用场景与选型建议

与 flexwave/wysiwyg 相关的其它包

统计信息

GitHub 信息

其他信息

3. Create the storage symlink (if using the `public` disk)