Text Editor in Flutter for Android and iOS to help free write WYSIWYG HTML code based on Summernote 0.8.18 javascript wrapper.
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.
add flutter_summernote: ^latest as deppendecy to pubspec.yaml
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>
- 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();
| 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. |
This project is licensed under the MIT License - see the LICENSE file for details.
Thanks goes to these wonderful people (emoji key):
 Chandra Abdul Fattah 🚇 💻 |
 yusuf afandi 💻 |
 Ivan Terekhin 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!