包简介

Laravel package for Quill WYSIWYG editor with full support for Quill 2.x

README 文档

README

A Laravel package for seamless integration with Quill 2.x WYSIWYG editor.

Features

Full support for Quill 2.x
Blade components for easy integration
Image upload handling with storage support
Delta format conversion utilities
Content sanitization
Validation rules
Configurable toolbar presets
Dark mode support
CDN or local assets

Requirements

PHP 8.2+
Laravel 10.x, 11.x, or 12.x

Installation

Install the package via Composer:

composer require mortogo321/laravel-quill

Publish the assets and configuration:

# Publish everything
php artisan vendor:publish --tag=quill

# Or publish individually
php artisan vendor:publish --tag=quill-config
php artisan vendor:publish --tag=quill-assets
php artisan vendor:publish --tag=quill-views

Quick Start

1. Include Assets

Add the styles and scripts to your layout:

<!DOCTYPE html>
<html>
<head>
    <!-- Include Quill styles -->
    @quillStyles
</head>
<body>
    <!-- Your content -->

    <!-- Include Quill scripts (before closing body tag) -->
    @quillScripts
</body>
</html>

2. Use the Editor Component

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

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

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

3. Display Content

<x-quill-viewer :content="$post->content" />

Configuration

The configuration file is located at config/quill.php. Key options include:

Theme

'theme' => 'snow', // or 'bubble'

CDN Settings

'cdn' => [
    'enabled' => true,
    'version' => '2.0.2',
],

Toolbar Presets

Three built-in presets: minimal, basic, full

<x-quill-editor name="content" toolbar="minimal" />
<x-quill-editor name="content" toolbar="basic" />
<x-quill-editor name="content" toolbar="full" />

Custom Toolbar

<x-quill-editor
    name="content"
    :toolbar="['bold', 'italic', 'link']"
/>

Image Uploads

Configure upload settings in config/quill.php:

'uploads' => [
    'enabled' => true,
    'disk' => 'public',
    'path' => 'quill-uploads',
    'max_size' => 2048, // KB
    'allowed_types' => ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
],

Editor Component

Available Props

Prop	Type	Default	Description
`name`	string	required	Form input name
`id`	string	auto	Editor element ID
`value`	string	null	Initial content (Delta JSON or HTML)
`placeholder`	string	config	Placeholder text
`theme`	string	'snow'	Quill theme ('snow' or 'bubble')
`toolbar`	string/array	config	Toolbar preset or custom config
`read-only`	bool	false	Read-only mode
`height`	string	'300px'	Editor height
`required`	bool	false	HTML5 required attribute
`upload-url`	string	auto	Custom upload endpoint
`formats`	array	[]	Allowed formats
`modules`	array	[]	Additional Quill modules
`debug`	bool	false	Enable debug mode

Examples

Basic Editor:

<x-quill-editor name="content" />

With Initial Content:

<x-quill-editor name="content" :value="$post->content" />

Read-Only:

<x-quill-editor name="content" :value="$content" read-only />

Custom Height:

<x-quill-editor name="content" height="500px" />

Bubble Theme:

<x-quill-editor name="content" theme="bubble" />

Viewer Component

Available Props

Prop	Type	Default	Description
`content`	string	null	Content (Delta JSON or HTML)
`delta`	array	null	Delta object directly
`sanitize`	bool	true	Sanitize HTML output
`class`	string	null	Additional CSS classes

Examples

Display Delta Content:

<x-quill-viewer :content="$post->content" />

Display with Custom Class:

<x-quill-viewer :content="$post->content" class="prose lg:prose-xl" />

Without Sanitization:

<x-quill-viewer :content="$post->content" :sanitize="false" />

Validation Rules

QuillContent

Validate Quill content with length constraints:

use Mortogo321\LaravelQuill\Rules\QuillContent;

$request->validate([
    'content' => ['required', new QuillContent(minLength: 10, maxLength: 5000)],
]);

// Using static methods
$request->validate([
    'content' => [QuillContent::required()],
    'summary' => [QuillContent::max(500)],
    'bio' => [QuillContent::between(50, 1000)],
]);

QuillDelta

Validate Delta structure and allowed formats:

use Mortogo321\LaravelQuill\Rules\QuillDelta;

$request->validate([
    'content' => [new QuillDelta()],
]);

// Restrict formats
$request->validate([
    'content' => [QuillDelta::onlyFormats(['bold', 'italic', 'link'])],
]);

// Disallow media
$request->validate([
    'content' => [QuillDelta::withoutImages()],
    'comment' => [QuillDelta::plainTextOnly()],
]);

Facade Methods

The Quill facade provides utility methods:

use Mortogo321\LaravelQuill\Facades\Quill;

// Convert Delta to HTML
$html = Quill::deltaToHtml($deltaJson);

// Convert HTML to Delta
$delta = Quill::htmlToDelta($html);

// Sanitize HTML
$clean = Quill::sanitize($html);

// Get configuration
$config = Quill::getConfig('theme');

JavaScript API

The LaravelQuill object is available globally:

// Initialize all editors
LaravelQuill.init();

// Get an editor instance
const quill = LaravelQuill.getEditor('quill-content');

// Get content
const delta = LaravelQuill.getContents('quill-content');
const html = LaravelQuill.getHTML('quill-content');

// Set content
LaravelQuill.setContents('quill-content', delta);
LaravelQuill.setContents('quill-content', '<p>HTML content</p>');

// Enable/disable
LaravelQuill.setEnabled('quill-content', false);

// Focus/blur
LaravelQuill.focus('quill-content');
LaravelQuill.blur('quill-content');

Events

document.getElementById('quill-content').addEventListener('quill-init', (e) => {
    console.log('Editor initialized', e.detail.quill);
});

document.getElementById('quill-content').addEventListener('quill-change', (e) => {
    console.log('Content changed', e.detail.delta, e.detail.html);
});

Customization

Custom Upload Handler

Override the upload endpoint:

<x-quill-editor
    name="content"
    upload-url="{{ route('custom.upload') }}"
/>

Custom Styling

Publish the CSS and modify public/vendor/quill/css/laravel-quill.css, or use CSS variables:

.quill-editor-wrapper {
    --quill-editor-height: 400px;
    --quill-border-color: #e2e8f0;
    --quill-border-radius: 8px;
    --quill-focus-color: #3b82f6;
    --quill-toolbar-bg: #f8fafc;
}

Environment Variables

QUILL_THEME=snow
QUILL_CDN_ENABLED=true
QUILL_VERSION=2.0.2
QUILL_UPLOAD_DISK=public
QUILL_UPLOAD_PATH=quill-uploads
QUILL_MAX_UPLOAD_SIZE=2048

Security

The package includes built-in content sanitization. Configure allowed tags and attributes in config/quill.php:

'sanitize' => [
    'enabled' => true,
    'allowed_tags' => ['p', 'br', 'strong', 'em', ...],
    'allowed_attributes' => [
        'a' => ['href', 'target', 'rel'],
        'img' => ['src', 'alt', 'width', 'height', 'class'],
        // ...
    ],
],

License

MIT License. See LICENSE for more information.

Credits

Mor
Quill

mortogo321/laravel-quill 适用场景与选型建议

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

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

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

围绕 mortogo321/laravel-quill 我们能提供哪些服务？

定制开发 / 二次开发

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

BUG 修复 & 性能优化

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

项目外包 & 长期维护

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

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

与 mortogo321/laravel-quill 相关的其它包

同方向 / 同关键字的高下载量 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

mortogo321/laravel-quill

包简介

关键字：

README 文档

README

Features

Requirements

Installation

Quick Start

1. Include Assets

2. Use the Editor Component

3. Display Content

Configuration

Theme

CDN Settings

Toolbar Presets

Custom Toolbar

Image Uploads

Editor Component

Available Props

Examples

Viewer Component

Available Props

Examples

Validation Rules

QuillContent

QuillDelta

Facade Methods

JavaScript API

Events

Customization

Custom Upload Handler

Custom Styling

Environment Variables

Security

License

Credits

mortogo321/laravel-quill 适用场景与选型建议

与 mortogo321/laravel-quill 相关的其它包

统计信息

GitHub 信息

其他信息