Description:

flutter minimal html editor

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(),
copied to clipboard
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),
),
copied to clipboard
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,
),
...,
],
),
copied to clipboard
Check out Example and API reference for more.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter