reactjstypescriptsharepoint-onlinespfxfroala

How to get the Froala editor's instance in React?

I want to get the instance of the Froala editor in my React components.

Official Froala documentation does not explain how to do that in React, only jQuery.

Solution

  • Declare a global variable as shown below

    private _ref: any;

    Render the Froala editor:

    <FroalaEditorComponent
            ref={(ref) => (this._ref= ref)} //create a ref to the instance
            tag="textarea"
            model={html}
            onModelChange={onChange}
            config={config}
        />

    Now, you can use this global variable across your component to get the Froala editor's instance. Something like below.

    const GetContent = () => {
       alert(this._ref.editor.html.get());
    };

    To test it, call the function on a button click:

    <button type="button" onClick={GetContent}>Get Content</button>