Froala Editor und Reagieren dynamischen Import

Question

Ich benutze Froala Editor in meiner Create-Reagieren-App-basierten Webseite. Wenn ich ein Bündel erstelle, zeigt es, dass froala_editor.pkgd.min.js eine beträchtliche Menge an Bündelgröße einnimmt. Um dieses Problem zu beheben, entschied ich mich für den dynamischen Import, der hier beschrieben wird https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html. So habe ich eine HOC

import React, { Component } from 'react'; 

import Callback from '../Callback'; 

function asyncComponent(importComponent) { 
    class AsyncComponent extends Component { 
     constructor(props) { 
      super(props); 

      this.state = { 
       component: null 
      }; 
     } 

     async componentWillMount() { 
      const { default: component } = await importComponent(); 

      this.setState({ 
       component: component 
      }); 
     } 

     render() { 
      const C = this.state.component; 

      return C ? <C {...this.props} /> : <Callback />; 
     } 
    } 

    return AsyncComponent; 
} 

export default asyncComponent; 

und enthalten den Editor

const Editor = asyncComponent(() => import('../FroalaEditorComponent')); 

Ich würde sagen, dass ein Teil gelöst bunlde wurde, wie ich zwei Stücke zu bekommen, ein enthält Editor und andere nicht. Und es hat Ladezeiten verbessert.

Aber ich habe ein anderes Problem mit solchen Setup. Wenn die Seite mit einem Editor geladen wird, werden nur wenige Symbole angezeigt.

Die anderen Tasten erscheinen, wenn ich Konsolenfenster in Chrome zu öffnen, nicht sicher, warum ein solches Verhalten.

Answer 1

Es sieht so aus, als ob der Editor initialisiert wird, bevor alle Editor-Plugins geladen sind. Alle Editor-Plugins sollten vor der Initialisierung geladen werden, damit die Schaltflächen in der Symbolleiste angezeigt werden.