Last active
June 23, 2022 03:40
-
-
Save ngekoding/9e719143b99d6708aeaa44f1af6a675f to your computer and use it in GitHub Desktop.
Vue + CKEditor 5 Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @/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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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