'Laravel 9 vue js 3 Ckeditor 5 not showing
I want to install ckeditor to add blog posts to my Laravel 9 mix and vue js 3 project. If I do as the ckeditor says on his page, the ckeditor will not appear unless he makes a mistake
App.js
require('./bootstrap');
import { createApp } from "vue";
import App from './components/App';
import router from './router'
import store from "./store/store";
import AOS from 'aos'
import 'aos/dist/aos.css'
import CKEditor from '@ckeditor/ckeditor5-vue';
const app = createApp({});
app.AOS = new AOS.init();
app.component('my-app',App);
app.use(router)
app.use(store);
AOS.init();
app.mount('#wrapper');
createApp( { /* options */ } ).use( CKEditor ).mount( /* DOM element */ );
newBlog.vue file
<script setup>
import {mapGetters} from "vuex";
</script>
<template>
<div id="app">
<form @submit.prevent>
<div class="form-row mb-4">
<label>Blog adi</label>
<div class="form-group col-md-12">
<input class="form-control w-100" v-model="blogName">
</div>
</div>
<div class="form-row mb-4">
<label>Blog yazısı</label>
<div>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</div>
<button type="button" @click="send()" class="btn btn-primary mt-3">Redaktə et</button>
</form>
</div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
export default {
name: 'app',
data() {
return {
blogName: '',
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
// The configuration of the editor.
}
};
}
}
</script>
Export
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|