Flutter HTML Editor

A rich text HTML editor for Flutter with basic formatting capabilities including bold, italic, underline, text alignment, links, and color selection.

Features

• ✅ Bold, Italic, Underline formatting
• ✅ Text alignment (left, center, right)
• ✅ Link insertion
• ✅ Text color selection
• ✅ Font size selection
• ✅ Customizable toolbar
• ✅ HTML content export/import
• ✅ Responsive design
• ✅ Event callbacks (onChange, onFocus, onBlur)

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  fl_html_editor: ^0.0.1

Usage

Basic Usage

import 'package:fl_html_editor/fl_html_editor.dart';

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

class _MyEditorState extends State<MyEditor> {
  final HtmlEditorController controller = HtmlEditorController();

  @override
  Widget build(BuildContext context) {
    return HtmlEditor(
      controller: controller,
      height: 300,
      onChanged: (content) {
        print('Content changed: $content');
      },
    );
  }
}

Advanced Usage

HtmlEditor(
  controller: controller,
  height: 400,
  settings: EditorSettings(
    placeholder: 'Start typing...',
    initialContent: '<p>Initial content</p>',
    autoFocus: true,
  ),
  toolbarSettings: ToolbarSettings(
    showBold: true,
    showItalic: true,
    showUnderline: true,
    showAlignment: true,
    showLink: true,
    showTextColor: true,
    showFontSize: true,
  ),
  onChanged: (content) {
    // Handle content changes
  },
  onFocus: () {
    // Handle focus event
  },
  onBlur: () {
    // Handle blur event
  },
);

Controller Methods

// Formatting
await controller.setBold();
await controller.setItalic();
await controller.setUnderline();

// Alignment
await controller.alignLeft();
await controller.alignCenter();
await controller.alignRight();

// Content
await controller.setHtml('<p>New content</p>');
String content = await controller.getHtml();
await controller.clear();

// Links, colors and font size
await controller.insertLink('https://example.com');
await controller.changeTextColor(Colors.red);
await controller.setFontSize('4'); // Size 4 = Large

API Reference

HtmlEditor

EditorSettings

ToolbarSettings

License

This project is licensed under the MIT License.