Wysiwyg-editor: FroalaEditor methods not available after instantiating

[onhate]

Expected behavior.

after instantiating FroalaEditor I would expect to access the methods of the editor in the instance just created.

this.froala = new FroalaEditor(this.editor.nativeElement, this.options);
this.froala.html.set(this.value);

Actual behavior.

methods are not available in the instance.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'set' of undefined
TypeError: Cannot read property 'set' of undefined

When printing Object.keys(this.editor) those are the only keys I see

["id", "$", "opts", "sid", "shared", "$oel", "o_doc", "o_win", "c_scroll", "_original_html", "$box", "$el", "el", "$wp"]

Steps to reproduce the problem.

npm install --save froala-editor;
--
import FroalaEditor from 'froala-editor';

var editor = new FroalaEditor(...);
editor.html.set('value');

Editor version.

froala-editor: ^3.0.0-beta.1

[stefanneculai]

That is because the editor is not initialized yet at that moment. You should change it to:

```js
var editor = new FroalaEditor(this.editor.nativeElement, this.options, function () {
editor.html.set(this.value);
});

[onhate]

Cool, I'll try it, but one point would be good to mention this in the docs for the methods section, they are all like this

var editor = new FroalaEditor('.selector');
editor.align.apply('left');

https://www.froala.com/wysiwyg-editor/docs/events

[kevinhq]

That is because the editor is not initialized yet at that moment. You should change it to:

var editor = new FroalaEditor(this.editor.nativeElement, this.options, function () {
   editor.html.set(this.value);
});

Then, how to update HTML on ajax success function? Should we initialize the editor again? I think it's a common use-case to update the content of the editor on ajax success

On v2, we can do something like this

$('#editor_selector').froalaEditor('html.set',data);

But on v3, when I do something like this:

editor.html.set(data)

It's raising error though the editor is already loaded on the page, which means it's already instantiated. So, it's already initialized, right?

[kevinhq]

Updates:

Here is what works for us:

• Re-instantiation inside AJAX success: var something = new FroalaEditor(...)
• Call it using this syntax: something.html.set(data);

Though it's a bit weird because we need to do re-instantiation of the editor. Wondering if this is the correct way or maybe it's kind of hack?