Vue中引入UEditorPlus后编辑器不渲染或报错“UEditor is not defined”

Question

在 Vue 项目（尤其是 Vue 2 或 Vue 3 + Options API/Composition API 混用场景）中引入 UEditorPlus 时，常出现编辑器容器空白、控制台报错 `ReferenceError: UEditor is not defined`。根本原因多为：① UEditorPlus 的全局脚本未正确加载或加载时机早于 Vue 实例初始化（如在 `mounted` 中直接调用 `UEditor.create()`，但 `window.UEditor` 尚未挂载）；② 使用了错误的引入方式（如 ES Module 方式 import 但未配置 script-loader 或手动注入）；③ 多次重复加载导致全局变量覆盖或冲突；④ 在 SSR 环境（如 Nuxt）中未做客户端专属处理，服务端执行时访问 `window` 报错。该问题非 UEPlus 自身缺陷，而是 Vue 的响应式生命周期与第三方富文本脚本异步加载机制不匹配所致，需精准控制加载顺序、作用域及执行环境。

Answer 1

```html

一、现象层：典型错误表现与诊断线索

开发者在 Vue 组件中调用 UEditor.create('#editor') 后，控制台抛出 ReferenceError: UEditor is not defined，且 DOM 中编辑器容器（如 <div id="editor"></div>）渲染为空白。Vue DevTools 显示组件已挂载，但 window.UEditor 为 undefined。该现象在 Vue 2 的 mounted 钩子、Vue 3 的 onMounted 或 setup() 中高频复现，尤其在热更新（HMR）后首次加载时更易触发。

二、加载时序层：脚本注入时机与 Vue 生命周期错位

• 根本矛盾：UEditorPlus 是依赖全局 window.UEditor 的传统 IIFE 脚本，其执行需阻塞式完成；而 Vue 的 mounted / onMounted 并不保证外部 script 已就绪。
• 典型陷阱：在 mounted() 中直接调用 UEditor.create()，但 <script src="UEditorPlus.min.js"></script> 尚未解析完毕（网络延迟、缓存失效、CDN抖动）。
• 验证方法：在控制台执行 typeof window.UEditor，返回 "undefined" 即确认加载失败。

三、引入方式层：ES Module vs 全局脚本的语义鸿沟

引入方式	适用场景	风险点
import 'ueditor-plus'	Webpack + script-loader	未配置 loader 时，模块被当作普通 ES 模块解析，window.UEditor 不会被挂载
import UEditor from 'ueditor-plus'	UMD 构建产物（需手动 patch）	UEditorPlus 官方未提供标准 ESM 导出，强行 import 导致 UEditor 未注册到全局

四、运行环境层：SSR 与 CSR 的边界撕裂

在 Nuxt 2/3 或 Vue SSR 项目中，若在 created() 或 setup() 中无条件访问 window.UEditor，服务端渲染阶段将抛出 ReferenceError: window is not defined。即使使用 process.client 判断，亦可能因 UEditorPlus.min.js 未在客户端动态加载而继续报 UEditor is not defined。

五、并发控制层：多实例重复加载引发的变量覆盖

// ❌ 危险模式：多个组件同时执行以下逻辑
if (!window.UEditor) {
  const script = document.createElement('script')
  script.src = '/static/UEditorPlus.min.js'
  document.head.appendChild(script) // 多次 append → 多次执行 IIFE → 全局变量重置
}

六、解决方案全景图

graph LR
A[判断运行环境] --> B{isClient?}
B -->|否| C[跳过所有 UEditor 相关逻辑]
B -->|是| D[检查 window.UEditor 是否存在]
D -->|是| E[直接 create 编辑器]
D -->|否| F[动态加载 script 标签]
F --> G[监听 load 事件]
G --> H[调用 UEditor.create]

七、生产级封装建议（Vue 3 Composition API）

export function useUEditor(selector: string, config: any = {}) {
  const editorRef = ref(null)
  
  onMounted(() => {
    if (typeof window === 'undefined') return
    
    const loadUEditor = () => {
      if ((window as any).UEditor) {
        editorRef.value = (window as any).UEditor.create(selector, config)
        return
      }
      
      return new Promise((resolve) => {
        const script = document.createElement('script')
        script.src = '/static/UEditorPlus.min.js'
        script.onload = () => resolve(loadUEditor())
        document.head.appendChild(script)
      })
    }
    
    loadUEditor()
  })
  
  onBeforeUnmount(() => {
    if (editorRef.value?.destroy) editorRef.value.destroy()
  })
  
  return { editorRef }
}

八、Vue 2 Options API 兼容方案

在 mounted() 中使用 Promise.allSettled 等待脚本加载，并通过 Vue.nextTick 延迟创建：

mounted() {
  this.initUEditor()
},
methods: {
  async initUEditor() {
    if (typeof window !== 'undefined' && !(window as any).UEditor) {
      await new Promise(resolve => {
        const s = document.createElement('script')
        s.src = '/static/UEditorPlus.min.js'
        s.onload = resolve
        document.head.appendChild(s)
      })
    }
    this.$nextTick(() => {
      if ((window as any).UEditor) {
        this.editor = (window as any).UEditor.create('#editor', this.config)
      }
    })
  }
}

九、构建与部署加固策略

• Webpack：配置 externals: { 'ueditor-plus': 'UEditor' }，确保不打包 UEditorPlus，强制走 CDN 或静态资源路径；
• Vite：使用 build.rollupOptions.external = ['ueditor-plus']，配合 <script> 标签注入；
• Nginx：对 /static/UEditorPlus.min.js 开启 HTTP/2 推送或强缓存（Cache-Control: public, max-age=31536000）；

十、调试工具链增强

推荐在开发环境注入如下辅助钩子，实现加载可观测性：

// utils/debug-ueditor.ts
export function trackUEditorLoad() {
  const originalDefine = (window as any).__define
  (window as any).__define = function(...args) {
    console.info('[UEditorPlus] Script loaded and defined')
    if (originalDefine) return originalDefine.apply(this, args)
  }
}

```