GitLocker: The Coding Marketplace

Description:

flutter summernote

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
<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>
copied to clipboard
Usage #

import flutter html editor

import 'package:flutter_summernote/flutter_summernote.dart';
copied to clipboard

Create Global key from HTML Editor State

GlobalKey<FlutterSummernoteState> _keyEditor = GlobalKey();
copied to clipboard

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']]
]"""
)
copied to clipboard

Get text from Html Editor

final _etEditor = await keyEditor.currentState.getText();
copied to clipboard
Avalaible option parameters #

Parameter
Type
Default
Description

key
GlobalKey
required
for get method & reset

value
String
empty
initiate 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.

customPopover
String
empty
Add all available Popover (the same paragraph as for toolbar, but below)

hasAttachment
Boolean
false
Use this option if you want to show or hide attachment button

showBottomToolbar
Boolean
false
Use this option if you want to show or hide bottom toolbar

returnContent
Function
null
Use this callback to return text content on await keyEditor.currentState.getText() function call.

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