如何以 eslint 不抛出 "tinymce is not defined error" 的方式在 vue 中实现 tinymce？

Question

我试图让 tinymce 和 eslint 在 vue 应用程序中协同工作，但每次我尝试使用 tinymce.activeEditor... 之类的东西时，eslint 在构建时都会抛出错误 'tinymce' is not defined。如果我禁用 eslint，应用程序构建良好，我可以正常使用 tinymce.activeEditor...。由于 tinymce 是从云端获取的，我如何在应用程序中定义它以避免 eslint 抛出该错误？

Answer 1

要清楚您所看到的只是 eslint - 基于其配置方式 - 不希望您引用未定义的变量。这本身不是 TinyMCE 问题，但如果您使用 TinyMCE Cloud 加载 TinyMCE，则可能相关，因为您的 JavaScript 代码未定义 tinymce 变量。

您可以选择几种方式"fix" eslint抱怨：

1 - 通过全局 window 对象访问 tinymce：

window.tinymce

2 - 使用 eslint 指令包装您的代码以不检查未定义的变量：

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

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

3 - 在您的 .eslintrc 文件中定义一个全局变量

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

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

Answer 2

4 - 在文件开头添加特殊注释。

/* global tinymce, _, wpLink */

如何以 eslint 不抛出 "tinymce is not defined error" 的方式在 vue 中实现 tinymce？

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

tinymce

eslint

vue.js