Flutter HTML Editor

Flutter HTML Editor is a simple HTML-based Richtext editor, which is able to edit and parse a selected set of HTML tags into a Flutter widget.

Check out the some usage examples to see how the package can be used.

Features

  • Code Editor where HTML text can be written with an optional preview output
  • Richtext-Renderer which takes in HTML produced by the editor and converts it into a widget
  • Customization options for Editor and Renderer
  • Use Variables in the text
  • Written purely in Dart

Usage

  1. Import the package import 'package:light_html_editor/light_html_editor.dart';
  2. Create an environment with a finite width, as the widgets will take up all available horizontal space
  3. Instantiate RichTextEditor or RichTextRenderer
  4. Set desired parameters like the onChanged callbacks for retrieving the richtext

Examples

Simple usage without fancy settings

SizedBox(
    width: 400,
    child: RichTextEditor(
        onChanged: (String html) {
            // called every time the code in the input text is changed
            // do something with the richtext
        },
    ),
),

Example Output of Flutter HTML Editor

Variables

SizedBox(
    width: 400,
    child: RichTextEditor(
    placeholders: [
        RichTextPlaceholder(
        "VAR",
        "Some longer text that got shortened!",
        ),
    ],
    onChanged: (String html) {
        // do something with the richtext
      },
    ),
),

Example Output with variables

Libraries

button_row
color_button
color_utils
custom_button
editor
editor_properties
html_editor_controller
icon_button
light_html_editor
parser
placeholder
regex_provider
renderer
renderer_decoration
renderer_text_properties
richtext_node
selectable_textfield
text_button
text_constants
text_renderer