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

EN

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



Sample

  
  
  
  
 

    
    
  
  
  
  
    span.fr-emoticon{
      background-repeat: no-repeat !important;
      font-size: 28px;
    }
  
  
    (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;
             }
           }) 
 



// 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 sending data from dart",
        }, "*");