How to get tinyymce instance? about tinymce-react HOT 21 CLOSED

@TinyMCE-User
@androb
@spocke
@fyrkant

from tinymce-react.

not tinymce instance. I can't use language_url , Because it will report an error with 'can't find tinymce'

from tinymce-react.

Are you using the tinymce-react component?

from tinymce-react.

@fyrkant yes,I use tinymce-react

from tinymce-react.

I'm not sure I understand the problem you are having, is tinymce not being loaded on the page or are you not able to find the tinymce instance? You should be able to set all setting as in vanilla tinymce in the init prop to the editor.

from tinymce-react.

I also think it would be great to get the editor instance. I need this instance to be able to insert content with setContent among other things. Today I'm using the global tinymce.activeEditor method but to be able to get the instance with a method (getEditor() maybe?) feels more intuitive.

from tinymce-react.

You can use the tinymce.get('ID') to get the instance of the editor, where the ID is the one you set on the component <Editor id="ID" />. Or use the editor as a controlled component: https://github.com/tinymce/tinymce-react#using-as-a-controlled-component

from tinymce-react.

Ah, sorry clicked the close button.

from tinymce-react.

It's just a matter of preference I guess. The setContent-call was just an example. I'm using more methods under the editor-object (https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/). It's nice to not being forced to use the global object when using the editor within a React component.

from tinymce-react.

Where would you want a getEditor method though, can't really put a method on the <Editor /> component right? 🤔

from tinymce-react.

I get the Editor instance by:
<Editor ref={node => this.references.editor = node} />

Then I would like to be able to use:
this.references.editor.getEditor().<api-method-here>

from tinymce-react.

I don't like using the ref prop like that, ref should only get the html element reference. You could use the setup callback in the init object to get a reference to the editor instead if you don't want to use the tinymce global. I think something like <Editor init={{ setup: (editor) => this.editor = editor }} /> should work.

from tinymce-react.

Ah I didn't think of that. That will work for me, thank you.

from tinymce-react.

Hello @fyrkant !
I'm using tinymce-react and i would like to make a simple button that apply a custom style (like a custom Bold or Italic button).
First i add my custom style

      style_formats: [
        {
          title: 'MyCustomStyle',
          block: 'div',
          classes: 'my-custom-class',
        },

then I add a custom button :

      setup: function(editor: Editor) {
        editor.ui.registry.addButton( 'MyCustomButton', {
          text: 'Apply custom style',
          onAction: function() {
            // editor have fire but no formatter 
            editor.formatter.toggle(btnName);
            editor.fire('change');
          },
        });
      },

Before react i was doing tinymce.activeEditor.formatter.toggle('MyCustomStyle') but I can't now... How can i apply a style from a button with react component (preferably without using ref or getEditor(id))? Is there a cleaner way to do so?

from tinymce-react.

@IamFonky You already have the editor in your example, right? editor.formatter.toggle('MyCustomStyle') If you need the editor somewhere else you could store a reference to the editor from the setup function and pass it around.

from tinymce-react.

Sure but as you can see in my comment, formatter doesn't exists on the editor object (I loged it to be sure but nope)

from tinymce-react.

Strange, the formatter should be available on the editor. I can see if I'm able to help you if you reproduce the issue here codesandbox

from tinymce-react.

Here's a printscreen.

I have to go now but i'll make a simple one on codesandbox tomorow to show you.

Thx for your quick answer!

from tinymce-react.

Here you are, you can see in the codebox console that there is no formatter at all ;)

https://codesandbox.io/s/fervent-rosalind-nugp0

from tinymce-react.

I see why now, the formatter along with some other parts are set up a bit later in the editors initialization process and are not available at that point. The editor fires an 'init'-event when everything is done and at that point it's possible for you to access the formatter. With tinymce-react this is possible to do in two ways, see here: https://codesandbox.io/s/naughty-matsumoto-ycjsq?fontsize=14

from tinymce-react.

Ok, that's perfect!
Thank you very much!

from tinymce-react.