时间戳

首页 > 解决方案 > Flutter : 在 Flutter web 中使用 Froala-editor

flutter - Flutter : 在 Flutter web 中使用 Froala-editor

问题描述

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

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

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

提前致谢。

标签： flutterdartflutter-web

解决方案

是的，这是可能的伴侣！但是你可以暂时使用它，直到 Flutter web 稳定。

技巧是你可以在纯 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>",
        }, "*");

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

推荐阅读