Requirement:
yarn add @ckeditor/ckeditor5-vue@23.0.0
- Node 14.18.3
- NPM 6.14.15
- Yarn 1.22.4
yarn add @blowstack/ckeditor5-full-free-build@1.0.2
// plugins/ckeditor.vue
import Vue from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
Vue.use( CKEditor )
// components/CkEditor.vue
<template>
<ckeditor
:editor="editor"
:value="value"
:config="config"
@input="(event) => $emit('input', event)"
/>
</template>
<script>
let FullFreeBuildEditor;
let CKEditor;
if (process.client) {
FullFreeBuildEditor = require('@blowstack/ckeditor5-full-free-build');
CKEditor = require('@ckeditor/ckeditor5-vue');
} else {
CKEditor = { component: { template: '<div></div>' } };
}
export default {
name: 'CkEditor',
components: {
ckeditor: CKEditor.component,
},
props: {
value: {
type: String,
required: false,
},
config: {
type: Object,
required: false,
default () {},
},
},
data() {
return {
editor: FullFreeBuildEditor,
};
},
};
</script>
// pages/editor.vue
<template>
<div>
<h1 class="container mt-3 mb-3">Sample CKEditor with Nuxt.js</h1>
<div class="container">
<form-ck-editor :config="editorConfig" v-model="editorInput" />
</div>
<div class="container mt-3">
<div class="row">
<h2 class="col-md-12">Output</h2>
<div>{{ editorInput }}</div>
</div>
</div>
<div class="container mt-3">
<div class="row">
<h2 class="col-md-12">Preview</h2>
<div v-html="editorInput"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
editorInput: '',
editorConfig: {
width: 'auto',
plugins: [
'Bold',
'Link',
'List',
'FontSize',
],
}
}
},
}
</script>
source: https://www.linkedin.com/pulse/how-use-ckeditor-its-plugins-nuxtjs-mohit-sehgal/?trk=pulse-article_more-articles_related-content-card
Komentar