General

Minimal HTML WYSIWYG editor with only context menu formatting options (for now).

This is mainly an alternative to other HTML-based WYSIWYG editors that:

  • use Summernote under the hood and are very bloated
  • do not work well with screen reader
  • do not offer fine-grained UI customization
  • lack common text field callbacks and methods

Features

Supports fine-grained UI customization:

  • fixed height or flexible height
  • customized placeholder, intial text
  • background color
  • padding
  • Android hybrid composition
  • Webview title (for screen reader)
  • auto-adjust scrolling for editor's height change
  • text scaling

Common text field callbacks:

  • on focus
  • on blur
  • on change

Controller methods

  • set html
  • get html
  • focus
  • unfocus

Lightweight

Only backbone html, css and js underneath - no libary, no jQuery.

Exposed controller

EditorController.webViewController is exposed via HtmlEditor.controller.

How to use

Minimal example

No constructor fields are required, just insert this into your widget tree:

HtmlEditor(),

Simple example

Editor with fixed height, custom placeholder and initial content, gray background and onChange callback to update something:

HtmlEditor(
  backgroundColorCssCode: "gray",
  minHeight: 300,
  initialText: "Some initial text",
  placeholder: "Edit me",
  onChange: (content, height) => update(content),
),

Full feature example

Editor with custom appearance, flexible height, auto scrolling to avoid texts going below keyboard while editing, custom web view title for screen reader and callbacks actions:

ListView(
  controller: scrollController,
  children: [
    ...,
    HtmlEditor(
      backgroundColorCssCode: "#555555",
      minHeight: 300,
      padding: EdgeInsets.zero,
      flexibleHeight: true,
      autoAdjustScroll: true,
      // Alternatively, make a variable for this
      // to gain access to the web controller and
      // the editor methods
      controller: EditorController(
        scrollController: scrollController,
      ),
      initialText: "Some initial text",
      placeholder: "Edit me",
      padding: EdgeInsets.all(10),
      scaleFactor: 1.5,
      showLoadingWheel: true,
      onChange: (content, height) => update(content),
      onFocus: () => doSomething(),
      onBlur: () => doSomeOtherThing(),
      printWebViewLog: true,
      webViewTitle: "Editor",
      useAndroidHybridComposition: true,
    ),
    ...,
  ],
),

Check out Example and API reference for more.