From 9ce8ad23652f388dca8fc7368132da815789499e Mon Sep 17 00:00:00 2001 From: jideguru Date: Thu, 3 Jun 2021 00:32:29 +0100 Subject: [PATCH] feat: added more editor settings --- README.md | 9 ++++ example/lib/main.dart | 8 ++- lib/rich_editor.dart | 1 + lib/src/models/enum.dart | 2 + lib/src/rendering/rich_editor.dart | 34 +++++++++++-- lib/src/utils/javascript_executor_base.dart | 56 +++++++++++---------- lib/src/widgets/editor_tool_bar.dart | 2 - 7 files changed, 77 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 9852535..0d5210d 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,15 @@ Based on https://github.com/dankito/RichTextEditor, but for Flutter. RichEditor( key: keyEditor, value: 'initial html here', + placeholder: 'Start typing', + // backgroundColor: Colors.blueGrey, // Editor's bg color + // baseTextColor: Colors.white, + // editor padding + padding: EdgeInsets.symmetric(horizontal: 5.0), + // font name + baseFontFamily: 'sans-serif', + // Position of the editing bar (BarPosition.TOP or BarPosition.BOTTOM) + barPosition: BarPosition.TOP, // You can return a Link (maybe you need to upload the image to your // storage before displaying in the editor or you can also use base64 getImageUrl: (image) { diff --git a/example/lib/main.dart b/example/lib/main.dart index 4a31452..dc7f102 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -101,12 +101,16 @@ class _MyHomePageState extends State { //

Heading 4

//
Heading 5
//
Heading 6
-// ''', +// ''', // initial HTML data placeholder: 'Start typing', - // backgroundColor: Colors.blueGrey, + // backgroundColor: Colors.blueGrey, // Editor's bg color // baseTextColor: Colors.white, + // editor padding padding: EdgeInsets.symmetric(horizontal: 5.0), + // font name baseFontFamily: 'sans-serif', + // Position of the editing bar (BarPosition.TOP or BarPosition.BOTTOM) + barPosition: BarPosition.TOP, // You can return a Link (maybe you need to upload the image to your // storage before displaying in the editor or you can also use base64 getImageUrl: (image) { diff --git a/lib/rich_editor.dart b/lib/rich_editor.dart index 48e80cd..746c738 100644 --- a/lib/rich_editor.dart +++ b/lib/rich_editor.dart @@ -3,3 +3,4 @@ library rich_editor; export 'src/rendering/rich_editor.dart'; export 'src/widgets/editor_tool_bar.dart'; export 'src/widgets/tab_button.dart'; +export 'src/models/enum.dart'; diff --git a/lib/src/models/enum.dart b/lib/src/models/enum.dart index 5ba1a95..e4e9e47 100644 --- a/lib/src/models/enum.dart +++ b/lib/src/models/enum.dart @@ -42,3 +42,5 @@ enum CommandName { TOGGLE_GROUPED_TEXT_STYLES_COMMANDS_VIEW, TOGGLE_GROUPED_INSERT_COMMANDS_COMMANDS_VIEW } + +enum BarPosition {TOP, BOTTOM} \ No newline at end of file diff --git a/lib/src/rendering/rich_editor.dart b/lib/src/rendering/rich_editor.dart index 54494d8..8749da9 100644 --- a/lib/src/rendering/rich_editor.dart +++ b/lib/src/rendering/rich_editor.dart @@ -4,6 +4,7 @@ import 'dart:io'; import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; +import 'package:rich_editor/src/models/enum.dart'; import 'package:rich_editor/src/services/local_server.dart'; import 'package:rich_editor/src/utils/javascript_executor_base.dart'; import 'package:rich_editor/src/widgets/editor_tool_bar.dart'; @@ -16,6 +17,7 @@ class RichEditor extends StatefulWidget { final EdgeInsets? padding; final String? placeholder; final String? baseFontFamily; + final BarPosition barPosition; final Function(File image)? getImageUrl; final Function(File video)? getVideoUrl; @@ -27,6 +29,7 @@ class RichEditor extends StatefulWidget { this.padding, this.placeholder, this.baseFontFamily, + this.barPosition = BarPosition.TOP, this.getImageUrl, this.getVideoUrl, }) : super(key: key); @@ -89,10 +92,13 @@ class RichEditorState extends State { Widget build(BuildContext context) { return Column( children: [ - EditorToolBar( - controller: _controller, - getImageUrl: widget.getImageUrl, - javascriptExecutor: javascriptExecutor, + Visibility( + visible: widget.barPosition == BarPosition.TOP, + child: EditorToolBar( + controller: _controller, + getImageUrl: widget.getImageUrl, + javascriptExecutor: javascriptExecutor, + ), ), Expanded( child: WebView( @@ -120,7 +126,15 @@ class RichEditorState extends State { print("error ${e.description}"); }, ), - ) + ), + Visibility( + visible: widget.barPosition == BarPosition.BOTTOM, + child: EditorToolBar( + controller: _controller, + getImageUrl: widget.getImageUrl, + javascriptExecutor: javascriptExecutor, + ), + ), ], ); } @@ -192,4 +206,14 @@ class RichEditorState extends State { html = await javascriptExecutor.getCurrentHtml(); return html == '

​

'; } + + /// Enable Editing (If editing is disabled) + enableEditing() async { + await javascriptExecutor.setInputEnabled(true); + } + + /// Disable Editing (Could be used for a 'view mode') + disableEditing() async { + await javascriptExecutor.setInputEnabled(false); + } } diff --git a/lib/src/utils/javascript_executor_base.dart b/lib/src/utils/javascript_executor_base.dart index e5ac1ad..0ffc88d 100644 --- a/lib/src/utils/javascript_executor_base.dart +++ b/lib/src/utils/javascript_executor_base.dart @@ -55,113 +55,113 @@ class JavascriptExecutorBase { // Text commands undo() async { - await executeJavascript("undo()"); + await executeJavascript("undo();"); } redo() async { - await executeJavascript("redo()"); + await executeJavascript("redo();"); } setBold() async { - await executeJavascript("setBold()"); + await executeJavascript("setBold();"); } setItalic() async { - await executeJavascript("setItalic()"); + await executeJavascript("setItalic();"); } setUnderline() async { - await executeJavascript("setUnderline()"); + await executeJavascript("setUnderline();"); } setSubscript() async { - await executeJavascript("setSubscript()"); + await executeJavascript("setSubscript();"); } setSuperscript() async { - await executeJavascript("setSuperscript()"); + await executeJavascript("setSuperscript();"); } setStrikeThrough() async { - await executeJavascript("setStrikeThrough()"); + await executeJavascript("setStrikeThrough();"); } setTextColor(Color? color) async { String? hex = color!.toHexColorString(); - await executeJavascript("setTextColor('$hex')"); + await executeJavascript("setTextColor('$hex');"); } setTextBackgroundColor(Color? color) async { String? hex = color!.toHexColorString(); - await executeJavascript("setTextBackgroundColor('$hex')"); + await executeJavascript("setTextBackgroundColor('$hex');"); } setFontName(String fontName) async { - await executeJavascript("setFontName('$fontName')"); + await executeJavascript("setFontName('$fontName');"); } setFontSize(int fontSize) async { if (fontSize < 1 || fontSize > 7) { throw ("Font size should have a value between 1-7"); } - await executeJavascript("setFontSize('$fontSize')"); + await executeJavascript("setFontSize('$fontSize');"); } setHeading(int heading) async { - await executeJavascript("setHeading('$heading')"); + await executeJavascript("setHeading('$heading');"); } setFormattingToParagraph() async { - await executeJavascript("setFormattingToParagraph()"); + await executeJavascript("setFormattingToParagraph();"); } setPreformat() async { - await executeJavascript("setPreformat()"); + await executeJavascript("setPreformat();"); } setBlockQuote() async { - await executeJavascript("setBlockQuote()"); + await executeJavascript("setBlockQuote();"); } removeFormat() async { - await executeJavascript("removeFormat()"); + await executeJavascript("removeFormat();"); } setJustifyLeft() async { - await executeJavascript("setJustifyLeft()"); + await executeJavascript("setJustifyLeft();"); } setJustifyCenter() async { - await executeJavascript("setJustifyCenter()"); + await executeJavascript("setJustifyCenter();"); } setJustifyRight() async { - await executeJavascript("setJustifyRight()"); + await executeJavascript("setJustifyRight();"); } setJustifyFull() async { - await executeJavascript("setJustifyFull()"); + await executeJavascript("setJustifyFull();"); } setIndent() async { - await executeJavascript("setIndent()"); + await executeJavascript("setIndent();"); } setOutdent() async { - await executeJavascript("setOutdent()"); + await executeJavascript("setOutdent();"); } insertBulletList() async { - await executeJavascript("insertBulletList()"); + await executeJavascript("insertBulletList();"); } insertNumberedList() async { - await executeJavascript("insertNumberedList()"); + await executeJavascript("insertNumberedList();"); } // Insert element insertLink(String url, String title) async { - await executeJavascript("insertLink('$url', '$title')"); + await executeJavascript("insertLink('$url', '$title');"); } /// The rotation parameter is used to signal that the image is rotated and should be rotated by CSS by given value. @@ -243,6 +243,10 @@ class JavascriptExecutorBase { await executeJavascript("setHeight('" + px.toString() + "px');"); } + setInputEnabled(bool inputEnabled) async { + await executeJavascript("setInputEnabled($inputEnabled);"); + } + static decodeHtml(String html) { return Uri.decodeFull(html); } diff --git a/lib/src/widgets/editor_tool_bar.dart b/lib/src/widgets/editor_tool_bar.dart index 4dd059b..df427dd 100644 --- a/lib/src/widgets/editor_tool_bar.dart +++ b/lib/src/widgets/editor_tool_bar.dart @@ -183,7 +183,6 @@ class EditorToolBar extends StatelessWidget { return FontsDialog(); }, ); - print(command); if (command != null) await javascriptExecutor.setFontName(command); }, @@ -299,7 +298,6 @@ class EditorToolBar extends StatelessWidget { return CheckDialog(); }, ); - print(text); if (text != null) await javascriptExecutor.insertCheckbox(text); },