Flutter : Use Froala-editor in Flutter web

user_10269812 0
Viewed 1269

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.

flutter-web dart flutter
1 Answers

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/froala-editor@3.1.0/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/froala-editor@3.1.0/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 !

user_87071110
Related