flutter_minimal_html_editor 1.1.0 icon indicating copy to clipboard operation
flutter_minimal_html_editor: ^1.1.0 copied to clipboard

Minimal HTML WYSIWYG editor with only context menu formatting options. Supports flexible height, customizing appearance, and various text callbacks and methods.

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.

2
likes
120
pub points
56%
popularity

Publisher

unverified uploader

Minimal HTML WYSIWYG editor with only context menu formatting options. Supports flexible height, customizing appearance, and various text callbacks and methods.

Documentation

API reference

License

Icon for licenses.BSD-3-Clause (LICENSE)

Dependencies

flutter, flutter_inappwebview

More

Packages that depend on flutter_minimal_html_editor