커뮤니티용 에디터를 만들어보고 있습니다.

CKEditor 4도 사용할만하긴 한데, 디자인이 오래되기도 했고 요즘 에디터랑은 기능차이도 많이나서..

개인적으로 생각했던 아쉬운점을 수정하고, 커뮤니티에서 주로 사용되는 기능만을 추려서 새롭게 만들어보고 있습니다.

Prosemirror를 기반으로 제작했습니다.

1. 복잡한 상단바 정리 & 다크모드 지원

상단바를 자주 사용되는 기능만, 크게 나타내보았습니다.

볼드나 언더라인, 취소선, 글자 크기, 배경색 등 글자와 관련된 기능 위주로 넣어보았습니다.

2. 이미지 인터렉션 개선

기존에도 이미지 크기를 조정할 수 있었으나, 내가 이미지를 선택해서 조정한다.. 라는 느낌이 잘 안들었습니다.

클릭하면 빨간색으로 이미지가 선택되고, 상단에 옵션을 출력하여 간단한 조작을 할 수 있게 기능을 넣었습니다.

3. 동영상 인터렉션 개선

기존 CKEditor에서는 동영상 조절이 불가능했습니다.

클릭해도 아무런 액션도 없고.. 위치 조절도 불가능하고.. 조절하려면 키보드로 이리저리 움직여야하고..

이 부분을 개선해서, 이미지와 동일하게 선택하면 붉은색으로 포커싱되고, 자유롭게 조정 및 속성을 선택할 수 있게 하였습니다.

자동재생이나 컨트롤 노출여부 같은 부분도 선택하여 간단하게 적용합니다.

+) 우측하단 보시면 재생 시간도 띄워줍니다.

4. 게시글에서 스티커 지원

이미지 스티커와 동영상 스티커를 집어넣을 수 있게 했습니다.

상단바에 이모티콘 메뉴를 클릭하면 다음과 같이 구매한 이모지를 볼 수 있어요.

클릭해서 본문에 넣으면 됩니다.

이걸 구현하기 위해 스티커 모듈을 수정해서, 아마 에디터 배포하면서 자료실에 신규버전 업로드할 것 같습니다.

+) 스티커도 이미지처럼 선택할 수 있습니다. 다만 크기 조정은 안됩니다.

5. 파일 첨부 폼 개선

기존에 오래된 파일첨부 폼을 재디자인하였습니다.

+) 동영상 썸네일이 있다면 나오게 개선했습니다.

특히 용량이 큰 미디어 업로드시에 불편했던 점을 에디터에서 해결해보았습니다.

동영상을 첨부할때, 커서가 있던 위치에 첨부중 메세지를 띄우도록 하였습니다.

그리고 서버에서 동영상 처리를 진행하는 커뮤니티는 99%에서 무한로딩을 겪어서 불편이 많다고 들었습니다.

99%에서 동영상 처리중... 메세지를 띄워서 간접적으로 불편을 덜어보았습니다.

6. 그 외

설문조사 같은 컴포넌트도 예쁘게 꾸며보았고요.

에디터 내부의 아이콘 같은것도 통일감있게 전부 생성했습니다.

인용구같이 자주 사용하는 애들도 넣어두었어요.

현재는 모바일에서 약간 불편한 점이 있어서 수정중이고, 얼추 완성되는대로 자료실에 올리려고 합니다.

CKEditor에서 만들어진 에디터 컴포넌트들을 어디까지 지원할지도 고민이네요.

테스트는 아래 링크에서 가능해요.

https://root-skin.demo.hotoproject.com/board

체험해보시고 개선사항이 보인다면 댓글 남겨주세요. 반영해보겠습니다.