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

refactor: extracted RichEditorOptions

Browse Source
This commit is contained in:
jideguru 2021-06-03 12:03:20 +01:00
parent 4097c7c746
commit 0ba6803269
12 changed files with 262 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@ -34,15 +34,17 @@ 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,
editorOptions: RichEditorOptions(
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) {

94
example/lib/basic.dart Normal file
View File

@ -0,0 +1,94 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:rich_editor/rich_editor.dart';
class BasicDemo extends StatelessWidget {
GlobalKey<RichEditorState> keyEditor = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Basic Demo'),
actions: [
PopupMenuButton(
child: IconButton(
icon: Icon(Icons.more_vert),
onPressed: null,
disabledColor: Colors.white,
),
itemBuilder: (context) {
return [
PopupMenuItem(
child: Text('Get HTML'),
value: 0,
),
PopupMenuItem(
child: Text('Clear content'),
value: 1,
),
PopupMenuItem(
child: Text('Hide keyboard'),
value: 2,
),
PopupMenuItem(
child: Text('Show Keyboard'),
value: 3,
),
];
},
onSelected: (val) async {
switch (val) {
case 0:
String? html = await keyEditor.currentState?.getHtml();
print(html);
break;
case 1:
await keyEditor.currentState?.clear();
break;
case 2:
await keyEditor.currentState?.unFocus();
break;
case 3:
await keyEditor.currentState?.focus();
break;
}
},
),
],
),
body: RichEditor(
key: keyEditor,
// value: '''
// <h1>Heading 1</h1>
// <h2>Heading 2</h2>
// <h3>Heading 3</h3>
// <h4>Heading 4</h4>
// <h5>Heading 5</h5>
// <h6>Heading 6</h6>
// ''', // initial HTML data
editorOptions: RichEditorOptions(
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) {
String link = 'https://avatars.githubusercontent.com/u/24323581?v=4';
String base64 = base64Encode(image.readAsBytesSync());
String base64String = 'data:image/png;base64, $base64';
return base64String;
},
),
);
}
}

91
example/lib/custom_toolbar_demo.dart Normal file
View File

@ -0,0 +1,91 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:rich_editor/rich_editor.dart';
class CustomToolbarDemo extends StatefulWidget {
@override
_CustomToolbarDemoState createState() => _CustomToolbarDemoState();
}
class _CustomToolbarDemoState extends State<CustomToolbarDemo> {
GlobalKey<RichEditorState> keyEditor = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Toolbar Demo'),
actions: [
PopupMenuButton(
child: IconButton(
icon: Icon(Icons.more_vert),
onPressed: null,
disabledColor: Colors.white,
),
itemBuilder: (context) {
return [
PopupMenuItem(
child: Text('Get HTML'),
value: 0,
),
PopupMenuItem(
child: Text('Clear content'),
value: 1,
),
PopupMenuItem(
child: Text('Hide keyboard'),
value: 2,
),
PopupMenuItem(
child: Text('Show Keyboard'),
value: 3,
),
];
},
onSelected: (val) async {
switch (val) {
case 0:
String? html = await keyEditor.currentState?.getHtml();
print(html);
break;
case 1:
await keyEditor.currentState?.clear();
break;
case 2:
await keyEditor.currentState?.unFocus();
break;
case 3:
await keyEditor.currentState?.focus();
break;
}
},
),
],
),
body: RichEditor(
key: keyEditor,
// value: '', // initial HTML data
editorOptions: RichEditorOptions(
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) {
String link = 'https://avatars.githubusercontent.com/u/24323581?v=4';
String base64 = base64Encode(image.readAsBytesSync());
String base64String = 'data:image/png;base64, $base64';
return base64String;
},
),
);
}
}

98
example/lib/main.dart
View File

@ -1,5 +1,6 @@
import 'dart:convert';
import 'package:example/basic.dart';
import 'package:flutter/material.dart';
import 'package:rich_editor/rich_editor.dart';
@ -16,102 +17,7 @@ class MyApp extends StatelessWidget {
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Rich Editor Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey<RichEditorState> keyEditor = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
PopupMenuButton(
child: IconButton(
icon: Icon(Icons.more_vert),
onPressed: null,
disabledColor: Colors.white,
),
itemBuilder: (context) {
return [
PopupMenuItem(
child: Text('Get HTML'),
value: 0,
),
PopupMenuItem(
child: Text('Clear content'),
value: 1,
),
PopupMenuItem(
child: Text('Hide keyboard'),
value: 2,
),
PopupMenuItem(
child: Text('Show Keyboard'),
value: 3,
),
];
},
onSelected: (val) async {
switch (val) {
case 0:
String? html = await keyEditor.currentState?.getHtml();
print(html);
break;
case 1:
await keyEditor.currentState?.clear();
break;
case 2:
await keyEditor.currentState?.unFocus();
break;
case 3:
await keyEditor.currentState?.focus();
break;
}
},
),
],
),
body: RichEditor(
key: keyEditor,
// value: '''
// <h1>Heading 1</h1>
// <h2>Heading 2</h2>
// <h3>Heading 3</h3>
// <h4>Heading 4</h4>
// <h5>Heading 5</h5>
// <h6>Heading 6</h6>
// ''', // initial HTML data
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) {
String link = 'https://avatars.githubusercontent.com/u/24323581?v=4';
String base64 = base64Encode(image.readAsBytesSync());
String base64String = 'data:image/png;base64, $base64';
return base64String;
},
),
home: BasicDemo(),
);
}
}

5
lib/rich_editor.dart
View File

@ -1,6 +1,9 @@
library rich_editor;
export 'src/models/enum/bar_position.dart';
export 'src/models/rich_editor_options.dart';
export 'src/rendering/rich_editor.dart';
export 'src/utils/javascript_executor_base.dart';
export 'src/widgets/editor_tool_bar.dart';
export 'src/widgets/tab_button.dart';
export 'src/models/enum.dart';
export 'src/widgets/tab_button.dart';

3
lib/src/models/editor_state.dart
View File

@ -1,6 +1,5 @@
import 'package:rich_editor/src/models/enum.dart';
import 'command_state.dart';
import 'enum/command_name.dart';
class EditorState {
bool? didHtmlChange;

1
lib/src/models/enum/bar_position.dart Normal file
View File

@ -0,0 +1 @@
enum BarPosition { TOP, BOTTOM, CUSTOM }

4
lib/src/models/enum.dart → lib/src/models/enum/command_name.dart
View File

@ -38,6 +38,4 @@ enum CommandName {
INSERTCHECKBOX,
// pseudo commands for toggling grouped command views
EXPANDING_SEARCH_VIEWING,
}
enum BarPosition { TOP, BOTTOM }
}

28
lib/src/models/rich_editor_options.dart Normal file
View File

@ -0,0 +1,28 @@
import 'package:flutter/material.dart';
import 'enum/bar_position.dart';
class RichEditorOptions {
Color? backgroundColor;
Color? baseTextColor;
EdgeInsets? padding;
String? placeholder;
String? baseFontFamily;
BarPosition? barPosition;
RichEditorOptions({
Color? backgroundColor,
Color? baseTextColor,
EdgeInsets? padding,
String? placeholder,
String? baseFontFamily,
BarPosition? barPosition,
}) {
this.backgroundColor = backgroundColor;
this.baseTextColor = baseTextColor;
this.padding = padding;
this.placeholder = placeholder;
this.baseFontFamily = baseFontFamily;
this.barPosition = barPosition;
}
}

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

@ -4,7 +4,8 @@ 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/models/enum/bar_position.dart';
import 'package:rich_editor/src/models/rich_editor_options.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';
@ -12,24 +13,14 @@ import 'package:webview_flutter/webview_flutter.dart';
class RichEditor extends StatefulWidget {
final String? value;
final Color? backgroundColor;
final Color? baseTextColor;
final EdgeInsets? padding;
final String? placeholder;
final String? baseFontFamily;
final BarPosition barPosition;
final RichEditorOptions? editorOptions;
final Function(File image)? getImageUrl;
final Function(File video)? getVideoUrl;
RichEditor({
Key? key,
this.value,
this.backgroundColor,
this.baseTextColor,
this.padding,
this.placeholder,
this.baseFontFamily,
this.barPosition = BarPosition.TOP,
this.editorOptions,
this.getImageUrl,
this.getVideoUrl,
}) : super(key: key);
@ -93,7 +84,7 @@ class RichEditorState extends State<RichEditor> {
return Column(
children: [
Visibility(
visible: widget.barPosition == BarPosition.TOP,
visible: widget.editorOptions!.barPosition == BarPosition.TOP,
child: EditorToolBar(
controller: _controller,
getImageUrl: widget.getImageUrl,
@ -128,7 +119,7 @@ class RichEditorState extends State<RichEditor> {
),
),
Visibility(
visible: widget.barPosition == BarPosition.BOTTOM,
visible: widget.editorOptions!.barPosition == BarPosition.BOTTOM,
child: EditorToolBar(
controller: _controller,
getImageUrl: widget.getImageUrl,
@ -141,16 +132,20 @@ class RichEditorState extends State<RichEditor> {
_setInitialValues() async {
if (widget.value != null) await javascriptExecutor.setHtml(widget.value!);
if (widget.padding != null)
await javascriptExecutor.setPadding(widget.padding!);
if (widget.backgroundColor != null)
await javascriptExecutor.setBackgroundColor(widget.backgroundColor!);
if (widget.baseTextColor != null)
await javascriptExecutor.setBaseTextColor(widget.baseTextColor!);
if (widget.placeholder != null)
await javascriptExecutor.setPlaceholder(widget.placeholder!);
if (widget.baseFontFamily != null)
await javascriptExecutor.setBaseFontFamily(widget.baseFontFamily!);
if (widget.editorOptions!.padding != null)
await javascriptExecutor.setPadding(widget.editorOptions!.padding!);
if (widget.editorOptions!.backgroundColor != null)
await javascriptExecutor
.setBackgroundColor(widget.editorOptions!.backgroundColor!);
if (widget.editorOptions!.baseTextColor != null)
await javascriptExecutor
.setBaseTextColor(widget.editorOptions!.baseTextColor!);
if (widget.editorOptions!.placeholder != null)
await javascriptExecutor
.setPlaceholder(widget.editorOptions!.placeholder!);
if (widget.editorOptions!.baseFontFamily != null)
await javascriptExecutor
.setBaseFontFamily(widget.editorOptions!.baseFontFamily!);
}
/// Get current HTML from editor

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

@ -3,7 +3,7 @@ import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:rich_editor/src/extensions/extensions.dart';
import 'package:rich_editor/src/models/editor_state.dart';
import 'package:rich_editor/src/models/enum.dart';
import 'package:rich_editor/src/models/enum/command_name.dart';
import 'package:webview_flutter/webview_flutter.dart';
import '../models/command_state.dart';

11
lib/src/widgets/tab_button.dart
View File

@ -4,8 +4,9 @@ class TabButton extends StatelessWidget {
final IconData? icon;
final Function? onTap;
final String tooltip;
final bool selected;
TabButton({this.icon, this.onTap, this.tooltip = ''});
TabButton({this.icon, this.onTap, this.tooltip = '', this.selected = false});
@override
Widget build(BuildContext context) {
@ -17,7 +18,9 @@ class TabButton extends StatelessWidget {
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
// color: Color(0xff212121),
color: selected
? Theme.of(context).accentColor.withOpacity(0.2)
: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
@ -32,7 +35,9 @@ class TabButton extends StatelessWidget {
padding: const EdgeInsets.all(5.0),
child: Icon(
icon,
// color: Theme.of(context).accentColor,
color: selected
? Theme.of(context).accentColor
: Theme.of(context).iconTheme.color,
),
),
),