How to Add WYSIWYG HTML Editor in Flutter

In this example, we are going to show you how to add WYSIWYG HTML Editor in Flutter. Furthermore, you will learn to set up different kinds of toolbar buttons and get the HTML text from the editor. See the example below for more details:

First, add html_editor_enhanced package to your project by adding the following lines in pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  html_editor_enhanced: ^2.5.0

Don't forget to give internet permission on AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET"/>

Now import, the package to your script:

import 'package:html_editor_enhanced/html_editor.dart';

Declare Controller:

HtmlEditorController controller = HtmlEditorController();

HtmlEditor(
    controller: controller,
    htmlEditorOptions: HtmlEditorOptions(
      hint: "Type you Text here",
    ),  
    otherOptions: OtherOptions(
      height: 400,
    ),
)

Add this code to your flutter script, the output will look like the below:

Now, you can extend the Toolbar buttons with the method below:

HtmlEditor(
    controller: controller, //required
    htmlEditorOptions: HtmlEditorOptions(
      hint: "Type you Text here",
    ),  
    htmlToolbarOptions: HtmlToolbarOptions(
      toolbarType: ToolbarType.nativeGrid
    ), 
    otherOptions: OtherOptions(
      height: 400,
    ),
)

The output of this code:

you can also put these toolbar icons below the editor:

HtmlEditor(
    controller: controller, //required
    htmlEditorOptions: HtmlEditorOptions(
      hint: "Type you Text here",
    ),  
    htmlToolbarOptions: HtmlToolbarOptions(
      toolbarType: ToolbarType.nativeGrid,
      toolbarPosition: ToolbarPosition.belowEditor
    ), 
    otherOptions: OtherOptions(
      height: 400,
    ),
)

The output of this code:

HtmlEditor(
    controller: controller, //required
    htmlEditorOptions: HtmlEditorOptions(
      hint: "Type you Text here",
    ),  
    htmlToolbarOptions: HtmlToolbarOptions(
      defaultToolbarButtons: [
          FontButtons(
              underline: false,
              italic: false,
              //you can do more with
              //bold, clearAll, strikethrough,
              //subscript, supscript

          ),

          ColorButtons(
              foregroundColor: false
              //highlightColor: true
          ),

          //ListButtons(),
          //FontSettingButtons(),
          //ParagraphButtons(),
          //InsertButtons()

      ]
    ), 
    otherOptions: OtherOptions(
      height: 200,
    ),
),

The output of this code:

String data = await controller.getText();

Here, the controller is the controller of the HTML editor which we have declared and assigned at the top.

import 'package:flutter/material.dart';
import 'package:html_editor_enhanced/html_editor.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  HtmlEditorController controller = HtmlEditorController();


  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("HTML Editor in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            child: Column(
              children: [
                  
                  HtmlEditor(
                      controller: controller, //required
                      htmlEditorOptions: HtmlEditorOptions(
                        hint: "Type you Text here",
                      ),  
                      htmlToolbarOptions: HtmlToolbarOptions(
                        toolbarType: ToolbarType.nativeGrid,
                      ), 
                      otherOptions: OtherOptions(
                        height: 400,
                      ),
                  ),

                  ElevatedButton(
                    onPressed: () async {
                      String data = await controller.getText();
                    }, 
                    child: Text("Get HTML Text")
                  )
                   
            ],)
          )
       );
  }
}