Vue 和 TinyMCE 问题答案

【问题标题】：Vue and TinyMCE IssueVue 和 TinyMCE 问题
【发布时间】：2020-07-18 21:34:06
【问题描述】：

我正在尝试将 TinyMCE 编辑器集成到我的 Vue 应用程序中。从开发人员工具控制台我可以访问 tinymce 对象并对其进行操作。例如：

tinymce.activeEditor.selection.setContent('I am a replacement')

以上代码将替换 TinyMCE 编辑器中的选定文本。我想在 Vue 中（在多个组件中）使用 tinymce 对象，但我不确定如何访问它。当我将上述代码输入函数时，我得到的确切错误是：error 'tinymce' is not defined no-undef。

任何帮助将不胜感激。谢谢。

【问题讨论】：

【解决方案1】：

根本看不到任何代码，很难确切说明为什么会发生这种情况。记录您如何实例化 TinyMCE 会有所帮助。

根据错误消息，我假设您正在使用 TinyMCE Vue 组件/包装器将 TinyMCE 注入到您的 Vue 组件中。默认情况下，直到运行时才真正加载核心 TinyMCE 编辑器 - 那时它通过 TinyMCE 云服务器加载事物。

您看到的错误是您的 linting 工具 (eslint?) 抱怨您试图调用变量 tinymce 但该变量未在任何地方定义。

您可以选择几种方法来“修复”eslint 抱怨：

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

window.tinymce

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

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

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

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

【讨论】：

感谢您抽出宝贵时间提供帮助。根据您提供的信息，我能够找到解决方案。我在“eslintConfig”下的 package.json 中为 globals 添加了“tinymce”：true。 linter 不再抛出该错误。再次感谢。
如果可行，您能否将此答案标记为正确，以免其他人花时间尝试解决此问题？谢谢。