vue3 怎么使用 CKEditor 5 插件?
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里面要怎么搞
回复
1个回答
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容