wangEditor icon indicating copy to clipboard operation
wangEditor copied to clipboard

在Nuxt3,vue3中使用报错

Open ushier opened this issue 2 years ago • 6 comments

问题描述

按照vue方式接入后,在nuxt环境下会报错“Element is not defined”,

image

wangEditor 版本

"@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.12",

是否查阅了文档 ?

是,已经查阅过文档,未解决问题。

最小成本的复现步骤

image

ushier avatar Feb 18 '23 08:02 ushier

第一次进入这个页面,wangeditor可以正常展示,刷新页面之后,就会提示“Element is not defined” Uploading image.png…

ushier avatar Feb 18 '23 08:02 ushier

nuxt3 文档里面关于客户端组件的介绍可以解决这个问题; image

hanpandeng avatar Mar 07 '23 07:03 hanpandeng

在plugins下创建wangEditor.client.ts

import { defineNuxtPlugin } from "#app";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('Editor',Editor).component('Toolbar',Toolbar);
});

phcent avatar Mar 21 '23 02:03 phcent

nuxt3 文档里面关于客户端组件的介绍可以解决这个问题; image

nuxt2 能用吗?这个问题

weijiang1994 avatar Jun 25 '23 02:06 weijiang1994

在plugins下创建wangEditor.client.ts

import { defineNuxtPlugin } from "#app";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('Editor',Editor).component('Toolbar',Toolbar);
});

感谢,这边只能用 vueApp.component 注册,我之前用了 vueApp.use 不行

weijie-he avatar Jan 16 '24 03:01 weijie-he

@ushier 解决没有,我也遇到同样的问题

Thinker-feiluo avatar Jul 05 '24 11:07 Thinker-feiluo