v5 vue3 vite采用cdn引入时报错

[liushuai05]

bug 描述

报错如下 2个错误

TypeError: undefined has no properties
    <anonymous> index.vue:23

Uncaught (in promise) TypeError: undefined has no properties
    <anonymous> index.vue:23

我的cdn配置如下采用的（vite-plugin-cdn-import）

当我使用这个报错信息创建demo时，demo里出现了另一个bug

你预期的样子是？

理论上能加载才对，我配置的其他cdn比如element-plus都能正常加载wangEditor 就是不行

系统和浏览器及版本号

• 操作系统 manjaro 24
• 浏览器和版本 firefox 130.0

wangEditor 版本

5.1.23

demo 能否复现该 bug ？

不能(demo 出现了例外一个bug，无法加载Toolbar报Uncaught (in promise) TypeError: editor is undefined)

在线 demo

https://codesandbox.io/p/devbox/async-feather-42ysdn https://codesandbox.io/p/live/2c844e8b-2939-4ab3-836f-6781772c14ca

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug） 将demo跑起来即可看到 Uncaught (in promise) TypeError: editor is undefined错误，其他两个错误可以后面再说

[REI1208]

楼主解决了吗，我也遇到相同的问题

[cycleccc]

上面的 沙盒 demo 似乎没有正确复现 @REI1208 能帮忙起一个 复现 demo 吗

[liushuai05]

楼主解决了吗，我也遇到相同的问题

2种方案，因为cdn引入的包无法import到Editor（即使import到了也会报没定义） 1.cdn模式要采用原生html的方案，不能采用vue引入方式实现，目前没报错了，但我还没进行进一步处理 2.参考另一个包的解决方案，https://github.com/wangeditor-team/wangEditor-for-vue3/blob/main/src/pages/BasicDemo.vue

方案1参考如下demo或者代码片段： https://codesandbox.io/p/live/2c844e8b-2939-4ab3-836f-6781772c14ca 代码如下：

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import {
  onBeforeUnmount,
  ref,
  shallowRef,
  onMounted,
  nextTick,
  watch,
} from "vue";
// import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// const { createEditor, createToolbar } = window.WangEditorForVue;
const { createEditor, createToolbar } = window.wangEditor;

// 模拟 ajax 异步获取内容
onMounted(() => {
  nextTick(() => {
    const editorConfig = {
      placeholder: "Type here...",
      onChange(editor) {
        const html = editor.getHtml();
        console.log("editor content", html);
        // 也可以同步到 <textarea>
      },
    };

    const editor = createEditor({
      selector: "#editor-container",
      html: "<p><br>测试内容</p>",
      config: editorConfig,
      mode: "default", // or 'simple'
    });

    const toolbarConfig = {};

    const toolbar = createToolbar({
      editor,
      selector: "#toolbar-container",
      config: toolbarConfig,
      mode: "default", // or 'simple'
    });
  });
});
</script>

<template>
  <div>
    <div id="editor—wrapper">
      <div id="toolbar-container"><!-- 工具栏 --></div>
      <div id="editor-container"><!-- 编辑器 --></div>
    </div>
  </div>
</template>
<style>
#editor—wrapper {
  border: 1px solid #ccc;
  z-index: 100; /* 按需定义 */
}
#toolbar-container {
  border-bottom: 1px solid #ccc;
}
#editor-container {
  height: 500px;
}
</style>