vue3 使用 CKEditor 5 错误 Uncaught ReferenceError: global is not defined？

Question

vue3 使用 CKEditor 5 错误 Uncaught ReferenceError: global is not defined？

1.6k29195272

发布于
2023-08-24 广东

不知道什么问题，大佬们帮忙看看

package.json 文件

{
    "name": "ckeditor5-vue-example",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-basic-styles": "^39.0.1",
        "@ckeditor/ckeditor5-editor-classic": "^39.0.1",
        "@ckeditor/ckeditor5-essentials": "^39.0.1",
        "@ckeditor/ckeditor5-link": "^39.0.1",
        "@ckeditor/ckeditor5-paragraph": "^39.0.1",
        "@ckeditor/ckeditor5-theme-lark": "^39.0.1",
        "@ckeditor/ckeditor5-vue": "^5.1.0",
        "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
        "pinia": "^2.1.6",
        "vue": "^3.3.4",
        "vue-router": "^4.2.4"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.3.1",
        "eslint": "^8.46.0",
        "eslint-plugin-vue": "^9.16.1",
        "vite": "^4.4.9"
    }
}

main.js 文件

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import CKEditor from '@ckeditor/ckeditor5-vue';

const app = createApp(App)

app.use(CKEditor)
app.use(createPinia())
app.use(router)

app.mount('#app')

vite.config.js 文件

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
import { createRequire } from 'node:module';
const require = createRequire( import.meta.url );

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } )
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

App.vue 文件

<template>
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>

<script>
// ⚠️ NOTE: We don't use @ckeditor/ckeditor5-build-classic any more!
// Since we're building CKEditor&nbsp;5 from source, we use the source version of ClassicEditor.
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { Link } from '@ckeditor/ckeditor5-link';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

export default {
    name: 'app',
    data() {
        return {
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
                plugins: [
                    Essentials,
                    Bold,
                    Italic,
                    Link,
                    Paragraph
                ],

                toolbar: {
                    items: [
                        'bold',
                        'italic',
                        'link',
                        'undo',
                        'redo'
                    ]
                }
            }
        };
    }
};
</script>

错误