rich_editor

WYSIWYG editor for Flutter with a rich set of supported formatting options.

Based on https://github.com/dankito/RichTextEditor, but for Flutter.

 Features

•  Bold, Italic, Underline, Strike through, Subscript, Superscript
•  Heading 1 – 6, Text body, Preformatted, Block quote
•  Font (reads all system fonts) (Android only)
•  Font Size
•  Text Color
•  Text Background Color
•  Highlight text
•  Justify Left, Center, Right, Blockquote
•  Indent, Outdent
•  Undo, Redo
•  Unordered List (Bullets)
•  Ordered List (Numbers)
•  Insert local or remote Image
•  Insert Link
•  Insert Checkbox
•  Search
•  Icon indicators

 Screenshots

Usage

      // Insert widget into tree
      RichEditor(
        key: keyEditor,
        value: 'initial html here',
        editorOptions: RichEditorOptions(
          placeholder: 'Start typing',
          // backgroundColor: Colors.blueGrey, // Editor's bg color
          // baseTextColor: Colors.white,
          // editor padding
          padding: EdgeInsets.symmetric(horizontal: 5.0),
          // font name
          baseFontFamily: 'sans-serif',
          // Position of the editing bar (BarPosition.TOP or BarPosition.BOTTOM)
          barPosition: BarPosition.TOP,
        ),
        // You can return a Link (maybe you need to upload the image to your
        // storage before displaying in the editor or you can also use base64
        getImageUrl: (image) {
          String link = 'https://avatars.githubusercontent.com/u/24323581?v=4';
          String base64 = base64Encode(image.readAsBytesSync());
          String base64String = 'data:image/png;base64, $base64';
          return base64String;
        },
      )

Get current HTML from editor

String? html = await keyEditor.currentState?.getHtml();
print(html);

Set Focus and Unfocus

await keyEditor.currentState?.focus();
await keyEditor.currentState?.unFocus();

Clear Editor content

await keyEditor.currentState?.clear();

Custom Toolbar

If you’re interested in creating your own toolbar check the custom_toolbar_demo.dart in the example

Download Rich editor app source code on GitHub

Flutterappworld

Provides the list of the opensource Flutter apps collection with GitHub repository.