quill_web_editor library

Quill Web Editor - A rich text editor package for Flutter Web.

This package provides a Quill.js-based rich text editor with full Flutter integration, including:

  • Rich text editing with formatting toolbar
  • Table support with quill-table-better
  • Custom fonts and sizes
  • Image, video, and media embedding
  • HTML import/export
  • Preview functionality
  • Zoom controls

Getting Started (Using Controller - Recommended)

import 'package:quill_web_editor/quill_web_editor.dart';

class MyEditor extends StatefulWidget {
  @override
  State<MyEditor> createState() => _MyEditorState();
}

class _MyEditorState extends State<MyEditor> {
  final _controller = QuillEditorController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _insertText() {
    _controller.insertText('Hello World!');
  }

  @override
  Widget build(BuildContext context) {
    return QuillEditorWidget(
      controller: _controller,
      onContentChanged: (html, delta) {
        print('Content: $html');
      },
      initialHtml: '<p>Hello World!</p>',
    );
  }
}

Features

Core Components

UI Components

Services

Utilities

Constants

Theme

Classes

AppCard
A styled card widget consistent with the app's design system.
AppColors
Color palette for the Quill Web Editor package.
AppFonts
Font configurations for the Quill Web Editor package.
AppTheme
Theme configuration for the Quill Web Editor package.
DocumentService
Service for document operations like saving and exporting.
EditorConfig
Editor configuration constants for the Quill Web Editor package.
ExportStyles
CSS styles for HTML export.
FontConfig
Configuration for a font option
HtmlCleaner
Utility class for cleaning and processing HTML content from the editor.
HtmlPreviewDialog
A dialog that displays an HTML preview of the editor content.
InsertHtmlDialog
A dialog for inserting HTML content into the editor.
InsertHtmlResult
Result from the insert HTML dialog.
LineHeightConfig
Configuration for a line height option
OutputPreview
A widget that displays the editor output in different formats.
QuillEditorAction
Represents a user-defined custom action.
QuillEditorController
Controller for QuillEditorWidget.
QuillEditorWidget
A Quill.js rich text editor widget for Flutter Web.
QuillEditorWidgetState
State for QuillEditorWidget.
SaveStatusIndicator
A widget that displays the current save status of a document.
SizeConfig
Configuration for a size option
StatCard
A card that displays a single statistic with a label.
StatCardRow
A row of stat cards for displaying multiple statistics.
TextStatistics
Statistics about text content.
TextStats
Utility class for calculating text statistics.
ZoomControls
A widget that displays zoom controls with current zoom level.

Enums

OutputType
Type of output to display in the preview.
SaveStatus
Status of the document save state.

Typedefs

CustomActionCallback = void Function(Map<String, dynamic>? response)
Callback signature for custom action handlers.
SendCommandCallback = void Function(Map<String, dynamic> data)
Callback signature for sending commands to the Quill editor.