smart_rich_editor 1.0.2 copy "smart_rich_editor: ^1.0.2" to clipboard
smart_rich_editor: ^1.0.2 copied to clipboard

Published 5 days ago
SDKFlutter
PlatformAndroidiOSLinuxmacOSwebWindows
β†’

Metadata

A lightweight, collapsible, and feature-rich text editor built on flutter_quill. Supports web clipboard, collapsible toolbar, custom editor size, cross-platform compatibility, and rich text formatti [...]

More...

Smart Rich Editor πŸ“ #

pub package License: MIT

A lightweight, highly customizable, and production-ready rich text editor for Flutter, built on top of flutter_quill. Designed with web compatibility and mobile-first principles, Smart Rich Editor provides a seamless editing experience across all platforms.

✨ Features #

  • 🎨 Collapsible Toolbar - Toggle between basic and full editing modes
  • πŸ“‹ Rich Text Copy/Paste - Preserve formatting when copying/pasting via toolbar buttons or keyboard shortcuts (Ctrl+C/Ctrl+V)
  • 🌐 Web Optimized - Full clipboard API support for web platforms
  • πŸ–ΌοΈ Image Support - Built-in image embedding capabilities
  • βš™οΈ Highly Customizable - Configure height, toolbar position, and appearance
  • πŸ“± Cross-Platform - Works seamlessly on iOS, Android, Web, macOS, Windows, and Linux
  • 🎯 Zero Configuration - Works out of the box with sensible defaults
  • πŸš€ Lightweight - Minimal dependencies and small bundle size

πŸ“Έ Screenshots #

Mobile Web Tablet
Mobile Web Tablet

πŸš€ Getting Started #

Installation #

Add smart_rich_editor to your pubspec.yaml:

dependencies:
  smart_rich_editor: ^1.0.1

Then run:

flutter pub get

Basic Usage #

Import the package:

import 'package:smart_rich_editor/smart_rich_editor.dart';

Use the editor in your widget:

import 'package:flutter/material.dart';
import 'package:smart_rich_editor/smart_rich_editor.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smart Rich Editor Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const EditorDemoPage(),
    );
  }
}

class EditorDemoPage extends StatelessWidget {
  const EditorDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Smart Rich Editor Demo'),
        elevation: 2,
      ),
      body: Center(
        child: ElevatedButton.icon(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => const RichTextEditorPage(
                  collapsibleToolbar: true,
                  editorHeight: 500,
                  toolbarAtBottom: true,
                ),
              ),
            );
          },
          icon: const Icon(Icons.edit),
          label: const Text('Open Rich Editor'),
        ),
      ),
    );
  }
}

πŸ“– Advanced Usage #

Custom Configuration #

RichTextEditorPage(
  // Toolbar Configuration
  collapsibleToolbar: true,        // Enable collapsible toolbar
  toolbarAtBottom: false,          // Position toolbar at top
  
  // Editor Configuration
  editorHeight: 400,               // Set custom height
  placeholder: 'Start typing...',   // Custom placeholder text
  
  // Styling
  backgroundColor: Colors.white,
  toolbarColor: Colors.grey[200],
)

Retrieving Editor Content #

class MyEditorPage extends StatefulWidget {
  const MyEditorPage({super.key});

  @override
  State<MyEditorPage> createState() => _MyEditorPageState();
}

class _MyEditorPageState extends State<MyEditorPage> {
  final QuillController _controller = QuillController.basic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Editor'),
        actions: [
          IconButton(
            icon: const Icon(Icons.save),
            onPressed: _saveContent,
          ),
        ],
      ),
      body: RichTextEditorPage(
        controller: _controller,
        collapsibleToolbar: true,
      ),
    );
  }

  void _saveContent() {
    final document = _controller.document.toDelta();
    final plainText = _controller.document.toPlainText();
    
    // Save document or plainText to your database
    print('Saved: $plainText');
  }

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

Web-Specific Configuration #

For web platform, ensure you have the following in your index.html:

<head>
  <!-- Enable clipboard API -->
  <meta name="clipboard-read" content="self">
  <meta name="clipboard-write" content="self">
</head>

🎯 API Reference #

RichTextEditorPage Parameters #

Parameter Type Default Description
collapsibleToolbar bool false Enable toolbar collapse functionality
editorHeight double 300 Height of the editor area
toolbarAtBottom bool false Position toolbar at bottom
controller QuillController? null Custom controller for advanced usage
placeholder String? null Placeholder text when editor is empty
readOnly bool false Make editor read-only
autoFocus bool false Auto-focus editor on load
backgroundColor Color? null Background color of the editor
toolbarColor Color? null Background color of the toolbar

πŸ”§ Platform Support #

Platform Support
Android βœ…
iOS βœ…
Web βœ…
macOS βœ…
Windows βœ…
Linux βœ…

πŸ“¦ Dependencies #

This package depends on:

πŸ› Troubleshooting #

Web Clipboard Issues #

If copy/paste doesn't work on web, ensure:

  1. You're using HTTPS (required for Clipboard API)
  2. Required permissions are set in index.html
  3. Browser supports Clipboard API (Chrome 63+, Firefox 53+, Safari 13.1+)

Build Issues #

If you encounter build errors, try:

flutter clean
flutter pub get
flutter pub upgrade

Common Issues #

Issue: Toolbar not showing
Solution: Make sure collapsibleToolbar is set to true or check if toolbar height is properly configured.

Issue: Images not displaying
Solution: Ensure you have flutter_quill_extensions properly configured and image embed builder is set up.

🀝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Please make sure to update tests as appropriate and follow the existing code style.

πŸ“„ License #

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ§‘β€πŸ’» Author #

Rahul Sharma

πŸ’– Support #

If you find this package helpful, please:

πŸ“š Additional Resources #

πŸ—ΊοΈ Roadmap #

  • ❌ Add markdown import/export
  • ❌ Support for custom toolbar buttons
  • ❌ Theme customization options
  • ❌ Collaborative editing support
  • ❌ Offline mode with auto-save
  • ❌ Enhanced mobile keyboard handling
  • ❌ Table support
  • ❌ Code syntax highlighting
  • ❌ Image embedding low support

πŸ“ˆ Version History #

See CHANGELOG.md for a complete version history.

πŸ™ Acknowledgments #

  • Built on top of the excellent flutter_quill package
  • Thanks to all contributors and users of this package
  • Inspired by modern web-based rich text editors

Made with ❀️ by Rahul Sharma

← Metadata

0
likes
130
points
234
downloads

Publisher

unverified uploader

Weekly Downloads

Metadata

A lightweight, collapsible, and feature-rich text editor built on flutter_quill. Supports web clipboard, collapsible toolbar, custom editor size, cross-platform compatibility, and rich text formatting with zero configuration.

Repository (GitHub)
View/report issues

Topics

#editor #rich-text #quill #ui #text-editor

Documentation

Documentation
API reference

License

MIT (license)

Dependencies

flutter, flutter_quill

More

Packages that depend on smart_rich_editor

Back