Flutter : 在 Flutter web 中使用 Froala-editor

Question

我想在 flutter web 中使用富文本编辑器，但在 flutter web 中找不到类似的东西。所以我想如果我能在 flutter web 中实现 froala-editor。那么是否有可能将 froala-editor javascript 库插入 flutter web.

https://froala.com/wysiwyg-editor/

是否可以在 flutter web 中使用 froala-editor 或者是否可以在 flutter web 中使用富文本编辑器？

提前致谢。

Answer 1

是的，这是可能的伙计！但是在 Flutter web 稳定之前，您可以暂时使用它。

Hack 是你可以在普通的编辑器中使用 froala 或 Quill html，你可以在 Flutter IFrame 元素中呈现它，你可以通过 Js Connector 传递数据，反之亦然。

此处示例代码：

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>",
        }, "*");

很好 go.Happy 编码！

Flutter : 在 Flutter web 中使用 Froala-editor

Flutter : Use Froala-editor in Flutter web

dart

flutter

flutter-web