minimal_html_editor 1.1.2+1 copy "minimal_html_editor: ^1.1.2+1" to clipboard
minimal_html_editor: ^1.1.2+1 copied to clipboard

Minimal html wysiwyg editor with only context menu formatting options, support flexible height, customize appearance, 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
  • don't work well with screen reader
  • don't offer fine-grained UI customization
  • lack common text field callbacks and methods

Features #

Support 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 expose via HtmlEditor.controller.

Smooth UI #

Flutter's CircularProgressIndicator is shown when web view is being loaded, no more empty container.

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.

7
likes
120
pub points
68%
popularity

Publisher

unverified uploader

Minimal html wysiwyg editor with only context menu formatting options, support flexible height, customize appearance, various text callbacks and methods.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter, flutter_inappwebview

More

Packages that depend on minimal_html_editor