Flutter : 在 Flutter web 中使用 Froala-editor答案

【问题标题】：Flutter : Use Froala-editor in Flutter webFlutter : 在 Flutter web 中使用 Froala-editor
【发布时间】：2020-09-06 09:35:42
【问题描述】：

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

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

是否可以在 Flutter Web 中使用 froala-editor 或者是否有其他方法可以在 Flutter Web 中获得富文本编辑器？

提前致谢。

【问题讨论】：

嘿兄弟，你找到在flutter web中插入的方法了吗？
@KamalPanara 你可以看到我的回答，稍后谢谢我！
@sivaram-siva 谢谢！

标签： flutter dart flutter-web

【解决方案1】：

是的，有可能是伴侣！但在 Flutter web 稳定之前，您可以暂时使用它。

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

这里是示例代码：

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

是的，很好去。快乐的编码！

【讨论】：

我收到很多错误，请您详细说明如何使用您提供的代码。感谢您的帮助！