如何在React版Froala富文本编辑器中调用方法？

我懂你的烦恼——官方文档大多围着jQuery版本转，React相关的细节确实少得可怜。不过调用实例方法其实没那么复杂，核心就是先拿到编辑器的实例对象，下面给你梳理两种最常用的实现方式：

1. 通过React Ref获取实例（最通用方案） #

不管你用类组件还是函数组件，都可以借助React的Ref来获取Froala的编辑器实例，拿到之后就能调用官方文档里所有的方法了。

类组件示例 #

import React, { Component } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

class MyEditor extends Component {
  constructor(props) {
    super(props);
    // 创建Ref用于关联编辑器组件
    this.froalaEditorRef = React.createRef();
  }

  // 自定义调用实例方法的函数
  handleCallMethod = () => {
    // 获取编辑器实例
    const editorInstance = this.froalaEditorRef.current.getEditor();
    if (editorInstance) {
      // 调用你需要的方法，比如设置编辑器HTML内容
      editorInstance.html.set('<p>通过实例方法插入的内容</p>');
      // 也可以执行撤销操作
      // editorInstance.undo();
    }
  };

  render() {
    const options = {
      placeholder: "Edit Me",
      events : {
        'froalaEditor.focus' : function(e, editor) {
          console.log(editor.selection.get());
        }
      }
    };

    return (
      <div>
        <FroalaEditor
          ref={this.froalaEditorRef}
          options={options}
        />
        <button onClick={this.handleCallMethod}>点击调用实例方法</button>
      </div>
    );
  }
}

export default MyEditor;

函数组件（Hooks）示例 #

import React, { useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

const MyEditor = () => {
  // 创建Ref关联编辑器组件
  const froalaEditorRef = useRef(null);

  const handleCallMethod = () => {
    // 安全获取编辑器实例（可选链避免空值报错）
    const editorInstance = froalaEditorRef.current?.getEditor();
    if (editorInstance) {
      // 调用方法，比如获取当前编辑器的HTML内容
      const currentContent = editorInstance.html.get();
      console.log('当前编辑器内容:', currentContent);
    }
  };

  const options = {
    placeholder: "Edit Me",
    events : {
      'froalaEditor.focus' : function(e, editor) {
        console.log(editor.selection.get());
      }
    }
  };

  return (
    <div>
      <FroalaEditor
        ref={froalaEditorRef}
        options={options}
      />
      <button onClick={handleCallMethod}>获取编辑器内容</button>
    </div>
  );
};

export default MyEditor;

2. 在事件回调中直接使用实例 #

就像你给出的事件配置示例那样，所有Froala的事件回调函数都会自动传入editor参数——这个参数就是当前的编辑器实例，你可以直接在回调里调用方法：

options: { 
  placeholder: "Edit Me", 
  events : { 
    'froalaEditor.focus' : function(e, editor) {
      // 直接调用实例方法，比如给选中内容加粗
      editor.selection.set('<strong>' + editor.selection.get() + '</strong>');
    } 
  } 
}

小提示 #

• 调用方法前最好确认实例已经初始化完成，比如不要在组件刚挂载时立刻调用，优先放在用户交互触发的函数里，或者加个存在性判断。
• jQuery版本文档里的所有方法，比如selection.get()、html.set()、undo()等，拿到React版的实例后都可以直接用，两者的API是完全一致的。

内容的提问来源于stack exchange，提问作者i.brod