Vue - ckeditor 사용방법

vue 프로젝트에 ckeditor5 사용시 에러 발생

기본 에디터에 플러그인 추가시 아래 에러 발생

ckeditor.js:5 TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (iconview.js:100)
    at IconView.render (iconview.js:76)
    at IconView.on (observablemixin.js:249)
    at IconView.fire (emittermixin.js:196)
    at IconView.(anonymous function) [as render] (http://localhost:3030/js/bundle.js:27142:16)
    at ViewCollection.on (viewcollection.js:68)
    at ViewCollection.fire (emittermixin.js:196)
    at ViewCollection.add (collection.js:182)
    at DropdownButtonView.render (buttonview.js:168)
    at DropdownButtonView.render (dropdownbuttonview.js:64)

기본 클래식 editor만 사용하면 에러 없음

 

ckeditor5 기본 에디터

ckeditor4 로 변경 하여 사용

npm install ckeditor4-vue

ckeditor4 설치

import CKEditor from 'ckeditor4-vue';
Vue.use( CKEditor );

vue 생성한 곳에 해당 코드 추가

<template>
    <div id="app">
        <ckeditor v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

위 코드와 같이 사용

 

ckeditor4 standard 에디터

 

ckeditor4의 기본 기능이 많음
이외 기능 추가는 아래사이트 참고

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html

Vue Integration - CKEditor 4 Documentation