널리 사용되는 에디터에서 이런 문제점들이 연달아 터져나온다는 것은 필경 내 실력 부족일 가능성이 매우 높다. 나름 에디터 구조를 파악하고 사용법을 익히려고 노력해보았으나 아래와 같은 이유들로 인해 어려움을 겪게 되었다.
(...)
const htmlToEditor = docSnap.data().text;
const blocksFromHtml = htmlToDraft(htmlToEditor);
if (blocksFromHtml) {
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState);
setRawTextData(editorState);
}
(...)
이 에디터에서 줄 바꿈은 하나의 문장을 p 태그로 감싸 한 문장과 다음 문장 사이의 줄 바꿈을 처리해주는 방식으로 이루어지고 있었다.
그래서 이 에디터를 사용할 때 줄을 바꾸기 위해서는 enter 키만 입력한다고 되는 것이 아니라, 줄을 바꾸고 space bar로 빈 공백문자를 하나 넣어주어야 진짜 줄바꿈이 일어난다. 이건 정상적인 방법이라고 할 수 없다.
폰트와 글자 크기 변경 기능들이 때때로 동작하지 않는 것은 내가 입력한 코드에 에러가 있거나 최적화 문제로 입력이 인식되지 않는 것으로 추정되는 데 여러 패키지에서 함수들을 연달아 꺼내서 사용하는 탓에 이 부분은 내 실력으로는 어떻게 해결할 방법이 없었다.
데이터 출력 시 글자와 문장 간격 문제는 내가 블로그 프로젝트를 구현할 때, Reset CSS를 사용하여 HTML 태그에 기본적으로 적용되어 있던 CSS 속성을 없애서 발생한 문제였다. 글 데이터를 출력할 구역에서 CSS를 설정해주니 문제가 해결되었다.
나름 노력을 해봤지만 3가지 문제 중 2가지가 해결되지 않는다. 당장 내 실력으로 해결하는 것도 어려워 보이고, 이미 상당한 시간을 소모한 상황에서 더 투자할 여력도 없었다. 따라서 draft.js 말고 JavaScript 환경에서 사용하는 또 다른 웹 에디터를 찾아 에디터에 대한 이해도를 높임과 동시에 무엇이 더 사용하기 편리할 지 알아보기로 하였다.
draft.js를 처음 찾았을 때는 일단 구글에서 검색 좀 되고 당장 작동만 되면 상관없다는 명분을 가지고 눈 앞에 보이는 에디터를 찾아 사용했었다.
구글 검색과 최근 세간의 화제가 되고 있는 ChatGPT의 추천을 받아보았는데..
ChatGPT는,
Quill, Draft.js, CKEditor, TinyMCE 등을.
한국인터넷진흥원(KISA)에서는 국내에서 가장 많이 사용되는 에디터를
FCKeditor, CKeditor, SmartEditor2.0, GEditor, RainEditor, DaumEditor, TinyMCE Editor, EZEditor라고 설명하였고.
이외에는
jodit, slate, medium-editor 등등의 이름이 거론되었다.
자료를 찾아보니 대략 npm trends라는 곳에서 다운로드 횟수를 기준으로 비교가 가능하다는 사실을 알았다.
결과적으로 JavaScript 환경에서 '많이' 사용되고있는 웹 에디터에는..
GEditor, ckeditor, draft-js, jodit, medium-editor, quill, react-draft-wysiwyg, slate, tinymce 정도가 있다는 결론을 내렸다.
내가 사용했었던 draft-js는 npm 다운로드 숫자로는 압도적이었으나 마지막 업데이트 시점에 3년에서 4년 전으로 지금 시점에서는 유지보수가 이루어지지 않는 것으로 파악되었다. 에디터에서 draft-js와 쌍벽을 이루고 있는 것은 quill이었으나 이쪽도 유지보수가 끊어져 있는 것으로 보였다.
다음 순서로는 slate와 tinymce를 가장 많이 사용하고 있었는데, 이들 모두 1달 혹은 몇 일 전까지 내용이 업데이트 된 것을 확인하였다.
결과적으로 오픈소스 소프트웨어에, 현재 업데이트가 이루어지고 있으며, 사용자의 사용 빈도도 적당하고, 구글에서 참고자료도 쉽게 접할 수 있는..
TinyMCE를 새로운 웹 에디터 구현에 사용할 것을 결정하였다!