fl_html_editor 0.0.3

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

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

Parameter	Type	Description
controller	HtmlEditorController	Required. Controller for the editor
height	double	Height of the editor (default: 300)
settings	EditorSettings?	Editor configuration
toolbarSettings	ToolbarSettings?	Toolbar configuration
onChanged	Function(String)?	Callback when content changes
onFocus	Function()?	Callback when editor gains focus
onBlur	Function()?	Callback when editor loses focus

EditorSettings

Parameter	Type	Description
initialContent	String?	Initial HTML content
placeholder	String?	Placeholder text
autoFocus	bool	Auto focus on load (default: false)
maxLength	int?	Maximum content length

ToolbarSettings

Parameter	Type	Description
showToolbar	bool	Show/hide toolbar (default: true)
showBold	bool	Show bold button (default: true)
showItalic	bool	Show italic button (default: true)
showUnderline	bool	Show underline button (default: true)
showAlignment	bool	Show alignment buttons (default: true)
showLink	bool	Show link button (default: true)
showTextColor	bool	Show text color button (default: true)
showFontSize	bool	Show font size button (default: true)

License

This project is licensed under the MIT License.