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

feat: added javascript Insert element commands

Browse Source
This commit is contained in:
jideguru 2021-05-27 00:58:09 +01:00
parent 5c168365b6
commit f4f1802eb6
3 changed files with 121 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,7 @@ class _RichEditorState extends State<RichEditor> {
int port = 5321; int port = 5321;
LocalServer? localServer; LocalServer? localServer;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -27,15 +28,14 @@ class _RichEditorState extends State<RichEditor> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
children: [ children: [
GroupedTab( GroupedTab(controller: _controller),
controller: _controller,
),
Flexible( Flexible(
child: WebView( child: WebView(
initialUrl: 'file:///android_asset/flutter_assets/packages/rich_editor/assets/editor/editor.html', initialUrl:
'file:///android_asset/flutter_assets/packages/rich_editor/assets/editor/editor.html',
onWebViewCreated: (WebViewController controller) { onWebViewCreated: (WebViewController controller) {
_controller = controller; _controller = controller;
// print(); print('WebView created');
setState(() {}); setState(() {});
}, },
javascriptMode: JavascriptMode.unrestricted, javascriptMode: JavascriptMode.unrestricted,

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

@ -2,19 +2,25 @@ import 'package:flutter/material.dart';
import 'package:rich_editor/src/extensions/extensions.dart'; import 'package:rich_editor/src/extensions/extensions.dart';
import 'package:webview_flutter/webview_flutter.dart'; import 'package:webview_flutter/webview_flutter.dart';
class JavaScriptExecutorBase { class JavascriptExecutorBase {
static executeJavascript(WebViewController controller, String command) async { WebViewController? _controller;
return await controller.evaluateJavascript('editor.$command');
init(WebViewController controller) {
_controller = controller;
} }
static setHtml(WebViewController controller, String html) async { executeJavascript(String command) async {
return await _controller!.evaluateJavascript('editor.$command');
}
setHtml(String html) async {
String? baseUrl; String? baseUrl;
await executeJavascript( await executeJavascript(
controller, "setHtml('" + encodeHtml(html) + "', '$baseUrl');"); "setHtml('" + encodeHtml(html) + "', '$baseUrl');");
} }
static getHtml(WebViewController controller) async { getHtml() async {
String? html = await executeJavascript(controller, 'getEncodedHtml()'); String? html = await executeJavascript('getEncodedHtml()');
String? decodedHtml = Uri.decodeFull(html!); String? decodedHtml = Uri.decodeFull(html!);
if (decodedHtml.startsWith('"') && decodedHtml.endsWith('"')) { if (decodedHtml.startsWith('"') && decodedHtml.endsWith('"')) {
decodedHtml = decodedHtml.substring(1, decodedHtml.length - 1); decodedHtml = decodedHtml.substring(1, decodedHtml.length - 1);
@ -23,104 +29,136 @@ class JavaScriptExecutorBase {
} }
// Text commands // Text commands
static undo(WebViewController controller) async { undo() async {
await executeJavascript(controller, "undo()"); await executeJavascript("undo()");
} }
static redo(WebViewController controller) async { redo() async {
await executeJavascript(controller, "redo()"); await executeJavascript("redo()");
} }
static setBold(WebViewController controller) async { setBold() async {
await executeJavascript(controller, "setBold()"); await executeJavascript("setBold()");
} }
static setItalic(WebViewController controller) async { setItalic() async {
await executeJavascript(controller, "setItalic()"); await executeJavascript("setItalic()");
} }
static setUnderline(WebViewController controller) async { setUnderline() async {
await executeJavascript(controller, "setUnderline()"); await executeJavascript("setUnderline()");
} }
static setSubscript(WebViewController controller) async { setSubscript() async {
await executeJavascript(controller, "setSubscript()"); await executeJavascript("setSubscript()");
} }
static setSuperscript(WebViewController controller) async { setSuperscript() async {
await executeJavascript(controller, "setSuperscript()"); await executeJavascript("setSuperscript()");
} }
static setStrikeThrough(WebViewController controller) async { setStrikeThrough() async {
await executeJavascript(controller, "setStrikeThrough()"); await executeJavascript("setStrikeThrough()");
} }
static setTextColor(WebViewController controller, Color? color) async { setTextColor(Color? color) async {
String? hex = color!.toHexColorString(); String? hex = color!.toHexColorString();
await executeJavascript(controller, "setTextColor('$hex')"); await executeJavascript("setTextColor('$hex')");
} }
static setFontName(WebViewController controller, String fontName) async { setFontName(String fontName) async {
await executeJavascript(controller, "setFontName('$fontName')"); await executeJavascript("setFontName('$fontName')");
} }
static setFontSize(WebViewController controller, int fontSize) async { setFontSize(int fontSize) async {
if (fontSize < 1 || fontSize > 7) { if (fontSize < 1 || fontSize > 7) {
throw ("Font size should have a value between 1-7"); throw ("Font size should have a value between 1-7");
} }
await executeJavascript(controller, "setFontSize('$fontSize')"); await executeJavascript("setFontSize('$fontSize')");
} }
static setHeading(WebViewController controller, int heading) async { setHeading(int heading) async {
await executeJavascript(controller, "setHeading('$heading')"); await executeJavascript("setHeading('$heading')");
} }
static setFormattingToParagraph(WebViewController controller) async { setFormattingToParagraph() async {
await executeJavascript(controller, "setFormattingToParagraph()"); await executeJavascript("setFormattingToParagraph()");
} }
static setPreformat(WebViewController controller) async { setPreformat() async {
await executeJavascript(controller, "setPreformat()"); await executeJavascript("setPreformat()");
} }
static setBlockQuote(WebViewController controller) async { setBlockQuote() async {
await executeJavascript(controller, "setBlockQuote()"); await executeJavascript("setBlockQuote()");
} }
static removeFormat(WebViewController controller) async { removeFormat() async {
await executeJavascript(controller, "removeFormat()"); await executeJavascript("removeFormat()");
} }
static setJustifyLeft(WebViewController controller) async { setJustifyLeft() async {
await executeJavascript(controller, "setJustifyLeft()"); await executeJavascript("setJustifyLeft()");
} }
static setJustifyCenter(WebViewController controller) async { setJustifyCenter() async {
await executeJavascript(controller, "setJustifyCenter()"); await executeJavascript("setJustifyCenter()");
} }
static setJustifyRight(WebViewController controller) async { setJustifyRight() async {
await executeJavascript(controller, "setJustifyRight()"); await executeJavascript("setJustifyRight()");
} }
static setJustifyFull(WebViewController controller) async { setJustifyFull() async {
await executeJavascript(controller, "setJustifyFull()"); await executeJavascript("setJustifyFull()");
} }
static setIndent(WebViewController controller) async { setIndent() async {
await executeJavascript(controller, "setIndent()"); await executeJavascript("setIndent()");
} }
static setOutdent(WebViewController controller) async { setOutdent() async {
await executeJavascript(controller, "setOutdent()"); await executeJavascript("setOutdent()");
} }
static insertBulletList(WebViewController controller) async { insertBulletList() async {
await executeJavascript(controller, "insertBulletList()"); await executeJavascript("insertBulletList()");
} }
static insertNumberedList(WebViewController controller) async { insertNumberedList() async {
await executeJavascript(controller, "insertNumberedList()"); await executeJavascript("insertNumberedList()");
}
// Insert element
insertLink(String url, String title) async {
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.
/// Rotation can be one of the following values: 0, 90, 180, 270.
insertImage(String url, String alt,
String? width, String? height, int? rotation) async {
if (rotation == null) rotation = 0;
await executeJavascript(
"insertImage('$url', '$alt', '$width', '$height', $rotation)",
);
}
insertCheckbox(String text) async {
await executeJavascript("insertCheckbox('$text')");
}
insertHtml(String html) async {
String? encodedHtml = encodeHtml(html);
await executeJavascript("insertHtml('$encodedHtml')");
}
makeImagesResizeable() async {
await executeJavascript("makeImagesResizeable()");
}
disableImageResizing() async {
await executeJavascript("disableImageResizing()");
} }
static decodeHtml(String html) { static decodeHtml(String html) {

28
lib/src/widgets/tabs.dart
View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:rich_editor/src/utils/constants.dart';
import 'package:rich_editor/src/models/button.dart'; import 'package:rich_editor/src/models/button.dart';
import 'package:rich_editor/src/utils/constants.dart';
import 'package:rich_editor/src/utils/javascript_executor_base.dart';
import 'package:rich_editor/src/widgets/tab_button.dart'; import 'package:rich_editor/src/widgets/tab_button.dart';
import 'package:webview_flutter/webview_flutter.dart'; import 'package:webview_flutter/webview_flutter.dart';
@ -9,8 +10,13 @@ class GroupedTab extends StatelessWidget {
GroupedTab({this.controller}); GroupedTab({this.controller});
JavascriptExecutorBase javascriptExecutorBase = JavascriptExecutorBase();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (controller != null) {
javascriptExecutorBase.init(controller!);
}
return Container( return Container(
color: Color(0xff424242), color: Color(0xff424242),
height: 59.0, height: 59.0,
@ -26,12 +32,24 @@ class GroupedTab extends StatelessWidget {
icon: button.icon, icon: button.icon,
onTap: () async { onTap: () async {
print('BOLDDD'); print('BOLDDD');
// await controller?.evaluateJavascript('editor.undo()'); javascriptExecutorBase.setBold();
await controller?.evaluateJavascript('editor.setBold()'); String? html = await javascriptExecutorBase.getHtml();
String? html = await controller?.evaluateJavascript('editor.getEncodedHtml()'); print(html!);
print(Uri.decodeFull(html!));
}, },
) )
// TabButton(
// icon: Icons.link,
// onTap: () async {
// javascriptExecutorBase.insertLink(
// 'https://github.com/JideGuru/rich_editor', 'git');
// },
// ),
// TabButton(
// icon: Icons.format_bold,
// onTap: () async {
// javascriptExecutorBase.setBold();
// },
// )
], ],
), ),
), ),