Menu
I wanted to use a rich text editor in flutter web, but I could not find anything like that in flutter web. So I thought If I could implement the froala-editor in flutter web. So is there any possibility of inserting the froala-editor javascript library to flutter web.
https://froala.com/wysiwyg-editor/
Is it possible to use froala-editor in flutter web or Is there anythings else possible to get a rich text editor in flutter web?
Thanks in advance.
881
Yes it is possible mate! But you can use this as a temporarily until Flutter web goes stable.
The Hack is you can have that froala or Quill any editor in plain html and you can render it in Flutter IFrame element and you can pass the data via Js Connector vice versa.
Here Example Code :
import 'dart:js' as js;
js.JsObject connector;
js.IFrameElement element;
String createdViewId = 'map_element';
js.context["connect_content_to_flutter"] = (js.JsObject content) {
connector = content;
};
element = html.IFrameElement()
..src = "/assets/assets/editor.html"
..style.border = 'none';
ui.platformViewRegistry
.registerViewFactory(createdViewId, (int viewId) => element);
// SO the above code defines your plain html(Place inside the Project folder ex:assets/editor.html) and registered with UI, now you can use the HTMLElementView(Widget) to render the view in screen.
HtmlElementView(
viewType: createdViewId,
);
// Now in your html file
<!DOCTYPE html>
<html>
<title>Sample</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post">
<textarea id='edit' style="margin-top: 30px;"></textarea>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>
<style>
span.fr-emoticon{
background-repeat: no-repeat !important;
font-size: 28px;
}
</style>
<script>
(function () {
new FroalaEditor("#edit", {
theme: 'royal',
height: 450
})
})()
parent.connect_content_to_flutter && parent.connect_content_to_flutter(window)
function getValue(){
return $('#edit').val();
}
window.addEventListener("message", (message) => {
if (message.data.id === "value") {
quill.root.innerHTML = message.data.msg;
}
})
</script>
</body>
</html>
// Above parent connect to flutter is very important line that you should include because that is the one connecting to flutter and the window listener is listening for sending the data from flutter.
//so in your dart
connector.callMethod(
'getValue',
) as String;
element.contentWindow.postMessage({
'id': 'value',
'msg': "Hi /n Welcome <b>sending data from dart</b>",
}, "*");
Yeah good to go.Happy coding !
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
