Svelte - CKEditor 적용하기

 아주 오랜만입니다. 그 동안 많은 일이 있었습니다. 이전 글을 적을 때만 해도 선임이었던 저는 어느새 책임이 되었습니다. 그리고 제가 다니던 회사에서는 저희 사업부가 해체 되어 버렸습니다. 그 결과 저는 약 2달 간 발령 대기와 같은 상태로 월급 좀도둑을 하고 있는 중입니다(루팡은 대도이므로 저에게 어울리지 않습니다). 

 월급 좀도둑을 하고 있는 중에 너무 심심하기도 하고 구글신님에게 물어봐도 명확하게 답을 주지 않던 Svelte에서 CKEditor를 완벽하게 적용하는 방법을 찾았기에 여기 적어두려 합니다. 

 

 본래 CKEditor 대신 다른 에디터를 이용 중이었는데 기능이 너무 미비하여 CKEditor로 교체하게 되었습니다. 적용은 일단 아래 저장소를 참고하시면 됩니다.

 

https://github.com/techlab23/ckeditor5-svelte

GitHub - techlab23/ckeditor5-svelte: ckeditor5 editor component for svelte

 

 근데, 문제가 지금 Svelte가 5를 바라보고 있는 시점인데 3일 때 개발 된 것이라 저대로 바로 적용하면 에러가 납니다. 그래서 patch-package를 통해서 Ckeditor.svelte에 42줄에 있는 

editor.isReadOnly = disabled;

 

를 주석 처리해야 합니다. patch-package에 대한 내용은 따로 여기다 적지 않겠습니다. 이제 그렇게 페이지를 들어가 보면 정상적으로 작동하는 걸 확인 할 수 있는데, 잘 되는 줄 알았는데...

새로고침 하거나 다시 들어가면 또 에러가 발생해 버립니다? 지겹게 Svelte 개발하면서 본 '...is undifined' 라는 문구와 함께.. 아, 이게 import 할 때 브라우저 함수를 써버리는구나? 라는 걸 깨닫게 되었습니다. 그래서 어떻게 하지 하면서 열심히 짱구를 굴리다보니 그러면 import를 onMount에서 하면 되잖아? 라는 생각이 들었습니다.

let isOnMount = false;
onMount(async () => {
	/**
	*	import를 지연시켜서 onMount에서 브라우저 접촉 후 들고오게 변경
	**/
	editor = (await import("@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor")).default;
    isOnMount = true;
});

<!-- onMount가 끝나면 불러오게 수정 -->
{#if isOnMount}
<CKEditor
        bind:editor
        on:ready={onReady}
        bind:config={editorConfig}
        bind:value={editorData} />
{/if}

 

이렇게 적용하면 모두 다 정상적으로 작동하는 걸 확인할 수 있습니다. 그나저나 티스토리에서 코드 블럭을 제공하길래 오늘 한번 써봤는데 조금(많이) 촌스럽....안 이뻐.....