Flutter Html Editor - Enhanced #

Flutter HTML Editor Enhanced is a text editor for Android and iOS to help write WYSIWYG HTML code with on the Summernote JavaScript wrapper.

Video Example	Light Mode	Dark Mode

Flutter Web

Table of Contents: #

• "Enhanced"? In what ways?

• Setup

• Usage

• API Reference

  • Parameters Table

  • Methods Table

  • Callbacks Table

  • Getters

  • Toolbar

  • Plugins

  • Examples

• Notes

• License

• Contribution Guide

In what ways is this package "enhanced"? #

1. It has official support for Flutter Web, with nearly all mobile features supported. Keyboard shortcuts like Ctrl+B for bold work as well!

2. It uses a heavily optimized WebView to deliver the best possible experience when using the editor

3. It doesn't use a local server to load the HTML code containing the editor. Instead, this package simply loads the HTML file, which improves performance and the editor's startup time.

4. It uses a StatelessWidget. You don't have to fiddle around with GlobalKeys to access methods, instead you can simply call <controller name>.<method name> anywhere you want.

5. It has support for many of Summernote's methods

6. It has support for many of Summernote's callbacks

7. It has support for some of Summernote's 3rd party plugins, found here

8. It exposes the InAppWebViewController so you can customize the WebView however you like - you can even load your own HTML code and inject your own JavaScript for your use cases.

9. It has support for dark mode

10. It has support for low-level customization, such as setting what buttons are shown on the toolbar

More is on the way! File a feature request or contribute to the project if you'd like to see other features added.

Setup #

Add html_editor_enhanced: ^1.5.0 as dependency to your pubspec.yaml

Additional setup is required to allow the user to pick images via <input type="file">:

<provider
   android:name="com.pichillilorenzo.flutter_inappwebview.InAppWebViewFileProvider"
   android:authorities="${applicationId}.flutter_inappwebview.fileprovider"
   android:exported="false"
   android:grantUriPermissions="true">
   <meta-data
       android:name="android.support.FILE_PROVIDER_PATHS"
       android:resource="@xml/provider_paths" />
</provider>

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

//Android
await Permission.storage.request();
//iOS
await Permission.photos.request();

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

await Permission.camera.request();

target.build_configurations.each do |config|
  config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
      '$(inherited)',
      ## use a hashtag symbol on the permissions you want to include in your app. Make sure they are defined in Info.plist as well! 
      ## dart: PermissionGroup.calendar
      'PERMISSION_EVENTS=0',

      ## dart: PermissionGroup.reminders
      'PERMISSION_REMINDERS=0',

      ## dart: PermissionGroup.contacts
      'PERMISSION_CONTACTS=0',

      ## dart: PermissionGroup.camera
      'PERMISSION_CAMERA=0',

      ## dart: PermissionGroup.microphone
      'PERMISSION_MICROPHONE=0',

      ## dart: PermissionGroup.speech
      'PERMISSION_SPEECH_RECOGNIZER=0',

      ## dart: PermissionGroup.photos
      # 'PERMISSION_PHOTOS=0',

      ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
      'PERMISSION_LOCATION=0',

      ## dart: PermissionGroup.notification
      'PERMISSION_NOTIFICATIONS=0',

      ## dart: PermissionGroup.mediaLibrary
      'PERMISSION_MEDIA_LIBRARY=0',

      ## dart: PermissionGroup.sensors
      'PERMISSION_SENSORS=0'
    ]
 end

Basic Usage #

import 'package:html_editor/html_editor.dart';
// other code here
HtmlEditorController controller = HtmlEditorController();
@override Widget build(BuildContext context) {
    return HtmlEditor(
            controller: controller, //required
            hint: "Your text here...",
            //value: "text content initial, if any",
            height: 400,
    );
}

When you want to get text from the editor:

final txt = await controller.getText();

API Reference #

For the full API reference, see here.

For a full example, see here.

Below, you will find brief descriptions of the parameters theHtmlEditor widget accepts and some code snippets to help you use this package.

Parameters #

Methods #

Access these methods like this: <controller name>.<method name>

Callbacks #

Every callback is defined as a Function(<parameters in some cases>). See the documentation for more specific details on each callback.

Getters #

Currently, the package has one getter: <controller name>.editorController. This returns the InAppWebViewController, which manages the webview that displays the editor.

This is extremely powerful, as it allows you to create your own custom methods and implementations directly in your app. See flutter_inappwebview for documentation on the controller.

This getter should not be used in Flutter Web. If you are making a cross platform implementation, please use kIsWeb to check the current platform in your code.

Toolbar #

This API allows you to customize Summernote's toolbar in a nice, readable format (you don't have to mess around with strings!).

By default, the toolbar will be set to:

toolbar: [
  ['style', ['style']],
  ['font', ['bold', 'underline', 'clear']],
  ['color', ['color']],
  ['para', ['ul', 'ol', 'paragraph']],
  ['insert', ['link', 'picture', 'video', 'table']],
  ['view', ['fullscreen', 'codeview', 'help']],
],

This is pretty close to Summernote's default options. Setting toolbar to null or empty will initialize the editor with these options.

Well, what if you want to customize it? Don't worry, it's a nice and neat API:

HtmlEditorController controller = HtmlEditorController();
Widget htmlEditor = HtmlEditor(
  controller: controller, //required
  //other options
  toolbar: [
    Style(),
    Font(buttons: [FontButtons.bold, FontButtons.underline, FontButtons.italic])
  ]
);

In the above example, the editor will only be initialized with the 'style', 'bold', 'underline', and 'italic' buttons.

If you leave the Toolbar constructor blank (like Style() above), then the package interprets that you want the default buttons for Style to be visible.

You can specify a list of buttons that are visible for each Toolbar constructor. Each constructor accepts a different type of enum in its button list, so you'll always put the right buttons in the right places.

If you don't want to show an entire group of buttons, simply don't include their constructor in the Toolbar list!

Note: Setting buttons: [] will also be interpreted as wanting the default buttons for the constructor rather than not showing the group of buttons.

Plugins #

This API allows you to add certain Summernote plugins from the Summernote Awesome library.

Currently the following plugins are supported:

1. Summernote Emoji from Ajax

2. Summernote Add Text Tags

3. Summernote Classes

This list is not final, more will be added. If there's a specific plugin you'd like to see support for, please file a feature request!

By default, no plugins will be activated. What if you want to activate some? Don't worry, it's a nice and neat API:

HtmlEditorController controller = HtmlEditorController();
Widget htmlEditor = HtmlEditor(
  controller: controller, //required
  //other options
  plugins: [
    SummernoteEmoji(),
    SummernoteClasses()
  ]
);

In the above example, only those two plugins will be activated in the editor. Order matters here - whatever order you define the plugins is the order their buttons will be displayed in the toolbar.

All plugin buttons will be displayed in one section in the toolbar. Overriding the toolbar using the toolbar parameter does not affect how the plugin buttons are displayed.

Please see the plugins.dart file for more specific details on each plugin, including some important notes to consider when deciding whether or not to use them in your implementation.

Examples #

See the example app to see how the majority of methods & callbacks can be used. You can also play around with the parameters to see how they function.

This section will be updated later with more specialized and specific examples as this library grows and more features are implemented.

Notes #

Due to this package depending on a webview for rendering the HTML editor, there will be some general weirdness in how the editor behaves. Unfortunately, these are not things I can fix, they are inherent problems with how webviews function on Flutter.

If you do find any issues, please report them in the Issues tab and I will see if a fix is possible, but if I close the issue it is likely due to the above fact.

1. When switching between dark and light mode, a reload is required for the HTML editor to switch to the correct color scheme. You can implement this programmatically in Flutter Mobile: <controller name>.editorController.reload(), or in Flutter Web: <controller name>.reloadWeb(). This will reset the editor! You can save the current text, reload, and then set the text if you'd like to maintain the state.

2. If you are making a cross platform implementation and are using either the controller getter or the reloadWeb() method, use kIsWeb in your app to ensure you are calling these in the correct platform.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Contribution Guide #

Coming soon!

Meanwhile, PRs are always welcome