vue3 怎么使用 CKEditor 5 插件？

Question

package.json 文件

{
    "name": "vue3-test",
    "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-build-classic": "^39.0.1",
        "@ckeditor/ckeditor5-html-support": "^39.0.1",
        "@ckeditor/ckeditor5-inspector": "^4.1.0",
        "@ckeditor/ckeditor5-vue": "^5.1.0",
        "bootstrap": "^5.3.1",
        "pinia": "^2.1.6",
        "uuid": "^9.0.0",
        "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(createPinia())
app.use(router)
app.use(CKEditor)

app.mount('#app')

IndexView.vue 文件

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
import {onMounted, reactive, ref} from "vue";

export default {
    name: "IndexView",
    components: {

    },
    setup() {

        const editorConfig = reactive({
            language: 'zh-cn',
            plugins: [GeneralHtmlSupport],
            // toolbar: []
        });

        const editor = ref(ClassicEditor);

        const editorData = reactive({
            data1: '<h1>CKEditor 5 第一个数据</h1></ul>',
            data2: '<h1>CKEditor 5 第二个数据</h1></ul>'
        })

        const clickSubmit = () => {
            console.log(JSON.stringify(editorData))
        }

        onMounted(() => {



        })

        return {editorConfig, editor, editorData, clickSubmit}
    }
}
</script>

<template>
    <div style="margin: 20px auto; width: 80%;">
        <ckeditor :editor="editor" v-model="editorData.data1" :config="editorConfig"></ckeditor>
    </div>
    <div style="margin: 20px auto; width: 80%;">
        <ckeditor :editor="editor" v-model="editorData.data2" :config="editorConfig"></ckeditor>
    </div>
    <div style="margin: 20px auto; width: 80%;">
        <button type="button" @click="clickSubmit()">提交</button>
    </div>
</template>

<style scoped>

</style>

错误

vue3 插件要怎么引用

https://ckeditor.com/docs/ckeditor5/latest/features/html/gene...
官方的这个，没看明白在VUE3里面要怎么搞

Answer 1

文档又vue3的引入的说明
https://ckeditor.com/docs/ckeditor5/latest/installation/integ...