Link to original Post used

Overview

A rich-text HTML editor custom widget for FlutterFlow, built on the html_editor_enhanced package, offering live editing, full‑width layout, toolbar toggling, and word/character counts.

Dependencies

• html_editor_enhanced: ^2.6.0
• font_awesome_flutter: for toolbar icons

Parameters

• “editorKeyValue” (String, required): Unique key from editorKeys map for each instance; enables multiple independent editors via Flutter’s GlobalKey.
• width / height (double?): Container dimensions; default to full-width when omitted. (these are auto added the custom widgets)
• “notes” (String?): Initial HTML content; if provided, populates the editor on load.

GlobalKey Explanation

A GlobalKeys<T> is unique across the entire widget tree and gives direct access to its associated State and BuildContexct. Using a map of GlobalKey<HtmlEditorEnhancedState>, you can instantiate and control multiple editor instances in the same FlutterFlow project without state conflicts.

Setup Instructions

1. Declare GlobalKeys

   Create a Custom Action “declaringGlobalKeys” adding:

   
   final GlobalKey<HtmlEditorEnhancedState> editorKeyA = GlobalKey<HtmlEditorEnhancedState>();
   final GlobalKey<HtmlEditorEnhancedState> editorKeyB = GlobalKey<HtmlEditorEnhancedState>();
   final Map<String, GlobalKey<HtmlEditorEnhancedState>> editorKeys = {
     'editorA': editorKeyA,
     'editorB': editorKeyB,
   };
   Future declaringGlobalKeys() async {}
   
   

   This map ensures each editor instance is uniquely identified and its state accessible.

2. Attach to main.dart

   In FlutterFlow’s Custom Code → main.dart → Final Actions, add declaringGlobalKeys. This initializes keys before app start.

3. Add the Widget

   • In your page layout, drag HtmlEditorEnhanced.
   • Set editorKeyValue to editorA (or editorB for a second instance).
   • Optionally set notes, width, and height.