How to implement tinymce in vue in a way eslint doesn't throw "tinymce is not defined error"?

Question

I'm trying to make tinymce and eslint work together in a vue app, but every time I try to use something like tinymce.activeEditor..., eslint throws the error 'tinymce' is not defined when building. If I disable eslint, the app is built fine and I can use tinymce.activeEditor... normally. Since tinymce is get from the cloud, how can I define it inside the app to avoid eslint throwing that error?

Answer 1

To be clear what you are seeing is simply that eslint - based on how it is configured - does not want you to reference undefined variables. This is not a TinyMCE issue per se but likely relevant if you are using TinyMCE Cloud to load TinyMCE as your JavaScript code is not defining a tinymce variable.

There are a few ways you could choose to "fix" eslint complaining:

1 - Access tinymce through the global window object:

window.tinymce

2 - Wrap your code with a directive for eslint to not check for undefined variables:

/*eslint-disable no-undef*/
...
/*eslint-enable no-undef*/

https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments

3 - Define a global in your .eslintrc file

{
  "globals": {
    "tinymce": true
  }
}

https://eslint.org/docs/user-guide/configuring#specifying-globals