chandrabezzo / flutter_summernote Goto Github PK

License: MIT License

Kotlin 0.58% Ruby 15.15% Swift 2.56% Objective-C 0.18% Dart 68.01% C++ 1.51% C 2.81% CMake 6.89% Shell 2.32%

flutter_summernote's Introduction

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	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.

Contributors ✨

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!

flutter_summernote's People

Contributors

Stargazers

Watchers

flutter_summernote's Issues

Add property to make value cleanup optional

Just getting started on an email compose screen at work. First thing I noticed is that when I open the editor and pass in a user's signature (html), there is a bunch of extra line breaks.

(Signature in TinyMCE in our web app)

(HTML stored in the DB)

<p>Joe Demo<br>

Business Manager<br>

<a href="https://www.example.com">https://www.example.com</a><br>

m: 555-555-1212</p>

(Signature in FlutterSummernote)

Pretty sure this is because of the code that replaces line breaks with <br/> in setText method. (e.g. .replaceAll("\n", "<br/>"))

I would be happy to fork your repo and put up a PR with a new property that makes this optional. Is that something you would be interested in?

await _keyEditor.currentState.getText(); returns null

This library is great but when getting the value using this await _keyEditor.currentState.getText(); is always null.

Any help..?

Request to develop a flutter plugin to display summernote's html content in flutter app.

Hey @chandrabezzo. I use Official Summernote to write blog posts on my website. Few days ago, i decided to develop a Flutter app to show my blogs but i'm facing issues in showing my blog content in my flutter app. Till now, i've tried several plugins like flutter_html: ^1.1.1, webview_flutter_plus: ^0.1.1+10, etc but none of them shows my blog content properly. It looks completely different on the website. Sometimes font size are different in some lines and sometimes font colors are different. So, i request you to develop a plugin which can show summernote's html content properly.

图片如何使用？How to use the picture?

Input Tag Supported ?

I want to use Checkbox after user check one of these checkboxes and call getText method get html contains that checkbox checked.

check this below for sample

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.

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.

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

can't insert image from url with photo widget in toolbar

i am unable to insert image from url please check this issue.thank you

Doesn't work in Offline and in slow connection, strong external js libs depend

Delayed init on slow internet connection, and empty editor screen in offline mode.

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!

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)

App crashes pressing 'Select' button while selecting forecolor and backcolor

I'm using the default example provided in the doc, the only change is that I'm using the default toolbar.

The problem is that when I try to press the button Select (the one that appears in the bottom of the box) the app crashes.
Did anyone either solve or run in this problem?

Flutter 2.0

Please, update project dependencies to support Flutter 2.0.

Thank you.

blinking on editor

when i write on summernote, always blinking

LateInitializationError: Field '_webViewController@139173288' has already been initialized.

late final WebViewController? _webViewController;
....
@override
  void dispose() {
    if (_webViewController != null) {
      _webViewController = null;
    }
    super.dispose();
  }

Setting _webViewController =null on dispose causing this error.
So every time we dispose the page containing summer_note "LateInitializationError: Field '_webViewController@139173288' has already been initialized." is thrown.

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();
}

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)

Can't copy paste with format.

I am unable to copy and paste the sentence with formatting. The formatting is lost when I copy-paste from an external website.

Image picker render as base64 is not working

Trying to attach an image from the gallery. it is rendered as base64 but not displaying the image. there is space inside encoded base64.

Not working on real device

This example project is running without issue on emulator. But when I run it on real device its not working. No toolbar is showing and cannot able to type any text.

Device model: Xiaomi MI 5X
Android version: 8.1.0

Please support for flutter web

Dear
I want to publish my app as PWA. Please update to support web applications.

Thanks

Error on running version Flutter Channel dev, 1.23.0-4.0.pre,

Can't type anything, it doesn't work on Flutter (Channel dev, 1.23.0-4.0.pre, on Microsoft Windows [Version 10.0.18363.1082], locale en-US)

UI

Logs

Performing hot restart...
Syncing files to device Android SDK built for x86...
D/EGL_emulation(22841): eglMakeCurrent: 0xa47e7680: ver 2 0 (tinfo 0xa4833f20)
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/BufferQueueProducer(22841): [SurfaceTexture-0-22841-1] cancelBuffer: BufferQueue has been abandoned
D/EGL_emulation(22841): eglMakeCurrent: 0xa48320a0: ver 2 0 (tinfo 0x91f7f340)
D/EGL_emulation(22841): eglMakeCurrent: 0xa4832c40: ver 2 0 (tinfo 0x91f7f340)
Restarted application in 1,104ms.
[GETX] "GetMaterialController" has been initialized
D/EGL_emulation(22841): eglMakeCurrent: 0xa47e7680: ver 2 0 (tinfo 0xa4833f20)
D/EGL_emulation(22841): eglCreateContext: 0xa4832c40: maj 2 min 0 rcv 2
D/EGL_emulation(22841): eglMakeCurrent: 0xa4832c40: ver 2 0 (tinfo 0x91f7f340)
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
D/EGL_emulation(22841): eglMakeCurrent: 0xa47e7680: ver 2 0 (tinfo 0xa4833f20)
D/EGL_emulation(22841): eglMakeCurrent: 0xa47e7680: ver 2 0 (tinfo 0xa4833f20)
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
D/        (22841): HostConnection::get() New Host Connection established 0x839a3000, tid 23176
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5
E/eglCodecCommon(22841): glUtilsParamSize: unknow param 0x000085b5

Doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel dev, 1.23.0-4.0.pre, on Microsoft Windows [Version 10.0.18363.1082], locale en-US)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.2)
[√] Android Studio (version 4.0)
[!] IntelliJ IDEA Ultimate Edition (version 2019.3)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code (version 1.49.2)
[√] Connected device (5 available)

Back button not working

When i use summernote on page.
if i press back button then the navigator does not pop that page.

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.