[Flask 웹 프레임워크] 게시판에 CKEditor 5 적용하기

앞의 포스트들에서 Python + Flask웹프레임워크를 이용해 간단한 글목록, 글보기, 글쓰기, 글수정 기능이 구현된 게시판을 만들었다.

[Flask 웹 프레임워크] ORM을 사용하여 게시판 글 수정하고 저장하기
[Flask 웹 프레임워크] 부트스트랩 4.5.3 적용하기
등등~ ^^

하지만 아직도 문제가 하나 남았다. 바로 에디터다. HTML의 <textarea>~~</textarea> 태그를 이용해 글을 입력받으면 글의 폰트를 바꿀수도, 글의 크기를 조절하는 것도 줄간격을 조절할 수도 없다. 글에 이미지를 삽입하는 것은 꿈과 같은 일이다. 네이버나 다음 등의 스마트한 에디터 기능을 구현하면 좋겠지만 혼자서 그런 위지윅 에디터를 만들 실력은 안된다. 가장 현실적인 해결책은 오픈소스로 만들어진 게시판 소스를 가져다 붙이는 것이다.

이럴 때 사용할 수 있는 에디터가 바로 CKEditor이다. CKEditor는 나름 위지윅을 지원하고 강력한 편집기능을 지원하는 블로그나 게시판 등에서 사용되는 세계적으로 유명한 에디터다.

일단 다운로드는 다음의 URL에서 받을 수 있다.

다운로드는 zip 파일로 받아 압축을 해제한 뒤 다음과 같이 게시판 어플리케이션 경로의 static 디렉토리 아래에 ckeditor5 라는 디렉토리를 만들고 업로드 한다.

설치가 되면 글쓰기 페이지의 telplate html 파일인 post_write.html을 다음과 같이 수정한다.

ckeditor 5를 적용한 글쓰기 페이지 — CKEditor 5가 적용된 post_write.html

6행에서 CKEditor 5의 Java Script 파일을 인클루드 한다.

7~10행은 CKEditor 5가 화면에 표시될 때 최소표시될 에디터의 높이를 지정해준다.

23행에서 에디터가 표시될 <textarea>~~</textarea>에 id를 editor로 지정하는 속성을 추가해준다. ( id=”editor” ) 이렇게 해줘야 CKEditor가 <textarea>~~</textarea> 영역에 대체되어 표시된다.

24~32행까지가 <textarea>~~</textarea> 영역에 표시될 CKEditor의 화면설정을 정의하는 코드다.

이렇게 글쓰기 기능의 HTML 템플릿인 post_write.html 페이지는 다음과 같이 CKEditor 5가 적용된 상태로 표시된다.

다음은 글 수정하기다.

글 수정하기의 경우 post_modify.html 파일을 다음과 같이 수정한다. post_write.html과 거의 유사한 방법으로 수정해주면 된다.

6~12행까지는 앞의 post_write.html 페이지와 거의 동일하다.

다음은 글 수정페이지에 추가된 CKEditor 5다.

CKEditor 5가 적용된 글쓰기 페이지 — 글 수정하기(post_modify.html)에 적용된 CKEditor 5

표도 넣어보고 특수문자도 넣어본다.

CKEditoir를 적용한 뒤 기존에 CKEditor 적용 이전의 글을 열어보면 에디터에 아무것도 표시되지 않는 경우가 있다. 그냥 내용을 수정하고 저장하면 다음부터 수정된 내용이 에디터 내부에 잘 표시된다.

다음은 글 보기다. 그런데 글 보기는 궂이 CKEditer를 적용할 필요는 없다. 다만 CKEditor에서 글 작성 시 적용된 글의 스타일이 동일하게 출력해줘야 한다.

그렇게 하기 위해서는 post_view.html 페이지를 다음과 같이 수정해줘야 한다.

CKEditor 에서 저장한 글을 HTML로 표시하기 — CKEditor 에서 저장한 글을 보여주는 post_view.html 코드

CKEditor에서 줄간격, 폰트크기, 표와 같은 글 꾸미기 요소들과 <, >, & 등 HTML에서 사용되는 특수문자들은 문자 그대로 저장되지 않는다. 기호 “<” 는 “<” 로 기호 “>”는 “>”로 공백문자인 ” “는 ” “로 치환되어 DB에 저장된다.

따라서 DB에서 < , > , 를 각각 < , > , 공백으로 치환에 출력해야 한다. 그 코드가 바로 20~30행의 코드다.

먼저 20행에서 <div> ~ </div> 태그를 이용해 글이 표시될 컨테이너를 정의하고 이 컨테이너의 id를 content 로 지정한다. 그리고 21~38행에서 글의 컨텐츠(post.content)로 전달받은 글의 내용을 tmpStr 변수에 넣고 < , > 등 기호들을 원래의 < , > , & 등으로 치환해 넣는다.

마지막으로 29행에서 HTML 도큐먼트 객체에서 content 라는 id를 갖는 객체를 찾아 tmpStr 변수의 내용을 출력한다.

이렇게해주면 CKEditor를 표시하지 않고도 CKEditor에서 입력한 글의 스타일을 그대로 가져다 동일하게 출력해줄 수 있다.

아래 화면이 바로 CKEditor 5에서 입력받아 DB에 저장된 내용을 HTML로 동일하게 표시한 화면이다.