Beomlog - CKEditor5

글 쓰는 페이지를 만들려고 한다. 글 쓰는 페이지와 상태와 상태관리는 post.ts라는 module에서 관리할 것이고, 글 쓰는 로직 자체는 CKEditor라는 패키지를 써서 만들 계획이다. (나는 온라인 에디터를 만들만한 실력도 자신도 없기 때문에)

 

CKEditor를 설치해주자. 에디터 설치는 이 사이트를 참고 했다.

https://m.blog.naver.com/PostView.nhn?blogId=tk2rush90&logNo=221552585263&categoryNo=9&proxyReferer=https:%2F%2Fwww.google.com%2F 

Angular2+, React 를 위한 WYSIWYG 에디터, CKEditor5

설치한 후, 만들어준다. 근데 CKEditor는 ts를 지원하지 않는것 같다. (찾아봐도 안나오더라) 그래서 그냥 js파일을 만들어 연동시켜주기로 했다. Editor파일은다음과 같이 짰다.

이제 Editor를 컴포넌트로써 넣어주고 WritingPage에 넣어주자.

잘 된다. 이제 Editor에서 쓰여지는 내용을 보면 다음과 같이 구성이 돼있음을 볼 수 있다.

보면 data라는 속성에 그대로 Raw HTML Code가 들어가있다. 아마 이를 그대로 변환하여 HTML 번역하여 에디터 위에 띄워주는 듯 하다. 그런데, React에도 비슷한 속성이 있다. 바로 dangerouslySetInnerHTML이라는 속성인데, 이 속성을 사용하면 저런 raw한 HTML코드를 바로 실제 HTML element로 변환해주어 출력해주는 속성이다. 이 속성을 사용하면, 에디터에서 작성한 저 data라는 코드를 서버에 전송하여 저장하고 있다가, 받아오면 dangerouslySetInnerHTML 속성을 사용하여 글을 띄워주는 로직을 만들면 될 것 같다.

 

원래 리액트 공식홈페이지에서는 dangerouslySetInnerHTML을 사용하지 말라고 권장한다. 이는 HTML 코드를 직접 손으로 짜서 만들다가 그것이 에러라도 일으키면 매우 귀찮아지기 때문인데, 실제로 HTML코드를 한땀한땀 손으로 작성한다고 생각하니 실수가 꽤많이 일어날 것 같고, 그렇기 때문에 에러가 날 확률이 매우 높을 것 같기는 하다. 하지만 이 경우 CKEditor에서 자동으로 HTML번역을 해주고, 따라서 에러가 날 일이 없기 때문에, 권장사항 따윈 무시해주도록 하자.

 

그럼 이제 CKEditor에서 만들어진 내용을 state로 관리해줄 차례이다. 이번에도 리덕스와 리덕스사가를 이용해 로직을 만들어주도록 하자. 위 Editor.js 파일을 보면 onChange할 때 마다 에디터 내의 상태는 자동으로 관리되는것 같고, onInit은 아마 컴포넌트가 생길때 수행하는 작업인것 같다. 우리는 컴포넌트가 생길때 딱히 수행하고 싶은 작업이 없기 때문에 이를 공백으로 지정해주고, onChange 이벤트가 생길때마다 editor.getData()를 통해서 바깥 상태를 관리해주는 것으로 하자.

 

EditorContainer를 위와같이 구성해 데이터가 바뀔때마다 실제로 어떻게 구현이 되는지 보려고 했다. 이렇게 구현하고 만들어봤더니,

위는 에디터고 아래는 dangerouslySetInnerHTML로 구현한 블록들이다. 아쉽게도 이미지는 구현되지 않는것으로 보인다. 일단은 이정도로 충분한 것 같고, 리덕스와 이미지 삽입 기능은 나중에 구현하도록 하자.