4

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
  • 3,993
  • 11
  • 38
  • 74

2 Answers2

0

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

i.brod
  • 3,993
  • 11
  • 38
  • 74
0

If anyone is still interested in how to achieve this take a look at

https://froala.com/wysiwyg-editor/docs/framework-plugins/react/

It's pretty straight forward to define methods in the config object.

ChrisP
  • 9,796
  • 21
  • 77
  • 121