Flutter Summernote – Text Editor in Flutter

Flutterappworld

4 years ago

Flutter Summernote

Text Editor in Flutter for Android and iOS to help free write WYSIWYG HTML code based on Summernote 0.8.18 javascript wrapper.

NOTICE

This package dependent to the Official WebView Plugin. In this package can’t add image, video, or another file using editor toolbar. To handle attach image this package give you another solution using image Image Picker at bottom of editor. This package can’t use enableinteractiveSelection from TextField, to handle that this package give you another solution using copy paste at bottom of editor. Thank you for all your support.

Setup

add flutter_summernote: ^latest as deppendecy to pubspec.yaml

iOS

Add the following keys to your Info.plist file, located in /ios/Runner/Info.plist:

    <key>io.flutter.embedded_views_preview</key>
    <true/>

    <key>NSCameraUsageDescription</key>
    <string>Used to demonstrate image picker plugin</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Used to capture audio for image picker plugin</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Used to demonstrate image picker plugin</string>

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
         <true/>
    </dict>

Usage

import flutter html editor

    import 'package:flutter_summernote/flutter_summernote.dart';

Create Global key from HTML Editor State

    GlobalKey<FlutterSummernoteState> _keyEditor = GlobalKey();

Add HTML Editor to widget

    FlutterSummernote(
        hint: "Your text here...",
        key: _keyEditor
    ),
    FlutterSummernote(
        hint: "Your text here...",
        key: _keyEditor,
        customToolbar: """
            [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']]
            ]"""
    )

Get text from Html Editor

    final _etEditor = await keyEditor.currentState.getText();

Avalaible option parameters

Parameter	Type	Default	Description
key	GlobalKey	required	for get method & reset
value	String	empty	iniate text content for text editor
height	double	380	height of text editor
decoration	BoxDecoration	empty	Decoration editor
widthImage	String	100%	width of image picker
hint	String	empty	Placeholder hint text
customToolbar	String	empty	Add all available Toolbar. Don’t use insert (video & picture), please use hasAttachment option.
hasAttachment	Boolean	false	Use this option if yout want to show or hide attachment button
showBottomToolbar	Boolean	false	Use this option if yout want to show or hide bottom toolbar

Download Flutter Text Editor source code on GitHub

https://github.com/chandrabezzo/flutter_summernote
32 forks.
46 stars.
22 open issues.

Recent commits:

Flutterappworld

Provides the list of the opensource Flutter apps collection with GitHub repository.