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

编程问答 2022-08-14

问题描述

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

Froala官方文档仅在jQuery中没有说明如何在React中做到这一点。

解决方法

声明如下所示的全局变量

private _ref: any;

渲染Froala编辑器：

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

,

您也可以尝试：

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

或jQuery方式：

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