CODEWITHSUNDEEP
vue.jstinymceeslint
Rodrigo Silva
Rodrigo Silva

Reputation: 387

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

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?

Upvotes: 1

Views: 608

Answers (2)

Kostiantyn Petlia
Kostiantyn Petlia

Reputation: 145

4 - To add the special comment at the file beginning.

/* global tinymce, _, wpLink */

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13744

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

Upvotes: 5

Related Questions