cubetiq/rich_editor
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: added more editor settings

Browse Source
This commit is contained in:
jideguru 2021-06-03 00:32:29 +01:00
parent 509808d220
commit 9ce8ad2365
7 changed files with 77 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -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) {

8
example/lib/main.dart
View File

@ -101,12 +101,16 @@ class _MyHomePageState extends State<MyHomePage> {
// <h4>Heading 4</h4>
// <h5>Heading 5</h5>
// <h6>Heading 6</h6>
// ''',
// ''', // 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) {

1
lib/rich_editor.dart
View File

@ -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';

2
lib/src/models/enum.dart
View File

@ -42,3 +42,5 @@ enum CommandName {
TOGGLE_GROUPED_TEXT_STYLES_COMMANDS_VIEW,
TOGGLE_GROUPED_INSERT_COMMANDS_COMMANDS_VIEW
}
enum BarPosition {TOP, BOTTOM}

34
lib/src/rendering/rich_editor.dart
View File

@ -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<RichEditor> {
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<RichEditor> {
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<RichEditor> {
html = await javascriptExecutor.getCurrentHtml();
return html == '<p>​</p>';
}
/// 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);
}
}

56
lib/src/utils/javascript_executor_base.dart
View File

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

2
lib/src/widgets/editor_tool_bar.dart
View File

@ -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);
},