VueJS调用外部MediumEditor库函数报错：MediumEditor未定义

嘿，我明白你折腾了一整天的感受，这种全局脚本在Vue模块化环境里的调用确实容易踩坑，我来给你几个可行的解决办法：

方法一：直接通过window对象访问全局变量 #

这类没有用ES模块导出的外部脚本，加载后会把MediumEditor挂载到浏览器的全局window对象上。但Vue组件的<script>是模块化作用域，直接写MediumEditor会找不到，所以我们需要明确从window上获取它：

修改你的组件代码如下：

<template>
  <!-- 先确保存在可编辑的DOM元素 -->
  <div class="editable">点击这里开始编辑</div>
</template>

<script src="/static/medium-editor.min.js"></script>
<script>
export default {
  name: 'App',
  mounted() {
    // 从window对象中获取MediumEditor
    const editor = new window.MediumEditor('.editable', {
      toolbar: {
        buttons: ['bold', 'italic', 'underline', 'anchor']
      }
    });
    console.log('编辑器初始化完成', editor);
  }
}
</script>

方法二：动态加载脚本（避免加载顺序问题） #

如果担心脚本加载时机和组件初始化时机冲突，可以在组件的mounted钩子中动态创建脚本标签，等脚本加载完成后再初始化编辑器：

<template>
  <div class="editable">点击这里开始编辑</div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    const script = document.createElement('script');
    script.src = '/static/medium-editor.min.js';
    // 脚本加载完成后初始化编辑器
    script.onload = () => {
      const editor = new window.MediumEditor('.editable', {
        toolbar: {
          buttons: ['bold', 'italic', 'underline', 'anchor']
        }
      });
      console.log('编辑器初始化完成');
    };
    document.body.appendChild(script);
  }
}
</script>

方法三：Vue CLI项目配置全局依赖（进阶） #

如果你用的是Vue CLI创建的项目，可以在public/index.html中引入脚本（放在<body>标签末尾），然后在组件中直接通过window.MediumEditor调用，这样能确保脚本在所有组件加载前就已加载完成：

在public/index.html中添加：

<body>
  <div id="app"></div>
  <!-- 放在body末尾确保DOM加载完成 -->
  <script src="/static/medium-editor.min.js"></script>
</body>

然后组件代码和方法一一样，直接用window.MediumEditor即可。

为什么原来的方法会报错？ #

Vue组件的<script>是ES模块，作用域被隔离了，不像传统的全局脚本那样共享变量。你通过<script>标签加载的medium-editor.min.js会把MediumEditor挂载到全局的window对象上，但组件模块内部默认找不到这个全局变量，所以必须通过window来访问它。

内容的提问来源于stack exchange，提问作者Chandra