[CKEditor] CKEditor Custom (feat. React)

🌞 개요

게시판 형식으로 앱을 만들 예정이라 HTML 편집기가 필요했다. HTML 태그를 사용해서 pop-up 이미지를 꾸밀 수 있어야 하기 때문에 문서 편집 뿐만 아니라 HTML 수정도 가능해야한다. HTML 편집기에 대해 찾아보니 WYSIWYG이라는 단어가 자주 보였다.

📚  WYSIWYG 이란?

What You See Is What You Get의 약자로, 문서 및 문서 작성 방법을 GUI로 구현한 것을 이른다. (위즈위그, 위즈윅 이라고 읽는다.) 직역 "보는 대로 얻는다"와 같이 WYSIWYG는 문서 편집 과정에서 화면에 보이는 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다. 
우리가 쓰는 워드, 한글은 WYSWIWYG 방식을 쓰고 있으나 HTML은 편집 명령어를 통해 편집하는 방식을 고수하고 있다.
(출처: 위키백과-위지위그 )
나는 HTML 편집 명령어가 필요로 하니, WYSWIWYG에 HTML 기능을 더하고자 한다. 에디터들 중에서 해당 기능을 지원하는 에디터도 있고, 직접 구현해야 하는 에디터도 있다. 다양한 에디터들 중에 React와 연동가능한 것으로 알아보니 대표적으로 Quill 과 ckEditor가 있다. 둘 다 구현을 해봤는데 CKEditor가 custom도 다양하고 잘되어 있어 CKEditor로 구현하고자 한다. (내가 quill을 잘 못쓰는 거 일수도😭😭 CKEditor 가 GUI로 Custom도 가능해서 더 편했다)

👩‍💻 CKEditor Custom

CKEditor는 online-builder로 커스텀하기 편하게 되어있다. 이 링크로 가서 커스텀을 해보자!
❶ 편집기 유형 선택 - 맘에 드는 거로 선택하면 된다. 나는 classic(권위 있는🤭)으로 선택했다. 

❷ 필요한 플러그인을 선택한다. 이건 내 pc 문제일지 모르는데, 한국어로 번역한 페이지에서는 추가가 안되니 번역 안한 상태에서 추가하면 된다. 또한, 저 ☆별★이 붙어있는 플러그인은 프리미엄 기능으로 유료서비스라 선택 해제해준다.
HTML 편집기로 커스텀하기 위해 Source editing을 추가해줬다.

❸ 사용 가능한 도구 모음에서 선택하면 선택한 도구 모음으로 이동하게 된다. 선택한 도구 모음에서 드래그해서 위치를 변경할 수도 있고, 구분선(|)을 추가해서 정리할 수도 있다.

❹ 언어를 선택한다.

❺ 빌드하고 다운로드 받으면 끝! 압축(zip)파일로 다운받아진다. 저 빨간색 박스는 프리미엄 체크를 해서 저렇게 뜨는 것으로, 2번에서 프리미엄 기능을 추가 안했으면 안 뜬다! 

👩‍💻  CKEditor 빌드

❶ react app 생성 👉 npx create-react-app 프로젝트명

❷ 폴더가 생성되면 폴더 내에 위에서 만든 custom을 압축해제해서 폴더명을 바꿔준다. 꼭 React App 루트에 위치해야한다. 이유는 아래에서 설명하겠다.

❸ React와 CKEdit을 연동하기 위한 모듈 설치 👉 npm install --save @ckeditor/ckeditor5-react

❹ 커스텀한 CKEdit을 add 해준다. (이거 때문에 CKEdit 폴더의 이름을 바꾸고, React 루트단에 위치한 것이다. 사실 안 바꿔도 되는데 귀찮음 방지!!)

❺ App.js를 아래와 같이 수정한다. 

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';

const App = () => { 
       return (
           <div className="App">
               <h2>Using CKEditor 5 build in React</h2>
               <CKEditor
                   editor={ Editor }
                   data="<p>Hello from CKEditor 5!</p>"
                   onReady={ editor => {
                       // You can store the "editor" and use when it is needed.
                       console.log( 'Editor is ready to use!', editor );
                   } }
                   onChange={ ( event, editor ) => {
                       const data = editor.getData();
                       console.log( { event, editor, data } );
                   } }
                   onBlur={ ( event, editor ) => {
                       console.log( 'Blur.', editor );
                   } }
                   onFocus={ ( event, editor ) => {
                       console.log( 'Focus.', editor );
                   } }
               />
           </div>
       );   
}
export default App;

❻ React를 실행하면 CKEditor가 설치됐다. 👉 npm start
오른쪽에 보면 커스텀한 소스가 추가된 것을 확인할 수 있다.

🤬 문제점

나는 HTML 태그 편집하기 위해 편집기를 선택한건데, 편집이 안된다..
TEXT를 입력하면 HTML로 변환은 잘 되는데,

HTML을 작성하면 TEXT로 변환이 안된다.

공식 홈페이지에서 찾아보니, htmlsupport 옵션 설정을 안해서 그런 거 같다.

 

👩‍💻 해결 방법

원인을 알았으니, 해결해보자!  본 방법은 여러 블로그들을 보고 내가 만들어낸 방법으로 야매..같으니 참고 바란다.
❶ 커스텀한 CKEdit 폴더에 있는 ckeditor.ts 파일을 수정하자.

❷ 사이트에 나와 있는 '모든 HTML 기능 활성화' 모드로 수정하고자 한다.

htmlSupport: {
    allow: [
        {
            name: /.*/,
            attributes: true,
            classes: true,
            styles: true
        }
    ]
}

아래와 같이 에러가 났다. htmlSupport를 인식하지 못하는 거 같다. (여기서부터 야매의 시작)

우선 인식하게 해주기 위해 위에 선언되어 있는 GeneralHtmlSupport로 수정해주니 에러가 없어졌다. build하기 위해서 에러를 우선 없애줬다. 아래에서 다시 변경할 것이므로 걱정말고 계속 진행하자. 

❸ 변경한 ckeditor.ts 파일을 빌드한다.

❹ 빌드가 성공하면 ckeditor.js 파일이 생성(변경)되는데, 이 파일을 수정해줘야한다.

맨 아래쪽에 위에 넣었던 GeneralHtmlSupport:{allow... 부분이 있을 것이다.

이 부분을 원래 문법인 htmlSupport로 변경해준다.

❺ 수정한 CKEdit을 add 해준다. 

짠!! 이제 HTML로 작성해도 잘 보이는 것을 확인할 수 있다.
 

👩‍💻 CKEditor Toolbar 위치 변경

간략하게 Toolbar 위치 변경하는 법을 알아보고, 본 포스트를 마무리 하겠다. 
❶ ckeditor.ts 파일에서 toolbar 옵션을 수정하면 된다.

 
❷ ts파일 build 하고, npm add 해주면 끝-!
 
현재 툴바

변경된 툴바

 

📰 참고 사이트

 
👉 WYSIWYG 에디터 종류
👉 CKEditor General-Html-Support 공식문서
👉 CKEditor React 공식문서
👉 사용자 정의 CKEditor5를 React와 통합하는 방법
👉 React 앱을 위한 CKEditor5의 사용자 정의 빌드 만들기