vue3 怎么使用 CKEditor 5 插件?

作者站长头像
站长
· 阅读数 10

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 怎么使用 CKEditor 5 插件?

vue3 插件要怎么引用

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

回复
1个回答
avatar
test
2024-06-28
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容