Skip to content

Instantly share code, notes, and snippets.

@ngekoding
Last active June 23, 2022 03:40
Show Gist options
  • Save ngekoding/9e719143b99d6708aeaa44f1af6a675f to your computer and use it in GitHub Desktop.
Save ngekoding/9e719143b99d6708aeaa44f1af6a675f to your computer and use it in GitHub Desktop.
Vue + CKEditor 5 Example
// @/helpers/ckeditor.js
const advanceEditorConfig = {
toolbar: {
items: [
'heading', '|', 'fontColor', 'highlight', '|',
'bold', 'italic', 'underline', 'strikethrough', '|', 'alignment', '|', 'numberedList',
'bulletedList', '|', 'indent', 'outdent', '|', 'link', 'insertTable', '|',
'pageBreak', '|', 'undo', 'redo'
],
},
};
const simpleEditorConfig = {
toolbar: {
items: [
'fontColor', 'highlight', '|',
'bold', 'italic', 'underline', 'strikethrough', '|', 'alignment', '|', 'numberedList',
'bulletedList', '|', 'indent', 'outdent', '|', 'undo', 'redo'
],
},
};
export {
advanceEditorConfig,
simpleEditorConfig
}
<template>
<div class="document-creator-create">
<div class="d-flex jc-space-between ai-center mb-10">
<el-button type="text" icon="el-icon-back" @click="$router.go(-1)">Kembali</el-button>
<el-button size="small" icon="el-icon-view" @click="onShowPreview()" round>Lihat Pratinjau</el-button>
</div>
<el-form :model="form" ref="documentCreatorForm">
<div class="document-editor__toolbar"></div>
<div class="document-editor__editable-container">
<ckeditor
:editor="editor"
v-model="form.template"
:config="editorConfig"
@ready="onReady"></ckeditor>
</div>
<el-form-item class="no-content mt-10" :error="errors.template" />
<el-card shadow="never">
<el-form-item label="Nama" prop="nama" :error="errors.nama">
<el-input v-model="form.nama" placeholder="Misal: Surat Keterangan Aktif Kuliah" />
</el-form-item>
<el-form-item label="Keterangan" prop="keterangan" :error="errors.keterangan">
<el-input type="textarea" v-model="form.keterangan" placeholder="Misal: Surat keterangan aktif kuliah yang berlaku pada tahun 2020" />
</el-form-item>
<el-button
class="mt-10"
type="success"
@click="onSubmit()"
:icon="saving ? 'el-icon-loading' : ''"
:disabled="saving">Simpan</el-button>
</el-card>
</el-form>
<!-- Preview document -->
<document-preview :show.sync="showPreview" :src="previewSrc" />
</div>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import DocumentEditor from '@ckeditor-builds/ckeditor5-build-decoupled-document';
import DocumentPreview from './../components/DocumentPreview.vue';
import { advanceEditorConfig } from '@/helpers/ckeditor';
export default {
name: 'document-creator-create',
components: {
ckeditor: CKEditor.component,
DocumentPreview,
},
data() {
return {
saving: false,
editor: DocumentEditor,
editorConfig: advanceEditorConfig,
form: {
template: '<p>Silahkan buat template di sini...</p>',
nama: '',
keterangan: '',
},
errors: {
template: '',
nama: '',
keterangan: '',
},
showPreview: false,
previewSrc: '',
}
},
methods: {
onReady(editor) {
const toolbarContainer = document.querySelector('.document-editor__toolbar');
const toolbarChild = editor.ui.view.toolbar.element;
// Remove unused classes
toolbarChild.classList.remove('ck-rounded-corners');
toolbarContainer.appendChild(toolbarChild);
},
onShowPreview() {},
onSubmit() {}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment