[VueJs] CKEditor 연동하기

// 설치
npm i --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

// package.json 확인
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^16.0.0",
        "@ckeditor/ckeditor5-vue": "^1.0.1"
    }

// template 파일 샘플
<template>
    <ckeditor :editor="editor"
              v-model="editorData"
              :config="editorConfig"
    />
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    import CKEditor from '@ckeditor/ckeditor5-vue'
    
    export default {
        name: 'CKEditor',
        components: {
            ckeditor: CKEditor.component
        },
        data: () => ({
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
                // The configuration of the editor.
                height: '500px',
                language: 'ko'
            }
        })
    }
</script>

 

팁

 언어를 한국어(ko) 로 지정을 해도 메뉴들이 여전히 영어로 나올 경우, 한국어를 직접 참조할 수 있도록 추가

import '@ckeditor/ckeditor5-build-classic/build/translations/ko';

참조 URL : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html