Calling methods in Froala wysiwyg editor for React

Question

I'm using a rich text editor called Froala, in its React version. The docs are intended for the JQuery one. From the little that is written about React, i found these instructions:

Events and Methods Events can be passed in with the options, with a key events and object where the key is the event name and the value is the callback function.

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

Using the editor instance from the arguments of the callback you can call editor methods as described in the method docs. Froala events are described in the events docs.

I understand how i can use events, but not calling methods. Does it mean that i can access the editor instance, only from an event? Can someone clarify this? For instance, i would like to use the html.insert() method, as described here:

$('.selector').froalaEditor('html.insert', 'foo bar', true);

How would that be used with the Froala React component?

i.brod i.brod · Accepted Answer · 2018-04-30T11:06:31

In case anybody is interested, i implemented an easy workaround:

I use the "initialized" event, just to get the Froala instance, and place a reference to it in my class::

'froalaEditor.initialized' : (e, editor)=> {
    this.froalaInstance = editor;

  }

Now i can access the Froala instance...

Calling methods in Froala wysiwyg editor for React

2 Answers