[뷰(Vue)] CKEditor5

텍스트 에디터의 종류는 매우 많다.

tiptap,
toast UI,
summer note 
     ...

그 중에서 vue와 호환이 되며 사용하기 쉬운 CKEditor를 골랐다.

vue와 사용한 건 아니었지만, 이전에 써본 적이 있어서 고른 것도 있다.

tiptap은 사용하기에 문서에서 설명이 부족하다고 느껴졌고,

summer note는 이미 부트스트랩을 사용하고 있기 때문에 summer note에서 사용하는 부트스트랩과 충돌해서 사용하기 어려웠다.

돌고 돌아 돌아온 CKEditor.

---

npm install로 설치해서 사용할 수도 있지만, 플러그인 등록 및 툴바 수정이 매우매우 불편했다.

결국 uninstall하고 온라인 빌더를 통해서 받아주었다.

https://ckeditor.com/ckeditor-5/online-builder/

CKEditor 5 Online Builder | Create your own editor in 5 steps

위 사이트에서 직접 커스텀 한 에디터 파일을 다운 받을 수 있다!

참고: CKEditor 공식 홈페이지

먼저 타입을 선택해 준다. 
일반적으로 사용하는 건 Classic이다.
선택 후 다음으로 넘어간다.

참고: CKEditor 공식 홈페이지

여기서 플러그인을 선택할 수 있다.
중간중간 premium(유료)도 섞여있다.
꼼꼼히 읽어보고 본인이  원하는 기능을 Add해주면 된다.
* 기본으로 설정되어 있는 건 빼고 넣어야 한다.

참고: CKEditor 공식 홈페이지

앞에서 선택한 플러그인을 바탕으로 툴바를 커스텀할 수 있다.
순서도 자유롭게 바꾸기 가능!

언어를 한국어로 바꿔주면 커스텀 끝!

 Start 누른 후 Download your custom CKEditor 5 build 버튼을 누르면 내가 설정한 ckeditor가 다운로드 된다.

---

다운로드한 ckeditor의 압축을 풀어서 내가 넣고 싶은 곳에 넣어주면 된다.

나는 src > assets 에 ckeditor로 디렉토리명을 바꾸어서 저장했다.

---

이제 CKEditor를 불러와 사용해보자.
나는 재사용성을 높이기 위해 CKEditor 컴포넌트를 생성해주었다.

먼저, 생성한 컴포넌트에서 ckeditor 라이브러리를 import 해준다. (경로는 자신이 저장한 경로로 바꿔서!)

import CustomEditor from '@/assets/ckeditor/build/ckeditor.js';

CKEditor 컴포넌트의 전체적인 기본 코드이다.

<template>
  <div>
    <div class="editor-container">
      <div id="editor">{{ initialData }}</div>
    </div>
  </div>
</template>

<script>
import CustomEditor from '@/assets/ckeditor/build/ckeditor.js';

export default {
  data() {
    return {
      editor: null,
      initialData: ''  //초기 데이터
    };
  },
  mounted() {
    CustomEditor.create(document.querySelector('#editor'))
      .then(editor => {
        this.editor = editor;

        // 초기 데이터 set
        editor.setData(this.initialData);

        // 본문의 변화 감지하여 initialData 데이터로 전달
        editor.model.document.on('change:data', () => {
          this.initialData = editor.getData();          
          component.$emit('write', component.initialData); //상위 컴포넌트로 데이터 전달
        });
      })
      .catch(error => console.error('There was a problem initializing the editor.', error));
  },
  beforeDestroy() {
    // 에디터 인스턴스 제거
    if (this.editor) {
      this.editor.destroy();
    }
  },
}
</script>

이 CKEditor를 상위 컴포넌트에서 등록해서 사용하는 것은 제법 간단하다.

<template>
    <form class="w-100 h-100 mh-100" @submit.prevent="registWriting">
      <CkEditor @write="content=$event"/>
    </form>
</template>

<script>
import CkEditor from "@/components/CKEditor.vue";

export default {
  name:'TreasureBoxWrite',
  data() {
    return {
      content: '',
    }
  },
  components: {
    CkEditor,
  },
  methods: {
    registWriting() {
    //서버로 전달하는 로직
    },
  },
}
</script>

<style>
</style>

컴포넌트로 등록해주고 이벤트 처리만 해주면 끝!

---

이미지 업로드 기능은 다른 글에서 포스트해뒀다.

https://sorrel012.tistory.com/309

Chapter 1 : AWS S3 이미지 업로드(+ CKEditor5)