在nuxt中引入wangeditor5报错解决

我这里使用的是nuxt3+vue3，wangeditor5

不需要再nutx.config.js中额外配置什么，直接按照以下步骤就可以实现

一、使用npm下载wangeditor/editor wangeditor/editor-for-vue

二、直接编写组件，在commponents里面创建

<template>

    <div ref="editorContainer" class="editor-container" ></div>

</template>

<script setup>

import "@wangeditor/editor/dist/css/style.css";  //引入样式

import { ref, onMounted, onBeforeUnmount } from "vue";

import { createEditor, createToolbar } from "@wangeditor/editor"; //引入创建element的包

const editorContainer = ref(null);

let editor = null;

onMounted(() => {

    editor = createEditor({

        selector: editorContainer.value,

        config: {

            placeholder: "请输入内容...",

            autoFocus: true,

            showLinkImg: false,

            allowImageRemote: false

        },

        mode: "default" // 或者 'simple' 简单模式

    });

    createToolbar({

        editor,

        selector: editorContainer.value,

        config: {

            showLinkImg: false,

            allowImageRemote: false

        }

    });

    setTimeout(() => {

        editor.focus();

    }, 1000);

});

onBeforeUnmount(() => {

    if (editor) {

        editor.destroy();

    }

});

</script>

<style scoped>

.editor-container {

    border: 1px solid #ccc;

    padding: 10px;

    min-height: 300px;

}

:deep .w-e-bar-item:nth-child(17),

:deep .w-e-bar-item:nth-child(22),

:deep .w-e-bar-item:nth-child(23),

:deep .w-e-bar-item:nth-child(24),

:deep .w-e-bar-item:nth-child(25),

:deep .w-e-bar-item:nth-child(26) {

    display: none;

}

.editor-container {

    border: 1px solid #ccc;

    padding: 10px;

    min-height: 300px;

    position: relative; /* 确保相对定位 */

    z-index: 1; /* 确保编辑器位于前端 */

}

</style>

三、在文件中引入就大功告成了

注意：务必在组件外面包裹client-only标签。不然会报错