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

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

• [x] bold, italic, underline, strike through, subscript, superscript
• [x] heading 1 – 6, text body, preformatted, block quote
• [x] font (reads all system fonts) (android only)
• [x] font size
• [x] text color
• [x] text background color
• [x] highlight text
• [x] justify left, center, right, blockquote
• [x] indent, outdent
• [x] undo, redo
• [x] unordered list (bullets)
• [x] ordered list (numbers)
• [x] insert local or remote image
• [x] insert link
• [x] 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