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;
LocalServer? localServer;
@override
void initState() {
super.initState();
@ -27,15 +28,14 @@ class _RichEditorState extends State<RichEditor> {
Widget build(BuildContext context) {
return Column(
children: [
GroupedTab(
controller: _controller,
),
GroupedTab(controller: _controller),
Flexible(
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) {
_controller = controller;
// print();
print('WebView created');
setState(() {});
},
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:webview_flutter/webview_flutter.dart';
class JavaScriptExecutorBase {
static executeJavascript(WebViewController controller, String command) async {
return await controller.evaluateJavascript('editor.$command');
class JavascriptExecutorBase {
WebViewController? _controller;
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;
await executeJavascript(
controller, "setHtml('" + encodeHtml(html) + "', '$baseUrl');");
"setHtml('" + encodeHtml(html) + "', '$baseUrl');");
}
static getHtml(WebViewController controller) async {
String? html = await executeJavascript(controller, 'getEncodedHtml()');
getHtml() async {
String? html = await executeJavascript('getEncodedHtml()');
String? decodedHtml = Uri.decodeFull(html!);
if (decodedHtml.startsWith('"') && decodedHtml.endsWith('"')) {
decodedHtml = decodedHtml.substring(1, decodedHtml.length - 1);
@ -23,104 +29,136 @@ class JavaScriptExecutorBase {
}
// Text commands
static undo(WebViewController controller) async {
await executeJavascript(controller, "undo()");
undo() async {
await executeJavascript("undo()");
}
static redo(WebViewController controller) async {
await executeJavascript(controller, "redo()");
redo() async {
await executeJavascript("redo()");
}
static setBold(WebViewController controller) async {
await executeJavascript(controller, "setBold()");
setBold() async {
await executeJavascript("setBold()");
}
static setItalic(WebViewController controller) async {
await executeJavascript(controller, "setItalic()");
setItalic() async {
await executeJavascript("setItalic()");
}
static setUnderline(WebViewController controller) async {
await executeJavascript(controller, "setUnderline()");
setUnderline() async {
await executeJavascript("setUnderline()");
}
static setSubscript(WebViewController controller) async {
await executeJavascript(controller, "setSubscript()");
setSubscript() async {
await executeJavascript("setSubscript()");
}
static setSuperscript(WebViewController controller) async {
await executeJavascript(controller, "setSuperscript()");
setSuperscript() async {
await executeJavascript("setSuperscript()");
}
static setStrikeThrough(WebViewController controller) async {
await executeJavascript(controller, "setStrikeThrough()");
setStrikeThrough() async {
await executeJavascript("setStrikeThrough()");
}
static setTextColor(WebViewController controller, Color? color) async {
setTextColor(Color? color) async {
String? hex = color!.toHexColorString();
await executeJavascript(controller, "setTextColor('$hex')");
await executeJavascript("setTextColor('$hex')");
}
static setFontName(WebViewController controller, String fontName) async {
await executeJavascript(controller, "setFontName('$fontName')");
setFontName(String fontName) async {
await executeJavascript("setFontName('$fontName')");
}
static setFontSize(WebViewController controller, int fontSize) async {
setFontSize(int fontSize) async {
if (fontSize < 1 || fontSize > 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 {
await executeJavascript(controller, "setHeading('$heading')");
setHeading(int heading) async {
await executeJavascript("setHeading('$heading')");
}
static setFormattingToParagraph(WebViewController controller) async {
await executeJavascript(controller, "setFormattingToParagraph()");
setFormattingToParagraph() async {
await executeJavascript("setFormattingToParagraph()");
}
static setPreformat(WebViewController controller) async {
await executeJavascript(controller, "setPreformat()");
setPreformat() async {
await executeJavascript("setPreformat()");
}
static setBlockQuote(WebViewController controller) async {
await executeJavascript(controller, "setBlockQuote()");
setBlockQuote() async {
await executeJavascript("setBlockQuote()");
}
static removeFormat(WebViewController controller) async {
await executeJavascript(controller, "removeFormat()");
removeFormat() async {
await executeJavascript("removeFormat()");
}
static setJustifyLeft(WebViewController controller) async {
await executeJavascript(controller, "setJustifyLeft()");
setJustifyLeft() async {
await executeJavascript("setJustifyLeft()");
}
static setJustifyCenter(WebViewController controller) async {
await executeJavascript(controller, "setJustifyCenter()");
setJustifyCenter() async {
await executeJavascript("setJustifyCenter()");
}
static setJustifyRight(WebViewController controller) async {
await executeJavascript(controller, "setJustifyRight()");
setJustifyRight() async {
await executeJavascript("setJustifyRight()");
}
static setJustifyFull(WebViewController controller) async {
await executeJavascript(controller, "setJustifyFull()");
setJustifyFull() async {
await executeJavascript("setJustifyFull()");
}
static setIndent(WebViewController controller) async {
await executeJavascript(controller, "setIndent()");
setIndent() async {
await executeJavascript("setIndent()");
}
static setOutdent(WebViewController controller) async {
await executeJavascript(controller, "setOutdent()");
setOutdent() async {
await executeJavascript("setOutdent()");
}
static insertBulletList(WebViewController controller) async {
await executeJavascript(controller, "insertBulletList()");
insertBulletList() async {
await executeJavascript("insertBulletList()");
}
static insertNumberedList(WebViewController controller) async {
await executeJavascript(controller, "insertNumberedList()");
insertNumberedList() async {
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) {

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

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