如何在 React 中获取 Froala 编辑器的实例？

Question

我想在我的 React 组件中获取 Froala 编辑器的实例。

官方 Froala 文档没有解释如何在 React 中执行此操作，仅 jQuery.

Answer 1

如下所示声明一个全局变量

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}
        />

现在，您可以在组件中使用这个全局变量来获取 Froala 编辑器的实例。如下所示。

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

要对其进行测试，请在单击按钮时调用函数：

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

Answer 2

您也可以试试：

var editor = document.getElementsByTagName('FroalaEditorComponent')[0]['data-froala.editor']

或jQuery方式：

var editor = $('FroalaEditorComponent')[0]['data-froala.editor']

如何在 React 中获取 Froala 编辑器的实例？

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

typescript

reactjs

sharepoint-online

froala

spfx