Text Editor in Flutter for Android and iOS to help free write WYSIWYG HTML code

Overview

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.

demo example demo example

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:

    
   
    io.flutter.embedded_views_preview
   
    
   

    
   
    NSCameraUsageDescription
   
    
   
    Used to demonstrate image picker plugin
   
    
   
    NSMicrophoneUsageDescription
   
    
   
    Used to capture audio for image picker plugin
   
    
   
    NSPhotoLibraryUsageDescription
   
    
   
    Used to demonstrate image picker plugin
   

    
   
    NSAppTransportSecurity
   
    
   
        
    
     NSAllowsArbitraryLoads
    
         
    
    
   

Usage

  1. import flutter html editor
    import 'package:flutter_summernote/flutter_summernote.dart';
  1. Create Global key from HTML Editor State
    GlobalKey
   
     _keyEditor = GlobalKey();

   
  1. 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']]
            ]"""
    )
  1. 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 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.

Comments
  • Support for null safety

    Support for null safety

    This is a request to add support for null safety . We depend on your awesome package, so would be great to have null safety enabled.

    The Dart/Flutter team already encourages publishing the migrated packages: See this blog post.

    See the migration guide for details about enabling null safety.

    opened by manjotsidhu 4
  • BUG in IOS can't type

    BUG in IOS can't type

    I have following the instruction, it works in Android but doesn't work in IOS, I can't type anything in the textfield. Anybody know why ?

    here is my flutter doctor

    [✓] Flutter (Channel stable, 2.0.2, on macOS 11.0.1 20B29 darwin-arm, locale en-ID)
        • Flutter version 2.0.2 at /Users/evanezcent/Documents/INSTALLER/flutter
        • Framework revision 8962f6dc68 (3 weeks ago), 2021-03-11 13:22:20 -0800
        • Engine revision 5d8bf811b3
        • Dart version 2.12.1
    
    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
        • Android SDK at /Users/evanezcent/Library/Android/sdk
        • Platform android-30, build-tools 30.0.3
        • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
        • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
        • All Android licenses accepted.
    
    [✓] Xcode - develop for iOS and macOS
        • Xcode at /Applications/Xcode.app/Contents/Developer
        • Xcode 12.4, Build version 12D4e
        • CocoaPods version 1.10.1
    
    [✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
        ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
    
    [✓] Android Studio (version 4.1)
        • Android Studio at /Applications/Android Studio.app/Contents
        • Flutter plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/9212-flutter
        • Dart plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/6351-dart
        • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    
    [✓] Connected device (1 available)
        • iPhone 12 Pro Max (mobile) • 7A4E5949-BE13-437B-BD45-54248AD94A91 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
    
    opened by evanezent 2
  • using TextEditingController in FlutterSummernote

    using TextEditingController in FlutterSummernote

    Hi, Is there any way to save the String value directly from the TextField into a controller (TextEditingController) without using keyEditor.currentState.getText()

    I need to use a controller because sometimes I got null value when I used this: final txt = await keyEditor.currentState.getText();

    It will be good if you add a controller like this:

    FlutterSummernote(
                    controller: comment_control,
                    hint: "Your text here...",
                    //value: "text content initial, if any",
                    key: keyEditor,
                  ),
    

    Thanks for good library

    opened by blue492 2
  • Change language and custom StyleTags

    Change language and custom StyleTags

    I'm trying to change the language, to match mine, but I can't find the files where I can change that. And another question, how to custom the styleTags. For example, just have Header 1, Header 2 and Header 3.

    opened by CaillaudA 1
  • IOS Error JavaScript execution returned a result of an unsupported type

    IOS Error JavaScript execution returned a result of an unsupported type" UserInfo={NSLocalizedDescription=JavaScript execution returned a result of an unsupported type

    Hi, I've installed this plugin and on Android, it's work well, but on IOS I receive 2 error:

    • After the build() method I receive this error:
    Unhandled Exception: PlatformException(evaluateJavaScript_failed, Failed evaluating JavaScript, JavaScript string was: '$(".note-placeholder").html("");'
    Error Domain=WKErrorDomain Code=5 "JavaScript execution returned a result of an unsupported type" UserInfo={NSLocalizedDescription=JavaScript execution returned a result of an unsupported type}, null)
    
    
    • When I try to get a text from _keyEditor.currentState.getText() I receive this expectation:
    Unhandled Exception: PlatformException(evaluateJavaScript_failed, Failed evaluating JavaScript, JavaScript string was: 'GetTextSummernote.postMessage(document.getElementsByClassName('note-editable')[0].innerHTML);'
    Error Domain=WKErrorDomain Code=5 "JavaScript execution returned a result of an unsupported type" UserInfo={NSLocalizedDescription=JavaScript execution returned a result of an unsupported type}, null)
    

    I've followed the steps for IOS configuration updating Info.plist.

    What I wrong?

    My flutter doctor result is

    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel beta, 1.23.0-18.1.pre, on macOS 11.1 20C69 x86_64, locale it)
     
    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    [✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    [✓] Chrome - develop for the web
    [✓] Android Studio (version 3.6)
    [✓] Connected device (3 available)
        ! Error: iPhone di Giuseppe is not connected. Xcode will continue when iPhone di Giuseppe is connected.
          (code -13)
    
    • No issues found!
    
    opened by LaTrita97 1
  • feat: make bottom toolbar (attachment) hidden when User didn't use insert option

    feat: make bottom toolbar (attachment) hidden when User didn't use insert option

    In this commit I make the Attachment button (at the bottom) toolbar disappear when we don't use the insert option in the custom tolbar.

    I think we need to improve attachment option like: If the custom toolbar set to video only, the attachment button only triggers video only, for now, the attachment toolbar can pick either video or photo in any conditions.

    Please accept this commit since I need this feature (for making this editor only receive Text Input and blocking any non-text input)

    opened by afandiyusuf 0
  • setText() doesn't work first time when it's called in initState

    setText() doesn't work first time when it's called in initState

    @override void initState() { Future.delayed(const Duration(milliseconds: 100),(){ descrption= keyEditor.currentState?.setText('xyz); super.initState(); }

    opened by Dobariyakishan 0
  • Video Preview (Placeholder) not display after loading widget

    Video Preview (Placeholder) not display after loading widget

    Trying to load video in this but its doesnt showing placeholder when video widget loads. https://prnt.sc/ajFtNCekPlR7

    Could you please help on this. Thanks

    opened by patelnirav48 0
  • Cannot open keyboard

    Cannot open keyboard

    Clicking on the text box simply doesn't pull up the keyboard. An error pops up in the console, saying: V/InputMethodManager(10448): b/117267690: Display ID mismatch found. ViewRootImpl displayId=21 InputMethodManager displayId=0. Use the right InputMethodManager instance to avoid performance overhead.

    opened by jaded0 0
  • getText() doesn't work first time when it's called

    getText() doesn't work first time when it's called

    I noticed that getText() doesn't work first time when it's called. When I wait a little bit and call it again then I get the HTML content from FlutterSummernote() widget. I implemented following and ugly workaround to this problem.

    
    GlobalKey<FlutterSummernoteState> keyEditor = GlobalKey();
    ...
                            progressNote.prnoMemo = await keyEditor.currentState?.getText();
                            // getText() is buggy and doesn't work first time when it's called
                            await Future.delayed(Duration(milliseconds: 500));
                            progressNote.prnoMemo = await keyEditor.currentState?.getText();
                            print('from HTML editor :  ${progressNote.prnoMemo}');
    ...
                  FlutterSummernote(
                    height: 350,
                    value: progressNote.prnoMemo,
                    hint: progressNote.prnoMemo == null ? 'Enter your note here...' : '',
                    key: keyEditor,
    ...
    
    
    

    Please investigate and resolve this problem. I use flutter_summernote: ^0.2.3 in my pubspec.yaml file and Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.0.1, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-CA) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 4.1)

    opened by misici234 1
Owner
Chandra Abdul Fattah
Google Certified - Associate Android Developer (Kotlin) | Flutter Enthusiast https://medium.com/@chandrabezzo
Chandra Abdul Fattah
A low code editor with the full power of flutter.

flutter_blossom ?? Low code editor with the full power of flutter. Think in flutter, watch your ideas come to life, plan ahead and let your creativity

Flutter Blossom 0 Dec 2, 2021
A Flutter package to parse text and make them into linkified text widget

?? Flutter Parsed text A Flutter package to parse text and extract parts using predefined types like url, phone and email and also supports Regex. Usa

Fayeed Pawaskar 213 Dec 27, 2022
Rich Text renderer that parses Contentful Rich Text JSON object and returns a renderable Flutter widget

Contentful Rich Text Renderer for Flutter Rich Text renderer that parses Contentful Rich Text field JSON output and produces a Flutter Widget tree tha

Kumanu 45 Nov 10, 2022
A customizable code text field supporting syntax highlighting

CodeField A customizable code text field supporting syntax highlighting Live demo A live demo showcasing a few language / themes combinaisons Showcase

Bertrand 162 Dec 23, 2022
Soft and gentle rich text editing for Flutter applications.

About Zefyr Soft and gentle rich text editing for Flutter applications. You are viewing early dev preview version of this package which is no longer a

Memspace 2.2k Jan 8, 2023
Soft and gentle rich text editing for Flutter applications

Soft and gentle rich text editing for Flutter applications. Zefyrka is a fork of Zefyr package with the following improvements: support Flutter 2.0 op

null 85 Dec 21, 2022
A masked text for Flutter.

flutter_masked_text Masked text input for flutter. Alert Hi guys! Unfortunately, I'm not developing mobile anymore. This repo will not receive updates

Ben-hur Santos Ott 264 Dec 21, 2022
Flutter widget that automatically resizes text to fit perfectly within its bounds.

Flutter widget that automatically resizes text to fit perfectly within its bounds. Show some ❤️ and star the repo to support the project Resources: Do

Simon Leier 1.8k Jan 3, 2023
A simple Flutter package that makes turning a FAB into a text field easy.

flutter_text_field_fab A simple Flutter widget that makes turning a FAB into a text field easy.

Haefele Software 4 Jan 18, 2022
Arc Text Widget for Flutter

Flutter Arc Text Renders text along the arc. See demo. The story behind the plugin is here. Basic usage class MyApp extends StatelessWidget

Kirill Bubochkin 15 Oct 18, 2021
A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.

A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.

Bytedance Inc. 646 Dec 29, 2022
A customised Flutter TextFormField to input international phone number along with country code.

International Phone Field Package A customised Flutter TextFormField to input international phone number along with country code. This widget can be u

Vansh Goel 118 Jan 5, 2023
Statistics Dart package for easy and efficient data manipulation with many built-in functions and units.

statistics Statistics package for easy and efficient data manipulation with many built-in mathematical functions and units. Usage Numeric extension: i

Graciliano Monteiro Passos 13 Nov 7, 2022
A Flutter Package to render Mathematics, Physics and Chemistry Equations based on LaTeX

flutter_tex Contents About Demo Video Screenshots How to use? Android iOS Web Examples Quick Example TeXView Document TeXView Markdown TeXView Quiz Te

Shahzad Akram 219 Jan 5, 2023
Flutter textfield validation lets you validate different textform fields in your Flutter app

Flutter textfield validation lets you validate different textform fields in your Flutter app

World-Package 2 Sep 15, 2022
A markdown renderer for Flutter.

Flutter Markdown A markdown renderer for Flutter. It supports the original format, but no inline HTML. Overview The flutter_markdown package renders M

Flutter 828 Aug 12, 2021
flutter 中文排版,支持分页上下对齐 两端对齐 翻页动画

text_composition flutter 中文排版 分页 上下对齐 两端对齐 多栏布局 弃用richText,使用Canvas,精确定位绘图位置,消除字体对排版影响 视频与截图 demo https://github.com/mabDc/text_composition/releases/t

西红柿大芝麻 50 Nov 3, 2022
Flutter Tutorial - PDF Viewer - Asset, File, Network & Firebase

Flutter Tutorial - PDF Viewer - Asset, File, Network & Firebase Use the Flutter PDF Viewer to download PDF documents and display them within your Flut

Johannes Milke 36 Dec 9, 2022
Create an AutoComplete TextField to search JSON data based on suggestions in Flutter.

Flutter Tutorial - AutoComplete TextField & AutoComplete Search Create an AutoComplete TextField to search JSON data based on suggestions in Flutter.

Johannes Milke 32 Oct 23, 2022