A rich text editor for Flutter

📚 Table of contents

📦 Installation

flutter pub add flutter_quill

dependencies:flutter_quill:git:url:https://github.com/singerdmx/flutter-quill.gitref:v<latest-version-here>

Tip

If you're using version10.0.0, seethe migration guide to migrate to11.0.0.

🛠 Platform Setup

Android Configuration forquill_native_bridge

Tip

This is only required onAndroid for this optional feature.You should be able to copy images and paste them inside the editor without any additional configuration.

<manifest>    <application>        ...        <providerandroid:name="androidx.core.content.FileProvider"android:authorities="${applicationId}.fileprovider"android:exported="false"android:grantUriPermissions="true" >            <meta-dataandroid:name="android.support.FILE_PROVIDER_PATHS"android:resource="@xml/file_paths" />        </provider>        ...    </application></manifest>

<paths>    <cache-pathname="cache"path="." /></paths>

Note

Starting with Flutter Quill10.8.4,super_clipboard is no longer required influtter_quill orflutter_quill_extensions.The new default is an internal pluginquill_native_bridge.If you want to continue usingsuper_clipboard, you can use thequill_super_clipboard package (support may be discontinued).

🚀 Usage

import'package:flutter_quill/flutter_quill.dart';import'package:flutter_localizations/flutter_localizations.dart';MaterialApp(  localizationsDelegates:const [GlobalMaterialLocalizations.delegate,GlobalCupertinoLocalizations.delegate,GlobalWidgetsLocalizations.delegate,FlutterQuillLocalizations.delegate,  ]，);

QuillController _controller=QuillController.basic();

QuillSimpleToolbar(  controller: _controller,  config:constQuillSimpleToolbarConfig(),),Expanded(  child:QuillEditor.basic(    controller: _controller,    config:constQuillEditorConfig(),  ),)

@overridevoiddispose() {  _controller.dispose();super.dispose();}

🔤 Input / Output

finalString json=jsonEncode(_controller.document.toDelta().toJson());// Stores the JSON Quill Delta

finalString json= ...;// Load the previously stored JSON Quill Delta_controller.document=Document.fromJson(jsonDecode(json));

_controller.readOnly=true;// Or false to allow edit

🔗 Links

⚙️ Configurations

🔗 Links

🖋 Font Family

📦 Embed Blocks

🛠️ Using the embed blocks fromflutter_quill_extensions

🔄 Delta Conversion

Caution

Storing theDelta asHTML in the database to convert it back toDelta whenloading the document is not recommended due to the structural and functional differences between HTML and Delta (see this comment).We recommend storing theDocument asDelta JSONinstead of other formats (e.g., HTML, Markdown, PDF, Microsoft Word, Google Docs, Apple Pages, XML).

ConvertingDelta from/toHTML is not a standard feature inQuill JSorFlutter Quill.

Tip

You might want to convert betweenHTML andDelta for some use cases:

1. Migration: If you're using an existing system that stores the data in HTML and want to convert the documentdata toDelta.
2. Sharing: For example, if you want to share the DocumentDelta somewhere or send it as an email.
3. Save as: If your app has a feature that allows converting Documents to other formats.
4. Rich text pasting: If you copy some content from websites or apps, and want to paste it into the app.
5. SEO: In case you want to use HTML for SEO support.

📝 Rich Text Paste

Important

Currently this feature is unsupported on the web.Seeissue #1998 andissue #2220for more details.

🌐 Translation

🧪 Testing

🤝 Contributing

Important

At this time, we prioritize bug fixes and code quality improvements over new features.Please refrain from submitting large changes to add new features, as they mightnot be merged, and exceptions may made.We encourage you to create an issue or reach out beforehand,explaining your proposed changes and their rationale for a higher chance of acceptance. Thank you!

📜 Acknowledgments