API-based HTML editor for Flutter

  Editor

enough_html_editor

Slim HTML editor for Flutter with full API control and optional Flutter-based widget controls. 

screenshot

API Documentation

Check out the full API documentation at https://pub.dev/documentation/enough_html_editor/latest/

Usage

The current enough_html_editor package the following widgets:

  • HtmlEditor the HTML editor.
  • HtmlEditorControls optional editor controls.
  • SliverHeaderHtmlEditorControls wrapper to use the editor controls within a CustomScrollView as a sticky header.
  • HtmlEditorApi – not a widget – the API to control the editor, use the API to access the edited HTML text or to set the current text bold, add an unordered list, etc.
  • PackagedHtmlEditor a simple to use Widget that contains both the HtmlEditor and the HtmlEditorControls

Access API

You choose between two options to access the API:

  1. Use the onCreated(HtmlEditorApi) callback:HtmlEditor( onCreated: (api) { setState(() { _editorApi = api; }); }, … );You can then access the API afterwards directly, e.g.final text = await _editorApi.getText();
  2. Define and assign a GlobalKey<HtmlEditorState>:final _keyEditor = GlobalKey<HtmlEditorState>(); Widget build(BuildContext context) { return HtmlEditor( key: _keyEditor, … ); }You can then access the HtmlEditorState via this GlobalKey:final text = await _keyEditor.currentState.api.getText();

Either the API or the global key is required for creating the HtmlEditorControls.

Quick Start

Use the PackagedHtmlEditor for a quick start. This contains both the default controls and the editor.

import 'package:enough_html_editor/enough_html_editor.dart';
[...]
HtmlEditorApi _editorApi;

@override
Widget build(BuildContext context) {
    return PackagedHtmlEditor(
          onCreated: (api) {
            _editorApi = api;
          },
          initialContent: '''<p>Here is some text</p>
          <p>Here is <b>bold</b> text</p>
          <p>Here is <i>some italic sic</i> text</p>
          <p>Here is <i><b>bold and italic</b></i> text</p>
          <p style="text-align: center;">Here is <u><i><b>bold and italic and underline</b></i></u> text</p>
          <ul><li>one list element</li><li>another point</li></ul>
          <blockquote>Here is a quote<br/>
            that spans several lines<br/>
            <blockquote>
                Another second level blockqote 
            </blockquote>
        </blockquote>
''',
        );
}

Use the HtmlEditorApi that you receive in the onCreated callback to query the final text:

// retrieve only the edited text as HTML code: 
final text = await _editorApi.getText();
// retrieve the full document as HTML code:
final fullHtml = await _editorApi.getFullHtml();

Installation

Add this dependency your pubspec.yaml file:

dependencies:
  enough_html_editor: ^0.0.4

The latest version or enough_html_editor is .

Features and bugs

Please file feature requests and bugs at the issue tracker.

License

Licensed under the commercial friendly Mozilla Public License 2.0.

Download HTML editor app source code on GitHub

API-based HTML editor for Flutter.
https://github.com/Enough-Software/enough_html_editor
11 forks.
11 stars.
13 open issues.

Recent commits: